Docs / Transformers / HTML Template

HTML Template

Render {{key}} placeholders into an HTML page, held under its own html payload key.

This node is where a page's HTML lives. It interpolates {{variables}} from the incoming payload into the HTML you write, then hands the rendered page downstream under a payload key — html by default. HTML View and Artifyde: Push Page both read {{html}} by default, so wiring either one downstream of this node needs no configuration on their end at all.

Authoring is decoupled from what happens to the page next: this node only renders text. It never opens a window and never publishes anywhere — showing the result on screen or putting it on the web is a separate node's job, wired after this one.

Ports

Inlet
Input (any)
Outlet
Output (string)

Configuration

Parameter Type Default Description
html textarea The page. Use {{key}} to reference payload values — an AI node's output, an upstream page, anything on the incoming payload. Click on the field's label to author it in the Workbench's HTML Editor.
outputKey text "html" The payload key where the rendered page is stored. Leave it as html so HTML View and Artifyde: Push Page pick it up with no config of their own.

Output Payload

html The rendered page (or the key name configured via outputKey). Everything else on the incoming payload passes through underneath it.

The HTML Editor

The button on the html field opens the page in the Workbench's HTML Editor — a full-window surface built for exactly this field:

  • Syntax highlighting for tags, attributes, and comments, with every {{variable}} painted by whether it resolves — a token nothing upstream provides turns red before the page ever ships.
  • A rendered preview (Split or Preview mode) filled in from the node's test values or last run.
  • Typing a closing > after an open tag inserts its matching close tag right after the caret, and one undo takes both back. (Brackets and quotes are not auto-completed in HTML — page text is full of apostrophes, and {{ belongs to the variable picker.)
  • Auto-prettify — a page an AI emitted on one line opens indented and readable. The tidy-up only ever moves whitespace a browser ignores; your content, attributes, and {{tokens}} are untouched. A Prettify button reruns it anytime.
  • Autosave — edits reach the node on a rolling 2-second save; closing saves first.
  • ▶ renders, it doesn't publish. The editor's run button renders this template against your test values and records it in the bench's own history panel — no page opens, nothing gets pushed anywhere, and nothing downstream in your flow fires.

Example

An AI node drafts a report, this node turns it into a page under {{html}}, and Artifyde: Push Page publishes it — its Page Content field's default of {{html}} picks the page up with no config of its own: