Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/elysiajs/documentation/llms.txt

Use this file to discover all available pages before exploring further.

The @elysia/html plugin lets you return JSX components and HTML strings from Elysia handlers. It automatically sets Content-Type: text/html; charset=utf8, prepends <!doctype html> where needed, and converts the result to a proper Response.

​
Installation

bun add @elysia/html

​
Basic usage

import { Elysia } from 'elysia'
import { html, Html } from '@elysia/html'

new Elysia()
    .use(html())
    .get(
        '/html',
        () => `
            <html lang='en'>
                <head>
                    <title>Hello World</title>
                </head>
                <body>
                    <h1>Hello World</h1>
                </body>
            </html>`
    )
    .get('/jsx', () => (
        <html lang="en">
            <head>
                <title>Hello World</title>
            </head>
            <body>
                <h1>Hello World</h1>
            </body>
        </html>
    ))
    .listen(3000)

​
JSX setup

The HTML plugin is based on @kitajs/html, which compiles JSX to strings at build time for high performance.
1

Rename files to .tsx

Any file that uses JSX syntax must use the .tsx (or .jsx) extension.
2

Update tsconfig.json

Add the JSX compiler options to your tsconfig.json:
{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "Html.createElement",
        "jsxFragmentFactory": "Html.Fragment"
    }
}
3

Import Html in JSX files

Import the Html namespace in every file that uses JSX:
import { Html } from '@elysia/html'
Note the uppercase Html — using html (lowercase) will cause a TypeScript error.

​
XSS protection

The plugin uses @kitajs/html which detects possible XSS vulnerabilities at compile time. Use the safe attribute to sanitize user-supplied values: 
import { Elysia, t } from 'elysia'
import { html, Html } from '@elysia/html'

new Elysia()
    .use(html())
    .post(
        '/',
        ({ body }) => (
            <html lang="en">
                <head>
                    <title>Hello World</title>
                </head>
                <body>
                    <h1 safe>{body}</h1>
                </body>
            </html>
        ),
        {
            body: t.String()
        }
    )
    .listen(3000)
For type-level XSS reminders across a large codebase, install the TypeScript plugin: 
bun add @kitajs/ts-html-plugin
Then add it to tsconfig.json: 
{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "Html.createElement",
        "jsxFragmentFactory": "Html.Fragment",
        "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
    }
}

​
Options

​
contentType

Default: 'text/html; charset=utf8' The Content-Type header value set on HTML responses.

​
autoDetect

Default: true When true, the plugin inspects returned strings and sets the Content-Type header automatically when HTML is detected.

​
autoDoctype

Default: true When true, prepends <!doctype html> to responses that start with <html> but don’t already include a doctype. Set to 'full' to also add doctypes to HTML responses returned without the plugin.

​
isHtml

Type: (value: string) => boolean Custom function to determine whether a string value is HTML. The default implementation returns true when the string is longer than 7 characters, starts with <, and ends with >.

Build docs developers (and LLMs) love

Get started for freeTalk to us