React + Hono Starter

A minimal starter template for building client-side React apps with a Hono backend on Val Town. Click Remix to get your own copy.

Want to build UI? Start writing React components in frontend/components/. Import them into App.tsx and you're good to go. Styling is Twind — just use Tailwind utility classes, zero config.

Want to add an API? Add routes in index.ts (there's a commented-out example). Fetch them from your React components.

Rendering mermaid diagram...

index.ts              ← Hono backend (serves frontend + API routes)
frontend/
  index.html          ← HTML shell (loads Twind + React)
  index.tsx           ← React entrypoint (mounts <App />)
  favicon.svg         ← App icon
  components/
    App.tsx            ← Root component (layout + view source link)
    Counter.tsx        ← Example component with state

1. index.ts is the HTTP entrypoint — a Hono server that serves the frontend and any API routes you add.
2. frontend/index.html loads Twind and the React entrypoint.
3. frontend/index.tsx mounts the React app.
4. frontend/components/App.tsx is the root layout — add new components alongside it.
5. frontend/components/Counter.tsx is an example stateful component — replace it with your own!

• Add API routes in index.ts
• Add new components in frontend/components/
• Add a SQLite database — see the React Hono Example for a full-stack example with database, queries, and shared types