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 "";
import UnoCSS from "";

// enable UnoCSS

Deno.serve((_req) =>
    lang: "en",
    title: "Hello World!",
    meta: {
      description: "This is a description.",
    links: [
      { rel: "mask-icon", href: "/logo.svg", color: "#ffffff" },
    scripts: [
      `console.log("Hello World!")`,
    body: (
      <div class="flex items-center justify-center w-screen h-screen">
        <p class="text-5xl font-bold text-green-600">Hello World!</p>

Support JSR: JSX and TSX files are currently not supported in JSR we are planning to publish the module to JSR once it supports JSX and TSX. Follow

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 also provide Unocss and ColorScheme plugins in the repository. For example, ise 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:

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