Summary
Please expose a way to render a node to an image from the Server API — e.g.
await framer.renderNode(nodeId, { width: 1440, theme: "dark" }) // -> PNG/JPEG bytesor an equivalent REST route. Today the Server API can write a whole page but gives no way to see the result.
Why
When you build pages programmatically (updateXmlForNode, createCodeFile, manageColorStyle, …), the only feedback channel is reading attributes back with getNodeXml. That verifies structure, not appearance — so a layout can be structurally perfect and visually broken, and automation has no way to notice.
Concrete defects from one real session building an admin console. Every one of them passed attribute inspection and was only caught when a human sent a screenshot:
- Overlapping text. A
height="1fr" child inside a parent chain ending in height="fit-content" cannot resolve, collapses, and its content overflows onto the next sibling. The XML reads perfectly; the sidebar renders with two blocks of text on top of each other.
- Opaque white frames. A
<Frame> created without an explicit backgroundColor gets rgba(255,255,255,1), not transparent. On a dark design this produced white blocks across the sidebar, header and table header — invisible in the XML unless you already know to grep for it.
- Everything centred. New stacks default to
stackDistribution/stackAlignment = center. Omitting them centres every text node. Reads as "the paddings are wrong" and is impossible to detect without pixels.
height="100vh" silently becomes 100px, turning a full-height sidebar into a stub.
Why this matters more than usual here
Several write paths return success without applying anything — setAttributes() and node.remove() both resolve normally and leave the node unchanged, and updateXmlForNode returns No changes were made! for attribute-only diffs. Because a successful return value is not evidence, independent verification is mandatory, and a rendered pixel is the only real ground truth.
Without it, any agent or CI job driving the Server API has to round-trip through a human with a screenshot for every visual check — which is exactly the loop this API exists to remove.
Shape that would be enough
renderNode(nodeId, opts) -> image bytesopts: width (or breakpoint id), theme: "light" | "dark", optional height / full-node- Works on a page's breakpoint node, a component, or a code-component instance
Even a low-resolution preview would be plenty — the goal is catching overlap, collapsed boxes and wrong fills, not pixel-perfect QA.
Happy to share the full reproduction of any of the four defects above if useful.
Summary
Please expose a way to render a node to an image from the Server API — e.g.
or an equivalent REST route. Today the Server API can write a whole page but gives no way to see the result.
Why
When you build pages programmatically (
updateXmlForNode,createCodeFile,manageColorStyle, …), the only feedback channel is reading attributes back withgetNodeXml. That verifies structure, not appearance — so a layout can be structurally perfect and visually broken, and automation has no way to notice.Concrete defects from one real session building an admin console. Every one of them passed attribute inspection and was only caught when a human sent a screenshot:
height="1fr"child inside a parent chain ending inheight="fit-content"cannot resolve, collapses, and its content overflows onto the next sibling. The XML reads perfectly; the sidebar renders with two blocks of text on top of each other.<Frame>created without an explicitbackgroundColorgetsrgba(255,255,255,1), not transparent. On a dark design this produced white blocks across the sidebar, header and table header — invisible in the XML unless you already know to grep for it.stackDistribution/stackAlignment=center. Omitting them centres every text node. Reads as "the paddings are wrong" and is impossible to detect without pixels.height="100vh"silently becomes100px, turning a full-height sidebar into a stub.Why this matters more than usual here
Several write paths return success without applying anything —
setAttributes()andnode.remove()both resolve normally and leave the node unchanged, andupdateXmlForNodereturnsNo changes were made!for attribute-only diffs. Because a successful return value is not evidence, independent verification is mandatory, and a rendered pixel is the only real ground truth.Without it, any agent or CI job driving the Server API has to round-trip through a human with a screenshot for every visual check — which is exactly the loop this API exists to remove.
Shape that would be enough
renderNode(nodeId, opts) -> image bytesopts:width(or breakpoint id),theme: "light" | "dark", optionalheight/ full-nodeEven a low-resolution preview would be plenty — the goal is catching overlap, collapsed boxes and wrong fills, not pixel-perfect QA.
Happy to share the full reproduction of any of the four defects above if useful.