JSX and HTML Rendering

Hono supports JSX for server-rendered HTML. The Vite template configures TypeScript with jsxImportSource: "hono/jsx", so components can be written in .tsx files.

const Page = () => {
  return <h1>Hello Hono</h1>
}

app.get('/', (c) => c.render(<Page />))

Components

Components are plain functions. They can receive props, map over data, and compose with other components.

const ChapterLink = (props: { title: string; slug: string }) => {
  return <a href={`/chapters/${props.slug}`}>{props.title}</a>
}

Markdown output

This book converts Markdown chapters into HTML once at module load. The route then inserts trusted chapter HTML into the page body.

That keeps chapter authoring focused on prose while the surrounding layout stays in Hono JSX.