Hono Jsx

If you're building server-side rendered apps with Hono and want JSX templating without shipping React to the browser, this is the clean path forward. It handles async components, streaming with Suspense, and automatic head hoisting, all while staying framework-light. The zero client-side hydration overhead is the real win here. You get familiar JSX syntax for your HTML templates without the typical SPA baggage. Worth considering if you're already in the Hono ecosystem and tired of string concatenation or heavyweight templating engines. Solid for APIs that occasionally need to render HTML or full SSR apps where you control the whole stack.

skills.sh installs: 347
GitHub stars: 79
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bobmatnyc/claude-mpm-skills --skill hono-jsx --agent claude-code

Installs into .claude/skills of the current project.

Files

Hono JSX - Server-Side Rendering

Overview

Hono provides a built-in JSX renderer for server-side HTML generation. It supports async components, streaming with Suspense, and integrates seamlessly with Hono's response system.

Key Features:

Server-side JSX rendering
Async component support
Streaming with Suspense
Automatic head hoisting
Error boundaries
Context API
Zero client-side hydration overhead

When to Use This Skill

Use Hono JSX when:

Building server-rendered HTML pages
Creating email templates
Generating static HTML
Streaming large HTML responses
Building MPA (Multi-Page Applications)

Not for: Interactive SPAs (use React/Vue/Svelte instead)

Configuration

TypeScript Configuration

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"
  }
}

Alternative: Pragma Comments

/** @jsx jsx */
/** @jsxImportSource hono/jsx */

Deno Configuration

// deno.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:hono/jsx"
  }
}

Basic Usage

Simple Rendering

import { Hono } from 'hono'

SKILL.md on GitHub

Details

Repository: github.com/bobmatnyc/claude-mpm-skills
Categories: Frontend Development, Backend & APIs
First seen: Jun 3, 2026