YAML Spec Examples

Reference specs for the YAML-Driven Reactive UI Platform. Use these as concrete examples when authoring or generating new component specs for the Juris runtime.

Spec structure

Every spec has these top-level keys:

name: "ComponentName"          # PascalCase component name
description: "..."             # what the component does
tagName: "component-tag-wc"    # web component element name

vars:                          # static data — not reactive, never changes at runtime
  colorList:
    type: array
    defaultValue: [red, blue, green]
  labels:
    type: object
    defaultValue:
      title: "My Widget"

state:                         # reactive variables — changes trigger UI updates
  selectedItem:
    type: string               # string | number | boolean
    defaultValue: ""

elements:                      # UI element tree
  - type: div
    ...

actions:                       # named handlers
  doSomething:
    type: setState
    ...

Element types

Type Description
div Standard container; supports classes, children, content, attributes, actions
style Inline CSS block; content is raw CSS
script Inline JS module; content is raw JS, attributes: {type: module}
md:icon Icon from the MCP icon service; name, library, size, classes
proto-svg-icon Custom SVG icon web component; attributes: {name: "family::name:variant"}
marketing:hero Branded hero section; title, subtitle
ds:switch Design system toggle; id binds to a state key, description, size, color
forEach Iterates an array var; collection, as, template
forEachString Iterates an array of family::name:variant strings; collection, pattern, as, template — exposes item.family, item.name, item.variant

Interpolation

{{expr}} works in text, content, class names, and attribute values:

text: "Selected: {{selectedColor}}"       # reactive state
content: "{{vars.labels.title}}"           # static var
classes: ["bg-clrs-{{item}}"]              # dynamic class from loop item
attributes:
  data-is-selected: "{{selectedIcon==item}}"  # expression

Action types

Type Trigger Key fields
setState Element event (click, onChange) target (state key), value or dataAttribute
showToast State change via stateKey toastType, message, duration
emitEvent State change via stateKey eventName (fires on the mitt event bus)

stateKey actions are state-reactive — they fire automatically whenever that state variable changes, not from a user gesture.

Icon syntax

Icons use family::name:variant — e.g. tabler::arrow-down-left-circle:outline, phosphor::game-controller:bold. Supported families: tabler, phosphor, lucide, lucide-lab, mdi, material, feather, nucleo-ui.

Available specs

Items