Knoten·Knotenarten

el

Ein Element. Attribute stehen in Deklarations-Reihenfolge, style immer zuletzt — damit die Ausgabe zeichengleich zu handgeschriebenem Markup ist.

Syntax

json

{
  "$": "el",
  "tag": `a` … (40 Werte),
  "attrs"?: Attribut[],
  "style"?: Style-Eintrag[],
  "children"?: Knoten[],
  "selfClose"?: Ja/Nein,
  "role"?: `headline` … (6 Werte),
  "motion"?: Bewegung,
  "when"?: Bedingung
}

Felder 8

Felder	Pflicht	Form
tag	Pflicht	`a` · `b` · `br` · `circle` · `div` · `ellipse` · `em` · `g` · `h1` · `h2` · `h3` · `h4` · `h5` · `h6` · `hr` · `i` · `img` · `li` · `line` · `ol` · `p` · `path` · `polygon` · `polyline` · `rect` · `s` · `section` · `small` · `span` · `strong` · `svg` · `table` · `tbody` · `td` · `tfoot` · `th` · `thead` · `tr` · `u` · `ul`
attrs	optional	Attribut[]
style	optional	Style-Eintrag[]
children	optional	Knoten[]
selfClose	optional	Ja/Nein
role	optional	`headline` · `body` · `cta` · `legal` · `source` · `caption`
motion	optional	Bewegung
when	optional	Bedingung

Beispiel

Eingabe

{
  "$": "el",
  "tag": "div",
  "style": [
    {
      "prop": "font-size",
      "value": {
        "$": "state",
        "path": "kopfGroesse"
      },
      "unit": "px"
    },
    {
      "prop": "color",
      "value": "#242424"
    }
  ],
  "children": [
    {
      "$": "text",
      "value": {
        "$": "state",
        "path": "slots.head"
      }
    }
  ]
}

Ausgabe

<div style="font-size:104px;color:#242424;">Sommer-Sale</div>

Im Spielplatz öffnen — mit genau diesem BeispielBeispiel getippt

Attribute stehen in Deklarations-Reihenfolge, `style` immer zuletzt. Gerechnet hat es renderDefinition() aus @trybe/static-post-templates — dieselbe Funktion wie im Studio-Canvas und im PNG-Export.

Der Zustand, gegen den gerendert wurde

{
  "slots": {
    "topline": "Sommer 2026",
    "head": "Sommer-Sale",
    "sub": "Drei Wochen, alles reduziert. Nur online.",
    "sig": "@trybe",
    "fmt": "1:1",
    "btn": "Jetzt sichern"
  },
  "mark": {
    "word": "Sale",
    "color": "#8a2f24"
  },
  "liste": [
    "Espresso",
    "Cortado",
    "Filter"
  ],
  "stufe": "zwei",
  "sale": true,
  "zeigeBadge": true,
  "kopfGroesse": 104
}

Verwandt

Quelle: buildStencilJsonSchema(registry).definitions.node — der Satz oben ist geschrieben, alles andere erzeugt