This page renders Hyper Elements templates (@hyper-elements/react 0.4.0) in the browser, with nothing to install: email HTML and plain text, a web page, print HTML and a PDF, a PNG or SVG image, the template's outline and its diagnostics. Write a module that exports the template (export default function Welcome() { return <Email>…</Email>; }), or JSX alone (<Email><Text>Hi</Text></Email>). The root decides the output: Email, Page, Document or Canvas.
1. WebMCP tools, where the browser has document.modelContext: render_hyper_elements (code, root, include: returns the outputs and diagnostics without changing the page),show_hyper_elements_preview (code, root, view, device: shows it and returns a share link), get_hyper_elements_reference (the guide to read before writing) and get_playground_code.
2. JavaScript: await hyperElementsPlayground.render(code, { root, include }) resolves with { ok, root, html, text, outline, diagnostics, error };await hyperElementsPlayground.setCode(code) also shows it; hyperElementsPlayground.reference() is the guide and hyperElementsPlayground.help() lists every method.
3. A link: open this page with #code=BASE64URL (the UTF-8 code, base64url-encoded), and optionally &view=preview|html|text|pdf|png|svg|clients,&device=phone and &layout=preview (the output alone). The data-render-status attribute of the html element becomes ok or error when it has rendered. Each diagnostic says what's wrong and what to write instead: fix what they say and render again.
Loading the engine
Hyper Elements 0.4.0, into a sandbox in this tab.
For agents
Render a template without installing anything, read what's wrong with it and how to fix it, then hand a person a link to the result. Three ways in, all of them the same sandbox.
Put the template in the hash and the page opens with it rendered. #code= is the UTF-8 code in base64url; Share writes #z=, the same deflated. Add view (preview, html, text, pdf, png, svg, clients), device=phone or layout=preview for the output alone.
https://www.hyperelements.dev/playground
#code=<base64url of the code>
&view=pdf<html data-render-status> becomes ok or error when it has rendered.
For an agent that can run script in the page. Every call answers with data: the outputs, and each diagnostic with its code, its path, the line it's on and what to write instead.
const playground = window.hyperElementsPlayground;
await playground.ready();
// Render without touching the editor.
const result = await playground.render(code, {
root: "Page",
include: ["html", "text", "outline"],
});
// {
// ok, root, html, text, outline,
// diagnostics: [{ severity, code, message, path, fix, clients, line }],
// error: { kind, message, line },
// }
// Put code in the editor, and show it.
await playground.setCode(code);
await playground.setRoot("Document");
playground.setView("pdf");
await playground.getShareUrl();
await playground.reference(); // the guide: every component and prop
playground.help(); // every methodWhere the browser has WebMCP, the page registers four tools. The same four are hyperElementsPlayground.tools, to call directly.
// document.modelContext (WebMCP), where the browser has it
render_hyper_elements({ code, root?, include? })
show_hyper_elements_preview({ code, root?, view?, device? })
get_hyper_elements_reference()
get_playground_code()Read the reference first, render, fix what the diagnostics say, render again.
The code runs in a sandboxed frame with an origin of its own and no network, in a worker that's thrown away after each render and stopped if it runs longer than a few seconds. It can't read this page, its storage or the site. What it returns is shown as text, or as HTML inside another sandboxed frame. A link runs the code it carries, so read code from a link before you export what it makes.