template datastar valtown

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.

Val Town treats files with .http in the name as web endpoints.

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