htmlang

A minimalist layout language inspired by elm-ui that compiles to static HTML.

@ means structure. Bare lines mean content. No CSS required.

Example

@page My Site
@let primary #3b82f6

@let card $title
  @el [padding 20, background white, rounded 8, border 1 #e5e7eb, hover:border 1 $primary, transition all 0.15s ease]
    @text [bold] $title
    @children

@column [max-width 800, center-x, padding 40, spacing 20]
  @text [bold, size 32] Hello

  @paragraph
    Built with {@text [bold, color $primary] htmlang}.

  @row [wrap, spacing 10]
    @card [title Simple]
      Write layouts without CSS
    @card [title Fast]
      Compiles to a single HTML file

Compiles to a self-contained .html file with flexbox layout and generated CSS classes. No JavaScript, no external dependencies.

Install

cargo install --path .

Usage

Everyday workflow:

htmlang init                 # scaffold a new project
htmlang page.hl              # compile page.hl -> page.html
htmlang --watch page.hl      # recompile on change
htmlang serve .              # dev server with live reload
htmlang serve --https --cert cert.pem --key key.pem .
htmlang fmt page.hl          # format a file in place
htmlang check page.hl        # parse only, report diagnostics

More commands (run with --help for flags):

Editor support

A VS Code extension with syntax highlighting and LSP integration is available in editors/vscode. The language server (htmlang-lsp) provides diagnostics, completions, and hover documentation.

Language overview

Elements

Layout attributes

-- gap between children
@row [spacing 20]
-- separate horizontal/vertical gaps
@row [gap-x 10, gap-y 20]
-- uniform padding (also padding-x, padding-y)
@el [padding 20]
-- take remaining space (also width 200, width shrink)
@el [width fill]
-- center horizontally (also align-left, align-right)
@el [center-x]
-- overflow behavior (hidden, scroll, auto)
@el [overflow hidden]

Comments start with -- and run to the end of the line; they must be on a line of their own.

Style attributes

@el [background #3b82f6, color white, rounded 8, border 1 #e5e7eb]
@text [bold, italic, underline, size 18, font Inter]
@el [opacity 0.5, cursor pointer, transition all 0.15s ease]
@el [shadow 0 2px 4px rgba(0,0,0,0.1)]
@paragraph [text-align center, line-height 1.5]

Positioning

@el [position relative]
  @el [position absolute, z-index 10]
    Overlay content

For overlays, prefer @in-front and @behind — they make the parent a positioning context and stretch to its bounds automatically:

@el [width 200, height 200, background blue]
  @text [color white] Main content
  @in-front
    @text [color yellow] Top layer
  @behind
    @el [background red, width fill, height fill]

Pseudo-states and media prefixes

Prefix any style attribute with hover:, active:, or focus::

@el [background #3b82f6, hover:background #2563eb, active:background #1d4ed8]

Use dark: for dark mode and print: for print styles:

@el [background white, dark:background #1a1a2e, print:display none]

Variables and attribute bundles

-- simple variable, used as $primary
@let primary #3b82f6
-- quoted string interpolation
@let greeting "Hello $name"
-- attribute bundle, used as [$card]
@let card [padding 20, rounded 8]

Functions

A @let with an indented body defines a function. @children is where the caller's children go:

@let primary #3b82f6
@let button $label
  @el [padding 12, background $primary, rounded 8]
    @text [color white, bold] $label
    @children

@button [label Click me]

File includes

-- header.hl
@nav [spacing 10]
  @link / Home

-- page.hl: insert header.hl here
@include header.hl

Multi-line attributes

Attribute lists can span multiple lines:

@el [
  padding 20,
  background white,
  rounded 8,
  shadow 0 2px 4px rgba(0,0,0,0.1)
]
  Content here

Other features

• -- comments
• {@text [bold] inline} elements in text
• @el [attrs] > @link url single-child chaining
• [padding 20] bare attributes as implicit @el
• @raw """...""" for embedding arbitrary HTML/CSS/JS
• @image [inline] logo.svg inlines SVG content
• @each $name, $url in Home /, About /about destructuring
• @let large = $base * 2 computed variables
• [grid-template-areas "header main", grid-area header] named grid areas
• [animate fade-in 0.3s ease] animation shorthand
• [view-transition-name hero] View Transitions API
• [has(.active):background blue] :has() pseudo-selector
• @slot header / @slot content named slots in functions
• @theme design tokens as runtime CSS custom properties
• VS Code snippets for common patterns

Documentation

See DESIGN.md for the full language specification.