outlay

/ demos

Every demo computes positions with solveLayout and renders the numbers — the CSS layout engine never runs. Where a browser reference pane exists, a badge compares the two live.

01

Layout Explorer

Build flex and grid layouts visually with an interactive tree editor. Tweak properties with sliders and see the solver's output beside the live browser reference in real time.

02

Animated Layout Transitions

Toggle a flex property and every box glides to its new position. The solver hands you both the before and after layouts as numbers, so each box is interpolated between endpoints — no CSS transitions, no FLIP.

03

Drag-and-Drop Reorder

A sortable grid of cards. Dragging re-solves the whole layout on every pointer move to preview the drop, and cards glide via transform — zero DOM reflow during the entire drag.

04

Virtual Scroll

10,000 variable-height rows, every position solved up front in one pass. Only the visible slice is in the DOM, and there are no height estimates or scroll-jump corrections. Heights come from Pretext.

05

Text-driven layout

A grid of text cards sized off-DOM. Pretext measures the text through a measureContent adapter; a width slider reflows the cards and a badge checks the solver against the real browser.

06

Nested Dashboard

A responsive dashboard — header, sidebar, and a grid of cards — solved off-DOM and rendered with absolute positioning. Toggle to the native CSS rendering to see the two lay out identically.

07

Server-Side Layout →

No browser, no DOM: a Node script reads a component tree from JSON, runs solveLayout, and writes an SVG. This card links to the SVG it generated. Source in pages/demos/server-layout/.

08

OG-Image Generator →

A 1200×630 social card whose layout is a real CSS Grid — fr columns, column and row spans, text wrapped at the fr-resolved width — solved and painted to SVG with no browser. The layout Satori and Yoga can't express. Source in pages/demos/og-image/.

09

HTML Playground

Paste HTML with inline styles and parseHTML turns it into a layout tree that solveLayout positions off-DOM, checked live against the browser. Unsupported CSS throws with the path to the offending element — the strictness is the feature.