4less

A minimal DSL that compiles to HTML, React, Vue and Astro. Zero dependencies.

$npm install @dzhonragon/4less
live preview

Zero deps

No runtime dependencies. Lexer and parser are handwritten TypeScript.

Multi-framework

One source, five targets: HTML, React, Vue, Astro, JSON.

Minimal syntax

No closing tags. Dots for classes, hashes for IDs.

Syntax

Elements
div.card {
  h2 "Components"
  p "Build UIs declaratively."
  a "Read docs" href:"/docs"
}
Variables
div {
  h1 $name
  p $role
}
Loops
ul {
  for item in stack: li $item
}
Conditionals
if admin: p "Admin panel"
else: p "Public only"
Attr interpolation
p { a $title href:"/posts/$slug" }
p { a "Edit post" href:"/posts/$slug/edit" }
Components
component Badge { span.badge $label }

Badge label:"stable"
Badge label:"v2.0"

Playground

4less input
Examples: