react-ui

React UI

For any val that renders a UI, prefer to build it with React components in .tsx files, unless the user states otherwise. The templates/react-hono-starter template is set up for this — start there with remix_val instead of building from scratch.

File conventions

Put markup, styles, and scripts in real files — avoid template literal strings (e.g. new Response(\...`)`). Code in template strings has no syntax highlighting, no linting, no type checking, and is unreviewable.

• .tsx — React/JSX components, any UI with logic or interactivity
• .html — purely static markup
• .ts — server code and scripts

Build UI component by component in .tsx files. Compose small components rather than rendering one giant page.

Styling: Twind + Tailwind

Prefer Twind to apply Tailwind utility classes at runtime — no build step required. Add the script to your HTML shell:

<script src="https://cdn.twind.style" crossorigin></script>

Then use Tailwind classes directly in JSX:

<div className="flex items-center gap-4 p-6 rounded-lg bg-white shadow">
  <h1 className="text-2xl font-bold">Hello</h1>
</div>

Avoid inline <style> tags, CSS-in-JS objects, or separate .css files, unless the user says otherwise.

Serving assets: versioned + immutable

Serve client modules with serveImmutableFile from std/utils — browsers cache them immutably, and publishing bumps the val's version, which invalidates automatically (full pattern: the client-side-js skill). A never-cached frontend/root.tsx shell (hono/jsx) stamps the entry and favicon with immutableFileUrl:

// frontend/root.tsx — in the Root() HTML shell:
<script src={immutableFileUrl("/frontend/index.tsx")} type="module" />

// index.ts:
app.get("/", (c) => c.html(Root()));
app.get("/__immutable/*", (c) => serveImmutableFile(c.req.path));

View source link

Every UI val should expose a way for users to see and remix its source. Both parts are required: