Skip to main content Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill hono-jsxDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository 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.
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
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 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
{
"compilerOptions" : {
"jsx" : "react-jsx" ,
"jsxImportSource" : "hono/jsx"
}
}
Alternative: Pragma Comments
Deno Configuration
{
"compilerOptions" : {
"jsx" : "react-jsx" ,
"jsxImportSource" : "npm:hono/jsx"
}
}
Basic Usage
Simple Rendering 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 >
Components import { Hono } from 'hono'
import type { FC } from 'hono/jsx'
type GreetingProps = {
name : string
age ?: number
}
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} />
Layout Components 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 > get ('/' , (c ) => {
return c.html (
<Layout title ="Home" >
<h1 > Welcome!</h1 >
<p > This is my home page.</p >
</Layout >
Async Components
Basic Async const AsyncUserList : FC = async () => {
const users = await fetchUsers ()
return (
<ul >
{users.map(user => (
<li key ={user.id} > {user.name}</li >
))}
</ul > get ('/users' , async (c) => {
return c.html (<AsyncUserList />
Nested Async Components 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 >
Streaming with Suspense
Basic Streaming 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 > 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'
}
})
})
Multiple Suspense Boundaries 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 >
Error Boundaries 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 > get ('/risky' , (c ) => {
return c.html (
<Layout title ="Risky Page" >
<ErrorBoundary fallback ={ErrorFallback} >
<RiskyComponent />
</ErrorBoundary >
</Layout >
Async Error Boundaries const AsyncRiskyComponent : FC = async () => {
const data = await fetchData ()
if (!data) {
throw new Error ('Data not found' )
}
return <div > {data}</div > ErrorBoundary fallback={({ error } ) => <p > Error: {error.message}</p > <AsyncRiskyComponent /> ErrorBoundary >
Context API
Creating Context 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 > get ('/' , (c ) => {
const theme = c.req .query ('theme' ) as Theme || 'light'
return c.html (
<App theme ={theme} >
<ThemedButton label ="Click me" />
</App >
Head Hoisting 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 > 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 >
Raw HTML
dangerouslySetInnerHTML const RawHtml : FC <{ html : string }> = ({ html } ) => {
return <div dangerouslySetInnerHTML ={{ __html: html }} /> const markdown = await renderMarkdown (content)
<RawHtml html={markdown} />
Raw Helper import { raw } from 'hono/html'
const Page : FC = () => {
return (
<html >
<body >
{raw('<script > console .log ("Hello" )</script > ')}
</body >
</html >
Fragments import { Fragment } from 'hono/jsx'
const List : FC = () => {
return (
<Fragment >
<li > Item 1</li >
<li > Item 2</li >
<li > Item 3</li >
</Fragment > const List2 : FC = () => {
return (
<>
<li > Item 1</li >
<li > Item 2</li >
<li > Item 3</li >
</>
Memoization import { memo } from 'hono/jsx'
const ExpensiveComponent : FC <{ data : string [] }> = ({ data } ) => {
const processed = data.map (item =>toUpperCase ()).join (', ' )
return <div > {processed}</div > const MemoizedExpensive = memo (ExpensiveComponent )
<MemoizedExpensive data={['a' , 'b' , 'c' ]} />
Integration Patterns
With HTMX 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 > 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 > 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 >
With Tailwind CSS 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 >
Quick Reference
Key Imports 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'
Response Methods
c.html (<Component /> body (renderToReadableStream (<Component /> headers : { 'Content-Type' : 'text/html; charset=UTF-8' }
})
Component Types
const Comp : FC = () => <div > Hello</div > const Comp : FC <{ name : string }> = ({ name } ) => <div > {name}</div > const Comp : FC <PropsWithChildren > = ({ children } ) => <div > {children}</div > const Comp : FC = async () => {
const data = await fetch ()
return <div > {data}</div >
Related Skills
hono-core - Framework fundamentalshono-middleware - Middleware patternshono-cloudflare - Edge deployment
Version : Hono 4.x
Last Updated : January 2025
License : MIT
