5-minute quickstart

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

svelte-hono on npm · repo

1. Install

npm i svelte-hono 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 "svelte-hono";
import { bundles } from "./bundles.generated";
import Hello from "./hello.svelte";

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

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

export default app;

4. Make a build script

build.mjs:

import { buildHonoSvelte } from "svelte-hono/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. Add to .gitignore

bundles.generated.ts is regenerated each build. Don't commit it.

# .gitignore
bundles.generated.ts
build/

7. Run it

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

Click the button. Counter goes up. Full API →