HTML-Knoten

HTML-Knoten rendern benutzerdefinierte HTML/CSS-Vorlagen als Bilder mit dynamischer Dateninjektion. Erstellen Sie Titelkarten, Social-Media-Grafiken, Datenvisualisierungen, Produktkarten oder beliebige benutzerdefinierte Grafiken — und verwenden Sie sie als Eingabe fuer die Videogenerierung oder exportieren Sie sie direkt.

Was ist ein HTML-Knoten?

Der HTML-Knoten ist ein Mini-Web-Renderer innerhalb Ihres Workflows. Schreiben Sie HTML und CSS (oder lassen Sie die KI es generieren), injizieren Sie dynamische Daten aus anderen Knoten mithilfe von Handlebar-Variablen ({{variablenName}}), und der Knoten rendert es als Bildausgabe.

Eingaenge & Ausgaenge

Port	Richtung	Typ	Beschreibung
input (zugeordnet)	Ein	Text	Dynamische Variablen ueber `{{varName}}` — von Text, JSON Parser, List Selector, Fetch, Concatenator
output	Aus	Bild	Gerendertes HTML als Bild → Szene, Upscaler, Canvas, Google Drive Export

Inspector-Steuerungen

HTML/CSS-Editor

Schreiben Sie Ihre HTML-Vorlage mit Inline-CSS. Der Editor unterstuetzt Standard-HTML5 und CSS3.

KI-Codegenerierung

Beschreiben Sie, was Sie moechten, in einfacher Sprache, und die KI generiert das HTML/CSS fuer Sie.

Beispiel-Prompt: “Erstelle eine Titelkarte mit Verlaufshintergrund, grossem weissem zentriertem Text und einem dezenten Schlagschatten”

Variablen-Zuordnung

Jede {{variablenName}} in Ihrem HTML entspricht einer Eingabeverbindung. Verbinden Sie Knoten, um dynamische Werte bereitzustellen.

Live-Vorschau

Sehen Sie ein Echtzeit-Rendering Ihrer Vorlage waehrend der Bearbeitung. Aktualisiert sich automatisch, wenn sich verbundene Daten aendern.

Tag

Weisen Sie einen Tag wie @titel-karte zu, um die Ausgabe dieses Knotens zu referenzieren.

Handlebar-Syntax

Verwenden Sie doppelte geschweifte Klammern, um dynamische Inhalte einzufuegen:

<div class="card">
  <h1>{{title}}</h1>
  <p>{{description}}</p>
  <img src="{{imageUrl}}" alt="Product" />
  <span class="price">{{price}}</span>
</div>

Jede {{variable}} wird zu einem Eingabeport. Verbinden Sie einen Textknoten, JSON Parser oder eine andere Textquelle, um den Wert zur Laufzeit bereitzustellen.

Verwendung

Fuegen Sie einen HTML-Knoten zum Canvas hinzu
Schreiben Sie HTML/CSS im Editor, ODER verwenden Sie die KI-Codegenerierung
Fuegen Sie {{variablenName}}-Platzhalter ein, wo Sie dynamische Inhalte wuenschen
Verbinden Sie Textquellen mit den Variablen-Eingabeports
Ueberpruefen Sie die Live-Vorschau, um das Rendering zu verifizieren
Verbinden Sie den Ausgang mit einem Szenenknoten (fuer Video) oder exportieren Sie

Workflow-Beispiele

Dynamische Titelkarten

Textknoten (“Episode 1: Der Anfang”) → HTML-Knoten mit Vorlage:

<div style="background: linear-gradient(135deg, #667eea, #764ba2);
            width: 1920px; height: 1080px; display: flex;
            align-items: center; justify-content: center;">
  <h1 style="color: white; font-size: 80px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
    {{title}}
  </h1>
</div>

→ Szenenknoten (animiert die Titelkarte zu einem Video-Intro)

Produktkarte von API

Fetch (Produkt-API) → JSON Parser (Name, Preis, imageUrl extrahieren) → HTML-Knoten (Produktkarten-Vorlage mit {{name}}, {{price}}, {{imageUrl}}) → Szene (Produkt-Showcase-Video)

Tipps & Best Practices

Setzen Sie explizite Abmessungen in Ihrem CSS (z. B. width: 1920px; height: 1080px) fuer eine konsistente Ausgabeaufloesung
Verwenden Sie die KI-Codegenerierung fuer komplexe Layouts — beschreiben Sie, was Sie moechten, in einfacher Sprache
Testen Sie zuerst mit statischen Daten: Hardcodieren Sie Werte, um die Vorlage zu ueberpruefen, und ersetzen Sie sie dann durch {{variablen}}
CSS-Animationen werden NICHT gerendert — nur das statische Bild wird als Bild erfasst
Webfonts: Standard-Systemschriften sind verfuegbar. Fuer benutzerdefinierte Schriften verwenden Sie Inline-Base64 @font-face
Halten Sie Vorlagen einfach und fokussiert — komplexes JavaScript wird im Renderer nicht ausgefuehrt

Fehlerbehebung

Variablen werden nicht gerendert

Ueberpruefen Sie, ob der Variablenname in {{varName}} exakt mit dem Label der Eingabeverbindung uebereinstimmt (Gross-/Kleinschreibung beachten).

CSS wird nicht angewendet

Stellen Sie sicher, dass CSS entweder inline (style="") oder in einem <style>-Tag innerhalb der Vorlage ist. Externe Stylesheets werden nicht geladen.

Probleme mit der Bildqualitaet

Setzen Sie explizite Pixelabmessungen passend zu Ihrem Ziel (1920×1080 fuer HD, 3840×2160 fuer 4K). Verwenden Sie keine prozentualen Groessenangaben.

Vorlage erscheint leer

Ueberpruefen Sie auf HTML-Syntaxfehler. Versuchen Sie zuerst eine minimale Vorlage (<h1>Hallo</h1>) und bauen Sie von dort aus auf.

Siehe Auch

Textknoten — Stellen Sie dynamischen Text fuer Vorlagen bereit
Fetch-Knoten — Holen Sie API-Daten in Vorlagen
JSON-Parser-Knoten — Extrahieren Sie bestimmte Felder fuer Vorlagenvariablen
Szenen — Animieren Sie gerenderte Vorlagen zu Video