CSS Typed OM - Interactive CSS Lab | IconVault
Learn the CSS Typed OM: build CSSUnitValues, run real unit arithmetic, chain CSSTransformValue transforms, drive attributeStyleMap live.
CSS Typed OM
Typed values, unit math and transform builder
Typed values and unit arithmetic
TypeError, as the spec demands: CSS is not defined Try px with px, or deg * number.
Unlike strings, typed values know their units: px + px works, px + deg throws, and .to("px") converts compatible units.
attributeStyleMap lab
Press Apply to drive the box through attributeStyleMap.
Transform chain builder (CSSTransformValue)
Order matters: each step is applied in sequence. The preview is driven by a real CSSTransformValue, not a string.
const t = new CSSTransformValue([
new CSSTranslate(CSS.px(40), CSS.px(0)),
new CSSRotate(CSS.deg(25))
]);
el.attributeStyleMap.set("transform", t);CSSTransformValue is not available in this browser, so the preview is disabled. The generated code is still valid where supported.
5 of 5 free uses left. Builders, sliders and the preview are unlimited.
About this tool
IconVault's CSS Typed OM lab replaces stringly-typed CSS in JavaScript with real typed values. Build CSSUnitValue objects like CSS.px(24) and inspect their value and unit, then run genuine unit arithmetic: px + px works, px + deg throws a TypeError exactly as the spec demands, and .to() converts between compatible units. No mocks: every operation runs against the real Typed OM.
A transform chain builder composes CSSTranslate, CSSRotate and CSSScale into a CSSTransformValue that drives a live preview, and the styleMap lab sets width, rotate and opacity through attributeStyleMap with a typed readout. Free, runs fully in your browser, with per-feature support badges because Typed OM is Chromium-first and support varies elsewhere.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon