> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/honojs/hono/llms.txt
> Use this file to discover all available pages before exploring further.
# JSX Overview
> Introduction to JSX in Hono - a powerful templating solution for server-side and client-side rendering
Hono provides a comprehensive JSX implementation that works seamlessly for both server-side and client-side rendering. Unlike traditional JSX libraries, Hono's JSX is designed to be lightweight, fast, and works directly with Hono's request/response model.
## What is Hono JSX?
Hono JSX is a React-like JSX implementation that:
* **Works on the server** - Renders directly to HTML strings
* **Works on the client** - Provides DOM rendering capabilities
* **React-compatible** - Uses familiar React APIs and hooks
* **Type-safe** - Full TypeScript support with proper type inference
* **No build required** - Works with standard JSX transpilation
Hono JSX is compatible with React 19 APIs and provides hooks like `useState`, `useEffect`, `useContext`, and more.
## TypeScript Configuration
To use JSX in your Hono project, configure your `tsconfig.json`:
### For Server-Side Rendering
```json tsconfig.json theme={null}
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
}
}
```
### For Client-Side Rendering
```json tsconfig.json theme={null}
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx/dom"
}
}
```
## Basic Usage
Here's a simple example using JSX in a Hono application:
```tsx theme={null}
import { Hono } from 'hono'
const app = new Hono()
const Layout = ({ children }: { children: any }) => {
return (
)
}
app.get('/greet/:name', (c) => {
const name = c.req.param('name')
return c.html()
})
```
## Props and Children
Components receive props and children just like React:
```tsx theme={null}
import type { FC, PropsWithChildren } from 'hono/jsx'
type CardProps = PropsWithChildren<{
title: string
variant?: 'primary' | 'secondary'
}>
const Card: FC = ({ title, variant = 'primary', children }) => {
return (
{title}
{children}
)
}
// Usage
Card content goes here
```
## hono/jsx vs hono/jsx/dom
Hono provides two JSX implementations:
**Server-side rendering**
* Renders to HTML strings
* Used in route handlers with `c.html()`
* Optimized for server performance
* Supports async components
**Client-side rendering**
* Renders to actual DOM
* Used for interactive UIs
* React-compatible hooks
* Supports hydration
## Attributes and HTML Properties
Hono JSX supports standard HTML attributes:
```tsx theme={null}
const Form = () => {
return (
)
}
```
### Style Objects
Styles can be passed as objects:
```tsx theme={null}
const StyledDiv = () => {
const style = {
backgroundColor: 'blue',
color: 'white',
padding: '20px',
borderRadius: '8px'
}
return
Styled content
}
```
## Fragments
Use fragments to return multiple elements:
```tsx theme={null}
import { Fragment } from 'hono/jsx'
const List = () => {
return (
<>
)
}
```
## Lists and Keys
Render lists with keys:
```tsx theme={null}
type TodoItem = {
id: number
text: string
completed: boolean
}
const TodoList = ({ items }: { items: TodoItem[] }) => {
return (
{items.map((item) => (
{item.text}
))}
)
}
```
## dangerouslySetInnerHTML
Insert raw HTML (use with caution):
```tsx theme={null}
const RawHTML = ({ html }: { html: string }) => {
return
}
```
Only use `dangerouslySetInnerHTML` with trusted content to prevent XSS attacks.
## API Compatibility
Hono JSX exports a `version` that indicates React API compatibility:
```tsx theme={null}
import { version } from 'hono/jsx'
console.log(version) // '19.0.0-hono-jsx'
```
Source: [src/jsx/base.ts:442](https://github.com/honojs/hono/blob/main/src/jsx/base.ts#L442)
## Next Steps
Learn about server-side JSX rendering with Hono
Build interactive UIs with client-side rendering
Stream HTML with Suspense-like patterns
Use the HTML helper for advanced rendering