Node Types

KERN has 102 node types organized into 11 categories. Each node compiles to idiomatic code for the active target.

Layout Nodes

Structural containers that define page hierarchy, scrolling regions, and grid systems.

• page — Root page node with route and metadata
• layout — Shared wrapper across pages
• loading — Loading state placeholder
• error — Error boundary component
• screen — Root node for React Native targets
• row — Horizontal flex container
• col — Vertical flex container
• card — Styled container with surface background
• section — Semantic section with optional title and id
• grid — CSS grid container
• scroll — Scrollable region

page name=Dashboard route=/dashboard
  col {gap:24,p:40}
    row {jc:sb,ai:center}
      text value="Dashboard" tag=h1 {fs:32,fw:800}
      button text="New Project" {bg:#f97316,c:#fff,br:8}
    grid cols=3 {gap:16}
      card {p:24,br:12}
        text value="Revenue" tag=h3
        text value="$42,100" {fs:28,fw:700}
      card {p:24,br:12}
        text value="Users" tag=h3
        text value="1,204" {fs:28,fw:700}
      card {p:24,br:12}
        text value="Uptime" tag=h3
        text value="99.9%" {fs:28,fw:700}

Content Nodes

Text, media, and display elements for rendering content.

• text — Text element with tag, value, and typography styles
• image — Image with src, alt, width, height
• codeblock — Syntax-highlighted code display
• progress — Progress bar with value and max
• divider — Horizontal rule separator

col {gap:12}
  text value="Welcome Back" tag=h1 {fs:36,fw:800,c:#fff}
  text value="Your project summary for this week." tag=p {fs:16,c:#a1a1aa}
  row {gap:8,ai:center}
    text value="Status:" tag=span {fw:600}
    text value="Active" tag=label {c:#22c55e,fw:600}
  divider
  image src="/hero.png" alt="Hero" width=600 height=400
  progress value=72 max=100

Interactive Nodes

User input controls, navigation, and overlay components.

• button — Clickable button with text, onClick, or to (link)
• input — Text input with type, placeholder, bind
• textarea — Multi-line text input
• toggle — Boolean switch control
• slider — Range input with min, max, step
• select — Dropdown select with option children
• option — Option inside a select
• modal — Overlay dialog
• tabs — Tab group container
• tab — Individual tab inside tabs
• link — Navigation link

col {gap:16,p:32,maxW:480}
  input placeholder="Email" type=email bind=email
  input placeholder="Password" type=password bind=password
  select bind=role
    option value=admin label="Admin"
    option value=editor label="Editor"
    option value=viewer label="Viewer"
  toggle bind=rememberMe label="Remember me"
  slider min=1 max=100 step=1 bind=volume
  textarea placeholder="Notes..." bind=notes rows=4
  button text="Sign In" onClick=handleSubmit {bg:#f97316,c:#fff,br:8,p:12}

Backend Nodes

Server-side nodes for APIs, middleware, real-time streams, and scheduled tasks.

• server — Express or FastAPI server root
• route — HTTP route with method and path
• middleware — Request middleware function
• handler — Route handler logic
• schema — Request/response schema validation
• stream — Server-Sent Events endpoint
• spawn — Child process or worker
• timer — Interval or timeout
• on — Event listener binding
• env — Environment variable declaration
• websocket — WebSocket endpoint

server name=API port=3000
  env name=DATABASE_URL required=true
  middleware name=auth
  middleware name=cors

  route method=get path=/api/users
    schema response=User[]
    handler name=listUsers

  route method=post path=/api/users
    schema body=CreateUserInput response=User
    middleware name=requireAdmin
    handler name=createUser

  stream path=/api/events
    handler name=sseHandler

CLI Nodes

Command-line application structure with commands, arguments, and flags.

• cli — CLI application root
• command — Named command with description
• arg — Positional argument
• flag — Named flag with type and default

cli name=deploy version=1.0.0 description="Deploy CLI tool"
  command name=push description="Push to production"
    arg name=service description="Service name" required=true
    flag name=force short=f type=boolean description="Skip confirmation"
    flag name=region short=r type=string default=us-east-1
  command name=rollback description="Rollback last deploy"
    arg name=service description="Service name" required=true
    flag name=steps type=number default=1 description="Steps to rollback"

Terminal Nodes

Rich terminal UI components with ANSI colors, tables, gradients, and live displays.

• separator — Horizontal separator line
• table — Formatted table with columns and rows
• scoreboard — Key-value metrics display
• metric — Single metric inside a scoreboard
• spinner — Animated loading indicator
• box — Bordered box container
• gradient — Gradient-colored text
• state — Reactive terminal state
• repl — Interactive read-eval-print loop

col
  gradient value="Build Monitor" from=#f97316 to=#eab308
  separator char=─
  scoreboard
    metric label="Build" value="passing" color=green
    metric label="Tests" value="148/148" color=green
    metric label="Coverage" value="94.2%" color=yellow
    metric label="Deploy" value="pending" color=cyan
  separator char=─
  table cols=Name,Status,Duration
  spinner text="Deploying to production..."
  box title="Logs" border=round
    text value="[12:01] Starting deploy..."
    text value="[12:02] Build complete."
    text value="[12:03] Health check passed."

Next.js Nodes

App Router conventions for metadata, data fetching, navigation guards, and imports.

• metadata — Static page metadata (title, description, og)
• generateMetadata — Dynamic metadata from params
• fetch — Server-side data fetching
• notFound — Trigger Next.js 404
• redirect — Server-side redirect
• import — Explicit import declaration

page name=BlogPost route=/blog/[slug]
  generateMetadata params=slug
    fetch url=/api/posts/${slug} as=post
    return title=post.title description=post.excerpt

  fetch url=/api/posts/${slug} as=post
  notFound when=!post

  col {gap:24,p:40,maxW:720}
    text value=post.title tag=h1 {fs:36,fw:800}
    text value=post.date tag=p {fs:14,c:#71717a}
    text value=post.content tag=p {fs:16,lh:1.8}

Core Language Nodes

Type system, state machines, modules, and domain modeling primitives that compile to pure TypeScript.

• type — TypeScript type alias with fields
• interface — Interface with method signatures
• field — Typed field inside type, interface, or config
• fn — Function declaration
• machine — State machine with typed transitions
• transition — State transition inside a machine
• event — Event type declaration
• error — Custom error type
• module — Module grouping with exports
• export — Named export from a module
• config — Typed configuration object
• store — State store declaration
• union — Discriminated union type
• variant — Variant inside a union
• service — Service class declaration
• method — Method inside a service

type name=User
  field name=id type=string
  field name=email type=string
  field name=role type=admin|editor|viewer

union name=ApiResult
  variant name=Success fields=data:T
  variant name=Error fields=message:string,code:number

machine name=OrderStatus initial=pending
  transition from=pending to=confirmed event=confirm
  transition from=confirmed to=processing event=process
  transition from=processing to=shipped event=ship
  transition from=shipped to=delivered event=deliver
  transition from=pending to=cancelled event=cancel
  transition from=confirmed to=cancelled event=cancel

React Nodes

React-specific primitives for hooks, context, memoization, and component lifecycle.

• hook — Custom hook definition
• provider — Context provider component
• effect — useEffect declaration
• memo — useMemo declaration
• callback — useCallback declaration
• ref — useRef declaration
• context — React context declaration
• state — useState declaration

hook name=useDebounce params=value:T,delay:number returns=T
  state name=debounced initial=value
  ref name=timer type=NodeJS.Timeout
  effect deps=value,delay
    callback name=update
      set debounced=value
    timer name=timer fn=update delay=delay
  return debounced

Vue Nodes

Vue targets share the same KERN node types as React. The transpileVue and transpileNuxt compilers handle the translation to Vue 3 Single File Components and Nuxt 3 conventions respectively. Layout, content, and interactive nodes compile to their Vue equivalents automatically — no Vue-specific nodes required.

Template Nodes

Reusable template definitions with named slots for code generation patterns.

• template — Named template definition
• slot — Named insertion point inside a template
• body — Default content body of a template

template name=PageLayout
  slot name=header
  col {p:40,gap:24,maxW:960,m:0_auto}
    slot name=title
    body
    slot name=footer

page name=About route=/about
  use template=PageLayout
    fill slot=header
      row {jc:sb,ai:center}
        text value="About" tag=h1
        button text="Contact" to=/contact
    fill slot=title
      text value="Our Story" tag=h2 {fs:28,fw:700}
    text value="We build tools for developers." tag=p