Skip to main content


Create text/html response with JSX.


To use Html, create a server.tsx file like this:

/** @jsx h */
import html, { h } from "";

Deno.serve((_req) =>
    lang: "en",
    title: "Hello World!",
    meta: {
      description: "This is a description.",
    links: [
      { rel: "mask-icon", href: "/logo.svg", color: "#ffffff" },
    styles: [
      `div { display: flex; }`,
    scripts: [
      `console.log("Hello World!")`,
    body: (
        <h1>Hello World!</h1>

Run the server:

deno run --allow-net server.tsx

Try it online:

Using Plugin

Html implements a simple plugin system that allows you to hook into the rendering process and modify the context.

import html from "";

// add a script to the context
html.use((ctx) => {
  ctx.scripts.push(`console.log("Hello plugin!")`);

We provide Unocss and ColorScheme plugins in the repository. For example, use the Unocss plugin:

/** @jsx h */
import html from "";
import UnoCSS from "";

// with default tailwind preset

// customize Unocss
  presets: [/* put your presets here. */],
  // other unocss configurations check

  <div class="text-5xl font-bold text-green-600">Hello World!</div>,

Use the ColorScheme plugin:

/** @jsx h */
import html, { h } from "";
import ColorScheme from "";

// check the color scheme with system settings automatically

// dark scheme

You can call the window.setColorScheme helper function to set the color scheme in client when the colorScheme option is set to auto:

  <button class="dark:text-white" onclick="setColorScheme('dark')">
    Dark Mode