1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4
5// This uses by personal API key, you'll need to provide your own if
1/** @jsxImportSource https://esm.sh/react */
2import { OpenAI } from "https://esm.town/v/std/openai";
3import { Hono } from "npm:hono@3";
4import { renderToString } from "npm:react-dom/server";
5
6const openai = new OpenAI();
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";
33 <script src="https://cdn.tailwindcss.com/"></script>
34 <script type="module">
35 import { html, Component, render } from "https://cdn.cbd.int/htm/preact/standalone.module.js";
36 import { ofetch } from "https://esm.sh/ofetch/dist/index.mjs";
37 import { z } from "https://esm.sh/zod";
18<head>
19 <meta charset="UTF-8">
20 <title>Reactive Form with Alpine.js</title>
21 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
22 <script defer src="https://unpkg.com/htmx.org"></script>
1This example shows how Hono, Alpine, and Htmx can play together.
2- Alpine is great at reactive client-side updates
3- Htmx is great at sending/receiving content from server
4- These two can be combined for reactive clients plus easy AJAX
5
6Migrated from folder: Experiments/HAT_Stack/honoAlpineHtmxDemo
18<head>
19 <meta charset="UTF-8">
20 <title>Reactive Form with Alpine.js</title>
21 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
22 <script defer src="https://unpkg.com/htmx.org"></script>
Starter template with client-side React & Hono server
A web-based dice roller using React on Val Town
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
