The web, set in print

InDesign can't speak web; web tools can't speak print. paged.web lays out HTML and CSS inside frames, flows it across pages, and bakes it to native items InDesign opens.

AGPL-3.0 OR PMEL·canary — usable, moving fast·0.1.0-canary.12·github.com/paged-media/plugin-web ↗

A web frame is laid out by a browser stack

Insert a web frame, or open an .htmlfile, and the frame’s content is HTML and CSS. The Blitz engine — Stylo for styles, Taffy for boxes, Parley for text — is compiled to wasm and lays the source out at the frame’s size. The result is drawn inside the frame on the editor canvas: fills, strokes, text runs, linear, radial and sweep gradients, box shadows and images.

The source lives in the document itself: in the frame’s metadata label when it fits, otherwise in a content-addressed part of the .paged container. It is undoable and travels through IDML.

Source panel

HTML and CSS editors, a sandboxed preview at the frame's size, a linter, font diagnostics and a tag outline.

Document faces

Fonts the CSS names are registered from the document, so bold and italic shape in their own faces.

Overflow policies

Clip, shrink to fit, grow the frame, or continue into a thread.

One source, threaded through as many frames as it needs

Thread a web frame into further frames and the flow render lays the remainder out again at each frame’s width, cutting between blocks, between lines of a paragraph, between children of a container and between table rows — with a <thead> repeating in every frame.

break-before, break-after, break-inside, orphans and widows are honoured. A frame is a page box, so @page margins inset every frame. CSS flow-into names several flows, and each goes to its own frames.

/* one source, two flows */
article { flow-into: article-flow; }
aside.route-notes { flow-into: sidebar-flow; }

h2 { break-after: avoid; }
figure, table tr { break-inside: avoid; }
p { orphans: 2; widows: 2; }

@page { margin: 6mm; }   /* every frame is a page box */

When the layout is right, make it ordinary page content

“Bake web frame to document” turns a rendered frame or a whole flow into native swatches, gradient swatches, rectangles, paths, image frames and text frames, in one undoable step. Strokes, translucency and a rectangle’s drop shadow are kept.

The result exports to IDML and PDF like anything else on the page. InDesign opens it with every item, face, stroke, opacity, shadow, path and image where the bake put it — checked by the InDesign lane of the plugin’s conformance suite. What the bake cannot carry, it counts and reports.

Type into the render; bind it to the document

In-frame text editing

Double-click the frame, click rendered text, and a caret lands in the DOM text node it was painted from. Typing re-renders live; Enter writes the source back as one undo step.

Template data binding

{{doc.title}}, {{doc.pages}}, {{frame.page}} and {{data.<field>}} from a paged.data provider are substituted on every render, and the canvas re-renders when a value changes.

Outline to canvas

Click a tag in the panel's outline and its painted box is outlined on the canvas.

Import

An .html file opens as a new web frame: <style> becomes the CSS, <body> the HTML, and the sanitiser runs on it.

123 of 156 layout verdicts identical to Chrome

• The render is not stored in the document; every open renders again.
• A table row, an image or a single line taller than the frame cannot be split; it moves whole to the next frame.
• Only images the document holds load; network URLs are reported as not loaded.
• @media print does not match yet.

Set some HTML in print

Open paged.web — livethe real application, in this tab · nothing to install · nothing uploaded

paged.web features

10 features · commit-pinned snapshot · the same rows the team plans by