Menu
Hono JSX - server-side rendering, streaming, async components, and HTML generation patterns
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill hono-jsxThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
LinkedIn automation via the Linked API CLI - fetch profiles, search people and companies, send messages, manage connections, create posts, react, comment, and run Sales Navigator and custom workflows. Use when the user wants to interact with LinkedIn.
Xquik X data automation API - Use REST or MCP for tweet search, user lookup, follower exports, media downloads, monitors, webhooks, giveaway draws, and confirmation-gated X actions.
MCP (Model Context Protocol) - Build AI-native servers with tools, resources, and prompts. TypeScript/Python SDKs for Claude Desktop integration.
Based on SOC occupation classification
Showing SKILL.md
| name | hono-jsx |
| description | Hono JSX - server-side rendering, streaming, async components, and HTML generation patterns |
| user-invocable | false |
| disable-model-invocation | true |
| skill_version | 1.0.0 |
| updated_at | "2025-01-03T00:00:00.000Z" |
| tags | ["hono","jsx","ssr","streaming","html","components","suspense"] |
| progressive_disclosure | {"entry_point":{"summary":"Server-side JSX rendering with streaming, Suspense, and async components","when_to_use":"Rendering HTML on server, building SSR apps, streaming responses, or creating HTML templates","quick_start":"1. Configure tsconfig jsxImportSource 2. Create .tsx components 3. Render with c.html()"},"references":[]} |
| context_limit | 800 |
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:
Use Hono JSX when:
Not for: Interactive SPAs (use React/Vue/Svelte instead)
// tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
}
}
/** @jsx jsx */
/** @jsxImportSource hono/jsx */
// deno.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "npm:hono/jsx"
}
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => {
return c.html(
<html>
<head>
<title>Hello Hono</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
)
})
import { Hono } from 'hono'
import type { FC } from 'hono/jsx'
// Define props type
type GreetingProps = {
name: string
age?: number
}
// Functional component
const Greeting: FC<GreetingProps> = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
{age && <p>You are {age} years old.</p>}
</div>
)
}
const app = new Hono()
app.get('/hello/:name', (c) => {
const name = c.req.param('name')
return c.html(<Greeting name={name} />)
})
import type { FC, PropsWithChildren } from 'hono/jsx'
const Layout: FC<PropsWithChildren<{ title: string }>> = ({ title, children }) => {
return (
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>{children}</main>
<footer>
<p>© 2025 My App</p>
</footer>
</body>
</html>
)
}
app.get('/', (c) => {
return c.html(
<Layout title="Home">
<h1>Welcome!</h1>
<p>This is my home page.</p>
</Layout>
)
})
const AsyncUserList: FC = async () => {
const users = await fetchUsers()
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}
app.get('/users', async (c) => {
return c.html(<AsyncUserList />)
})
const UserProfile: FC<{ id: string }> = async ({ id }) => {
const user = await fetchUser(id)
return (
<div class="profile">
<h2>{user.name}</h2>
<p>{user.email}</p>
<UserPosts userId={id} />
</div>
)
}
const UserPosts: FC<{ userId: string }> = async ({ userId }) => {
const posts = await fetchUserPosts(userId)
return (
<div class="posts">
<h3>Posts</h3>
{posts.map(post => (
<article key={post.id}>
<h4>{post.title}</h4>
<p>{post.excerpt}</p>
</article>
))}
</div>
)
}
import { Suspense, renderToReadableStream } from 'hono/jsx/streaming'
const SlowComponent: FC = async () => {
await new Promise(resolve => setTimeout(resolve, 2000))
return <div>Loaded after 2 seconds!</div>
}
app.get('/stream', (c) => {
const stream = renderToReadableStream(
<html>
<body>
<h1>Streaming Demo</h1>
<Suspense fallback={<div>Loading...</div>}>
<SlowComponent />
</Suspense>
</body>
</html>
)
return c.body(stream, {
headers: {
'Content-Type': 'text/html; charset=UTF-8',
'Transfer-Encoding': 'chunked'
}
})
})
const Page: FC = () => {
return (
<Layout title="Dashboard">
<h1>Dashboard</h1>
<Suspense fallback={<div>Loading user...</div>}>
<UserProfile />
</Suspense>
<Suspense fallback={<div>Loading stats...</div>}>
<Statistics />
</Suspense>
<Suspense fallback={<div>Loading feed...</div>}>
<ActivityFeed />
</Suspense>
</Layout>
)
}
import { ErrorBoundary } from 'hono/jsx'
const RiskyComponent: FC = () => {
if (Math.random() > 0.5) {
throw new Error('Random error!')
}
return <div>Success!</div>
}
const ErrorFallback: FC<{ error: Error }> = ({ error }) => {
return (
<div class="error">
<h3>Something went wrong</h3>
<p>{error.message}</p>
</div>
)
}
app.get('/risky', (c) => {
return c.html(
<Layout title="Risky Page">
<ErrorBoundary fallback={ErrorFallback}>
<RiskyComponent />
</ErrorBoundary>
</Layout>
)
})
const AsyncRiskyComponent: FC = async () => {
const data = await fetchData()
if (!data) {
throw new Error('Data not found')
}
return <div>{data}</div>
}
// Error boundary catches async errors too
<ErrorBoundary fallback={({ error }) => <p>Error: {error.message}</p>}>
<AsyncRiskyComponent />
</ErrorBoundary>
import { createContext, useContext } from 'hono/jsx'
type Theme = 'light' | 'dark'
const ThemeContext = createContext<Theme>('light')
const ThemedButton: FC<{ label: string }> = ({ label }) => {
const theme = useContext(ThemeContext)
const className = theme === 'dark' ? 'btn-dark' : 'btn-light'
return <button class={className}>{label}</button>
}
const App: FC<{ theme: Theme }> = ({ theme, children }) => {
return (
<ThemeContext.Provider value={theme}>
<div class={`app theme-${theme}`}>
{children}
</div>
</ThemeContext.Provider>
)
}
app.get('/', (c) => {
const theme = c.req.query('theme') as Theme || 'light'
return c.html(
<App theme={theme}>
<ThemedButton label="Click me" />
</App>
)
})
Tags like <title>, <meta>, <link>, and <script> are automatically hoisted to <head>:
const Page: FC<{ title: string }> = ({ title, children }) => {
return (
<html>
<head>
{/* Base head content */}
</head>
<body>
{/* These will be hoisted to head! */}
<title>{title}</title>
<meta name="description" content="Page description" />
<link rel="stylesheet" href="/page.css" />
<div>{children}</div>
</body>
</html>
)
}
// Even from nested components
const SEO: FC<{ title: string; description: string }> = ({ title, description }) => {
return (
<>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
</>
)
}
const Article: FC<{ article: Article }> = ({ article }) => {
return (
<div>
<SEO title={article.title} description={article.excerpt} />
<h1>{article.title}</h1>
<div>{article.content}</div>
</div>
)
}
const RawHtml: FC<{ html: string }> = ({ html }) => {
return <div dangerouslySetInnerHTML={{ __html: html }} />
}
// Usage
const markdown = await renderMarkdown(content)
<RawHtml html={markdown} />
import { raw } from 'hono/html'
const Page: FC = () => {
return (
<html>
<body>
{raw('<script>console.log("Hello")</script>')}
</body>
</html>
)
}
import { Fragment } from 'hono/jsx'
// Using Fragment
const List: FC = () => {
return (
<Fragment>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</Fragment>
)
}
// Using short syntax
const List2: FC = () => {
return (
<>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</>
)
}
import { memo } from 'hono/jsx'
// Expensive to compute
const ExpensiveComponent: FC<{ data: string[] }> = ({ data }) => {
const processed = data.map(item => item.toUpperCase()).join(', ')
return <div>{processed}</div>
}
// Memoize the result
const MemoizedExpensive = memo(ExpensiveComponent)
// Won't recompute if data is the same
<MemoizedExpensive data={['a', 'b', 'c']} />
const TodoList: FC<{ todos: Todo[] }> = ({ todos }) => {
return (
<ul id="todo-list">
{todos.map(todo => (
<li key={todo.id}>
<span>{todo.text}</span>
<button
hx-delete={`/todos/${todo.id}`}
hx-target="closest li"
hx-swap="outerHTML"
>
Delete
</button>
</li>
))}
</ul>
)
}
app.get('/todos', async (c) => {
const todos = await getTodos()
return c.html(
<Layout title="Todos">
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<h1>Todos</h1>
<TodoList todos={todos} />
<form hx-post="/todos" hx-target="#todo-list" hx-swap="beforeend">
<input name="text" placeholder="New todo" />
<button type="submit">Add</button>
</form>
</Layout>
)
})
app.post('/todos', async (c) => {
const { text } = await c.req.parseBody()
const todo = await createTodo(text as string)
return c.html(
<li>
<span>{todo.text}</span>
<button
hx-delete={`/todos/${todo.id}`}
hx-target="closest li"
hx-swap="outerHTML"
>
Delete
</button>
</li>
)
})
const Button: FC<{ variant: 'primary' | 'secondary' }> = ({ variant, children }) => {
const baseClasses = 'px-4 py-2 rounded font-medium transition-colors'
const variantClasses = variant === 'primary'
? 'bg-blue-600 text-white hover:bg-blue-700'
: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
return (
<button class={`${baseClasses} ${variantClasses}`}>
{children}
</button>
)
}
import type { FC, PropsWithChildren } from 'hono/jsx'
import { Fragment, createContext, useContext, memo } from 'hono/jsx'
import { Suspense, renderToReadableStream } from 'hono/jsx/streaming'
import { ErrorBoundary } from 'hono/jsx'
import { raw } from 'hono/html'
// Direct render
c.html(<Component />)
// Streaming
c.body(renderToReadableStream(<Component />), {
headers: { 'Content-Type': 'text/html; charset=UTF-8' }
})
// Basic
const Comp: FC = () => <div>Hello</div>
// With props
const Comp: FC<{ name: string }> = ({ name }) => <div>{name}</div>
// With children
const Comp: FC<PropsWithChildren> = ({ children }) => <div>{children}</div>
// Async
const Comp: FC = async () => {
const data = await fetch()
return <div>{data}</div>
}
Version: Hono 4.x Last Updated: January 2025 License: MIT