Respond with HTML not using JSX and string

[Lippiece]

Is there any way we can serve, e.g. Svelte components (without heavy client logic) or Web Components? Or maybe HTML files/snippets?

I have Astro+Hono+Svelte setup. Using JSX is not my preference, but I end up with JSX components mixed with Svelte components. Tools like Storybook don't play very well with mixed frameworks (a drag to configure than just one).

Web Components seem more promising. Maybe we can bundle them as HTML for routes to serve?

[manimovassagh]

Yes, you are not limited to JSX — Hono supports returning raw HTML strings directly.

Option 1: Return HTML strings with c.html()

app.get("/", (c) => {
  return c.html("<h1>Hello World</h1><p>No JSX needed</p>");
});

Option 2: Read and serve HTML files

import { readFile } from "fs/promises";

app.get("/page", async (c) => {
  const html = await readFile("./views/page.html", "utf-8");
  return c.html(html);
});

Option 3: Use a template engine

You can plug in any template engine (ETA, Mustache, etc.):

import { Eta } from "eta";
const eta = new Eta({ views: "./views" });

app.get("/", (c) => {
  const html = eta.render("index", { name: "World" });
  return c.html(html);
});

For Svelte specifically: If your Svelte components are SSR-rendered (e.g., compiled to HTML strings), you can call c.html() with the output. Something like:

import MyComponent from "./components/MyPage.svelte";

app.get("/", (c) => {
  const { html, css } = MyComponent.render({ props });
  return c.html(`<style>${css.code}</style>${html}`);
});

For Web Components: Bundle them as standalone JS, serve the JS file statically, and just reference them in your HTML string:

app.get("/", (c) => {
  return c.html(`
    <script src="/static/my-component.js"></script>
    <my-component></my-component>
  `);
});

Since you already have Astro in the mix, you might also consider using Astro as the rendering layer and Hono purely as the API backend — that way Svelte stays in Astro-land and you avoid the mixed-framework Storybook pain entirely.