Skip to content


Choose a tag to compare
@yusukebe yusukebe released this 09 Feb 11:27
· 219 commits to main since this release

Going to full-stack.

Hono v4.0.0 is out! This major update includes some breaking changes and the addition of three major features.

  1. Static Site Generation
  2. Client Components
  3. File-based Routing

So Hono is going to full-stack. Let's take a look at the three features.

1. Static Site Generation

We introduce SSG Helper. With it you can generate static pages of your Hono applications.

To use this, create a separate file build.ts from the application and call the toSSG() function in it.

import fs from 'node:fs/promises'
import { toSSG } from 'hono/ssg'
import app from './src/index'

toSSG(app, fs)

There are adapters for Bun and Deno, so you can write shorter for Bun, for example.

import { toSSG } from 'hono/bun'
import app from './src/index'


And, just run it.

bun ./build.ts

Then HTML is generated.

$ ls static
about.html  index.html

You can easily deploy this page to Cloudflare Pages, etc.

$ wrangler pages deploy static

With Vite

We have created a plugin @hono/vite-ssg for Vite. By using this, you will be able to develop and build a static sites with just the vite command.

The configuration is the following:

import build from '@hono/vite-ssg'
import devServer from '@hono/vite-dev-server'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
      entry: 'src/index.tsx'

If you want to develope, just run the command:


If you want to build, just run the command:

vite build

In combination with the deployment mentioned above to Cloudflare Pages, you can develop, SSG build, and deploy non-stop. And each of them is extremely fast (the video is 2x faster).

Screen cast

2. Client Components

hono/jsx was originally designed to run server-side as an alternative to template engines such as Mustache. Server-side JSX is an interesting experiment, creating a new stack to combine with HTMX and Alpine.js. But that's not all.

Now, hono/jsx runs on the client as well. We call it hono/jsx/dom or Client Components.

The exact same code as React runs with Hono's JSX.

import { useState } from 'hono/jsx'
import { render } from 'hono/jsx/dom'

function Counter() {
  const [count, setCount] = useState(0)
  return (
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>

function App() {
  return (
        <Counter />

const root = document.getElementById('root')
render(<App />, root)

The Hooks listed below are also implemented and you can create Client Components just like in React.

  • useContext
  • useEffect
  • useState
  • useCallback
  • use
  • startTransition
  • useDeferredValue
  • useMemo
  • useLayoutEffect
  • Memo
  • isValidElement

startViewTransition family

In addition, the original APIs, startViewTransition family make the View Transition API easy to use.

import { useState, startViewTransition } from 'hono/jsx'
import { Style, css, keyframes } from 'hono/css'

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }

const App = () => {
  const [showTitleImage, setShowTitleImage] = useState(false)

  return (
      <button onClick={() => startViewTransition(() => setShowTitleImage((state) => !state))}>Click!</button>
        {!showTitleImage ? (
          <img src="" />
        ) : (
              animation: ${fadeIn} 1s;
              background: url('');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 500px;
              height: 200px;

You can easily create the animation.



The hono/jsx/dom is fast and ultra-small. It has a smaller JSX runtime dedicated to the DOM in addition to the common server and client ones. Just specify hono/jsx/dom instead of hono/jsx in tsconfig.json.

"jsx": "react-jsx",
"jsxImportSource": "hono/jsx/dom"

The above counter example is 2.8KB with Brotli compression.


In comparison, React is 47.3 KB for the same thing.


3. File-based Routing

Last is File-based Routing. This is not included in the hono package, but is provided in a separate package.

It is named HonoX.


HonoX has the following features.

  • File-based routing - You can create a large application like Next.js.
  • Fast SSR - Rendering is ultra-fast thanks to Hono.
  • BYOR - You can bring your own renderer, not only one using hono/jsx.
  • Islands hydration - If you want interactions, create an island. JavaScript is hydrated only for it.
  • Middleware - It works as Hono, so you can use a lot of Hono's middleware.

You can try it now. One of create-hono's starter templates named "x-base" uses HonoX.

For detailed usage, please see the following HonoX repository.

The core is still tiny

The addition of this feature has no impact on the core. "Hello World" in hono/tiny is still small, only 12KB minified.

Other new features

  • feat(base): Set Default Path to '*' for app.use() - #1753
  • feat(hono-base): app.on supports multiple paths - #1923
  • feat(css): Introduce pseudo global selector and class name based extend syntax - #1928
  • feat(jsx-renderer): Nested Layouts via Renderer - #1945
  • feat!: validator throws error rathar than return c.json() - #2021
  • feat: introduce Accepts Helper - #2001
  • feat(serve-static): mimes option for serve-static - #2094
  • feat!(validator): supports transformation - #2130

Breaking Changes

There are several breaking changes. Please see the Migration Guide below.


Thanks to all contributors. Great job on all the hard work!

All Updates

New Contributors

Full Changelog: v3.12.10...v4.0.0