Props & Values

Every KERN node accepts props as key=value pairs after the node type. Props configure behavior, content, and identity.

Syntax

Props follow the node type, separated by spaces. The general form is key=value:

type  key=value  key="quoted value"  key={{ expression }}

The parser reads tokens left to right: identifier, =, then value. Values can be bare identifiers, quoted strings, or expression blocks.

Bare values

Simple values without spaces or special characters need no quotes:

text value=Hello
button text=Save
state name=count initial=0
field name=id type=string
interface name=User extends=Base
route method=get path=/tracks/:id

Bare values are collected as strings from all tokens up to the next whitespace, style block, or theme reference.

Quoted values

Values containing spaces, special characters, or pipe-separated unions require double quotes:

text value="Hello World"
type name=Status values="draft|published|archived"
field name=type type="'success' | 'error' | 'info'"
error name=NotFound message="Resource not found: ${id}"
schema body="{title: string, duration: number}"

Escaped quotes are supported with backslash: value="She said \"hello\"".

Expression values

Double curly braces {{ }} embed JavaScript expressions as prop values:

state name=items initial={{ [] }}
state name=config initial={{ { theme: 'dark' } }}
text value={{ count + " items" }}
conditional if={{ !loading }}

Expression values are stored internally as { __expr: true, code: '...' } and compiled to raw JavaScript in the output.

Boolean props

Boolean-like props use bare true/false values:

field name=email type=string optional=true
fn name=compute async=true stream=true
method name=track static=true private=true
image src="/hero.png" fill=true priority=true
page name=Settings client=true

The compiler checks for the string 'true' or boolean true when deciding behavior. Both optional=true and optional="true" work the same way.

Numeric props

Pure digit sequences are tokenized as numbers:

server name=API port=8000
error 404 "Not found"
slider bind=volume min=0 max=100 step=1
grid cols=3 gap=16
respond 200

The error and respond nodes accept positional numeric arguments. Most other nodes use named key=value pairs.

Special prop patterns

Multiple props

Nodes can have any number of props:

button text="Get Started" to=signup onClick={{ handleClick }}
fn name=compute params="a:number,b:string" returns=Result async=true

Comma-separated params

The params= prop on fn, method, and params nodes uses comma-separated name:type pairs:

fn name=create params="action:PlanAction,ws:WorkspaceSnapshot"
params id:string, name:string, limit:number=10

Default values in params are supported with = after the type: limit:number=10.

Bare-word props

Some node types accept a bare identifier as their first argument without a key:

theme primary {bg:#f97316,c:#fff}     ← 'primary' becomes name=primary
import default MyComponent            ← 'default' is a flag, 'MyComponent' becomes name
route GET /api/users                  ← 'GET' becomes method, '/api/users' becomes path
derive totalPrice                     ← 'totalPrice' becomes name
guard isAdmin                         ← 'isAdmin' becomes name

These bare-word patterns are defined per node type in the parser's keyword handlers.

Prop reference

Common props used across node types: