Instructions for AI agents

This page renders Unlayer Elements code (@unlayer/react-elements) to HTML, an Unlayer design JSON, plain text, and a live preview, with nothing to install. Write plain JSX with no imports or exports, for example <Email><Row><Column><Heading>Hi</Heading></Column></Row></Email>. Structure: Email, Page, or Document > Row > Column > content (Heading, Paragraph, Button, Image, Divider, Menu, Social, Table, Video, Html, PageBreak).

1. WebMCP tools

If your browser supports WebMCP (document.modelContext), this page registers these tools:

• render_elements: { code, mode?, include? } returns the HTML (and optionally json and text) without changing the page.
• show_elements_preview: { code, mode?, device?, output? } shows the code in the editor and live preview (or, with output: 'builder', as an editable design in the Unlayer builder), and returns a share link.
• get_elements_reference: the full syntax guide (components, props, layouts, gotchas).
• get_playground_code: the code currently in the editor and its render status.

2. JavaScript

With script access, use window.elementsPlayground: await elementsPlayground.render(code, { mode }) resolves with { ok, mode, html, json, text, logs, error }; await elementsPlayground.setCode(code) also shows it in the preview; elementsPlayground.reference() returns the syntax guide and elementsPlayground.help() lists every method. The same WebMCP tools are available as elementsPlayground.tools.

3. URL only

Open this page with the code in the URL hash: #code=BASE64URL (the UTF-8 source, base64url- or base64-encoded), plus optional &mode=email|page|document, &view=preview (hide the editor), &device=mobile, and &output=builder (open the design in the Unlayer builder). The data-render-status attribute on the html element becomes ok or error when rendering finishes.