Install

The compiler

Install straight from the repository with cargo. The second command adds the html2fhtml converter behind its feature flag.

Verify it: echo 'p "hi"' | fhtml should print <p>hi</p>.

Your first build

Write a .fhtml file and compile it. See the docs for the whole language.

echo 'section p-8 > h1 text-2xl font-bold "Hello"' > hello.fhtml
fhtml hello.fhtml
# → <section class="p-8"><h1 class="text-2xl font-bold">Hello</h1></section>

JavaScript & WASM

@fhtml/core is the compiler as WebAssembly plus dependency-free ESM glue, for Node, browsers, and edge runtimes where a native binary can't go. Subpaths cover the frameworks: /node reads includes from disk, /express is a view engine, /hono a renderer middleware.

import { init, render } from "@fhtml/core";

await init();
const { html } = render('div grid\n  span rounded "hi"\n');

import { engine } from "@fhtml/core/express";

app.engine("fhtml", engine());
app.set("view engine", "fhtml");
app.get("/", (req, res) => res.render("page", { name: "hi" }));

Vite

vite-plugin-fhtml lets you import .fhtml files directly. It's dependency-free and shells out to the installed fhtml binary.

import fhtml from "vite-plugin-fhtml";
export default { plugins: [fhtml()] };

Tailwind

Tailwind v4 scans .fhtml sources directly — the classes are plain space-separated tokens. Add one @source line to your CSS entry.

@import "tailwindcss";
@source "./src/**/*.fhtml";

Editor support

Install the extension from the VS Code Marketplace or Open VSX (VSCodium, Cursor). Syntax highlighting works with zero setup; once the compiler above is installed, a language server backs diagnostics, formatting, symbols, definitions, and completion. The grammar covers the full language including the template layer.