Playground
English · 简体中文
The compiler runs locally in a dedicated browser Worker using the same source as the package. The playground does not upload your CSS or configuration. Configuration expressions are executable JavaScript and can make their own network requests: run only code you trust. A Worker keeps compilation away from the document but is not a security sandbox.
Each edit starts a fresh compilation after a short pause. Work that exceeds five seconds is terminated, and leaving the page stops pending work. The displayed duration measures configuration evaluation and compilation, excluding Worker startup; it is not a cross-machine benchmark. Previous output is dimmed while compiling or after an error.
Edit either pane and the output follows. The options pane is a JavaScript expression rather than JSON, so a regular expression in selectorExclude or a function designWidth works here exactly as it does in a config file — and so does appPcPreset({ appDesignWidth: 375, pcDesignWidth: 1440 }) on its own.
Reading the output
A sample is marked active only when both input panes exactly match it. Editing either pane clears that marker unless the resulting content matches a sample; restoring the original content restores the marker.
The options expression must synchronously return a configuration object (or undefined for defaults). Promises and function values are not invoked or awaited as configuration factories. For example, use appPcPreset() directly, not () => appPcPreset() or Promise.resolve(appPcPreset()). Callbacks inside a configuration object remain supported.
Use Compile again to retry after a Worker startup failure or timeout without changing your input. The button is unavailable while a compilation is pending. Before the first successful run, a failed attempt displays “No successful compilation yet” instead of a misleading loading message; later failures retain the dimmed last successful result.
Both fluid.minWidth and fluid.maxWidth are optional. Two bounds produce clamp(min, fluid, max), one produces min() or max(), and no bounds leave the fluid expression unbounded. For example, 24px on a 375 canvas is 6.4vw before bounds are applied. Try the maximum-only and container-unit samples to see these differences.
Text combines rem and viewport units so part of its size follows the reader's root font setting. fontFluidity controls that balance; set it to 0 for plain rem. Verify text resizing and reflow in the actual page rather than treating a generated formula as proof of accessibility compliance.
A 1px border stays 1px. Hairlines are a rendering decision rather than a measurement, and scaling them produces the blurry half-pixel edges the hairline option exists to prevent.
Where to go next
- Getting started — the same thing in a real project
- Configuration reference — every option in the pane above
- Architecture and formulas — where each number comes from