5-minute quickstart

Set up a Hono Worker that renders Svelte 5 components. The repo lives at acoyfellow/hono-svelte.

1. Install

npm i hono-svelte hono svelte
npm i -D esbuild esbuild-svelte wrangler

2. Make a component

hello.svelte:

<script>
  let { initialCount = 0 } = $props();
  let count = $state(0);
  $effect(() => { count = initialCount; });
</script>

<button onclick={() => count += 1}>clicks: {count}</button>

3. Make a worker

worker.ts:

import { Hono } from "hono";
import { svelteRenderer, attachSvelteRoutes } from "hono-svelte";
import Hello from "./hello.svelte";

declare const __HONO_SVELTE_BUNDLES__: Record<string, { js: string; css: string }>;

const app = new Hono();
attachSvelteRoutes(app, { bundles: __HONO_SVELTE_BUNDLES__ });

app.get("/", svelteRenderer(Hello, { hydrateAs: "hello", title: "Hello" }));

export default app;

4. Make a build script

build.mjs:

import { buildHonoSvelte } from "hono-svelte/build";

await buildHonoSvelte({
  workerEntry: "./worker.ts",
  outDir: "./build",
  components: { hello: "./hello.svelte" },
});

5. Wire wrangler

wrangler.toml:

name = "my-app"
main = "build/worker.bundled.mjs"
compatibility_date = "2026-04-21"
compatibility_flags = ["nodejs_compat"]

[build]
command = "node build.mjs"

6. Run it

npx wrangler dev
# → http://localhost:8787

Click the button. Counter goes up. Full API →