A template for datastar apps with Hono and Val Town.

There is no client-side JS here, except for the data-star library. This uses Hono to keep any application state on the server (it uses in-memory state only), and clicks result in a request to the server, which sends back the updated data.

This does depend on the val command line tool.

Use the Val Town CLI to push the project:

vt push

Use vt watch to auto-sync changes to Val Town as you edit locally:

vt watch

The HTTP entry point is server.http.tsx, which defines a Hono app with all routes. It renders the Page component for the homepage and returns SSE responses for API endpoints.

The page.tsx is a layout skeleton that accepts props.

Create val
export const Page:FC<PropsWithChildren<PageProps>> = ({
    title,
    signals = {},
    children
})

Any site pages should extend this template, and pass in content and signals. An example is ./src/home-page.tsx.

• Server renders the full HTML with components
• data-signals initializes the reactive state
• Datastar library (loaded via CDN) handles client-side reactivity
• API endpoints return SSE responses that update signals