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.

Picking a starter

Starter	When to pick it
`basic-html-starter`	Static HTML pages. Sprinkle of vanilla JS. No server-side rendering.
`hono-jsx-starter`	Dynamic server-rendered HTML with JSX. API routes. No React, no SPA.
`react-hono-starter` (you're here)	Client-side React SPA with a Hono API backend.

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.

Architecture

Rendering mermaid diagram...

File structure

index.ts              ← Hono backend (serves frontend + API routes)
frontend/
  root.tsx            ← HTML shell (stamps immutable asset URLs)
  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

How it works

index.ts is the HTTP entrypoint — a Hono server that serves the frontend and any API routes you add.
frontend/root.tsx is the HTML shell — it loads Twind and stamps immutable asset URLs for the favicon and React entrypoint.
frontend/index.tsx mounts the React app.
frontend/components/App.tsx is the root layout — add new components alongside it.
frontend/components/Counter.tsx is an example stateful component — replace it with your own!

Next steps

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

Template updates and upgrade paths for existing remixes: CHANGELOG.md