Repository
Current version released
2 years ago
Dependencies
Htm
Create a text/html
response with JSX, powered by
Preact and UnoCSS.
Usage
To use Htm, create a server.tsx
file like this:
/** @jsx h */
import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
import { h, html } from "https://deno.land/x/htm/mod.tsx";
import { UnoCSS } from "https://deno.land/x/htm/plugins.tsx";
// enable UnoCSS
html.use(UnoCSS())
serve((res) =>
html({
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>
</div>
),
})
);
Run the server:
deno run --allow-net server.tsx
Try it online:
https://dash.deno.com/playground/hello-world-jsx
Color Scheme
Htm supports prefers-color-scheme out of the box:
html({
colorScheme: "dark", // or "light" or "auto"
...
});
You call the window.setColorScheme
helper function to set the color scheme in the browser when the colorScheme
option is set to auto
:
html({
colorScheme: "auto",
body: (
<span class="dark:text-white" onclick="setColorScheme('dark')">
Dark Mode
</span>
),
});
Plugins System
Htm supports plugins system.
import { html } from "https://deno.land/x/htm/mod.tsx";
import { UnoCSS } from "https://deno.land/x/htm/plugins.tsx";
html.use(UnoCSS())
Write your own plugins:
import { html} from "https://deno.land/x/htm/mod.tsx";
html.use(async (ctx) => {
// update ctx
ctx.scripts = [`console.log("Hello plugin")`, ...(ctx.scripts ?? [])];
})