Syntax Reference

The complete KERN language in one page. You don't need to memorize this — the AI knows it. But understanding it helps you read and guide what the AI generates.

Grammar

KERN is indent-based. Every line is a node with optional props and styles:

indent type prop=value prop="quoted value" {style:value}

Indentation is 2 spaces per level. Children are indented under their parent:

page name=MyPage        ← root node
  col {gap:16}           ← child (2 spaces)
    text value="Hello"   ← grandchild (4 spaces)

Props

Props are key=value pairs. Use quotes for values with spaces:

text value=Hello                          ← bare value
text value="Hello World"                  ← quoted value
button text="Get Started" to=signup       ← multiple props
page name=Dashboard route="/dashboard"    ← route prop

Styles

Style blocks use curly braces with 30 frozen shorthands:

text value="Hello" {fs:24,fw:bold,c:#fff,bg:#18181b,p:16,br:8}

Common shorthands

Full list of all 30 shorthands →

CSS escape hatch

Any CSS property not in the shorthand map can be used with quoted keys:

button {"transition":"all 0.2s ease","box-shadow":"0 4px 12px rgba(0,0,0,0.3)"}

Pseudo-selectors

Use colon prefix for hover, press, and focus states:

button {bg:#f97316,:hover:bg:#ea580c,:press:bg:#c2410c}

Themes

Define reusable styles with theme and reference with $:

theme primary {bg:#f97316,c:#fff,br:8,p:12}

button text="Save" $primary
button text="Cancel" $primary

Value shorthands

Common layout values have aliases:

Node types

KERN has 102 node types organized by category: layout, content, interactive, backend, CLI, terminal, Next.js, core language, React, Vue, and templates.

Comments

// This is a comment
page name=Hello  // inline comment too