/Knowledge/sources/honojs__hono/llms-full/cloudflare-workers-vite-hello-world--c20e01ca9752.md
Cloudflare Workers + Vite: Hello World - hono-docs
Cloudflare Workers + Vite: Hello World Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt 2 hello world S...
Cloudflare Workers + Vite: Hello World
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#2-hello-world
Summary
Edit src/index.tsx like the following: ```tsx import { Hono } from 'hono' import { renderer } from './renderer' const app = new Hono() app.use(renderer) app.get('/', (c) => { return c.render( Hello, Cloudflare Workers! ) }) export defa...
Content
Edit src/index.tsx like the following:
import { Hono } from 'hono'
import { renderer } from './renderer'
const app = new Hono()
app.use(renderer)
app.get('/', (c) => {
return c.render(<h1>Hello, Cloudflare Workers!</h1>)
})
export default app
The renderer is defined in src/renderer.tsx using Hono's JSX renderer middleware together with vite-ssr-components, which wires up Vite's client and assets:
import { jsxRenderer } from 'hono/jsx-renderer'
import { Link, ViteClient } from 'vite-ssr-components/hono'
export const renderer = jsxRenderer(({ children }) => {
return (
<html>
<head>
<ViteClient />
<Link href='/src/style.css' rel='stylesheet' />
</head>
<body>{children}</body>
</html>
)
})
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#2-hello-world",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / Cloudflare Workers + Vite > 2. Hello World",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 498,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "Cloudflare Workers + Vite: Hello World",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}