Domotion

Domotion

Pixel-faithful HTML, served as a single SVG.

Domotion captures real HTML/CSS rendered in headless Chromium and converts it into a self-contained, scalable SVG — with optional CSS keyframe animations across multiple frames. Authored as plain HTML, shipped as <img src="demo.svg">.

Quick start →Why Domotion?API reference
Example Domotion capture: a card with a gradient logo, headline, and code snippet — rendered to SVG by Domotion itself.
Above: SVG produced by Domotion from the HTML on its left. Same pipeline this manual teaches.

Three things make it useful

Real HTML, real CSS

Author your demo in your real app, your real component library, your real fonts. No re-implementing layout in a vector tool.

One file, lazy-loaded

Output is a single self-contained SVG. No external images, no script, no font fetches. Drops into <img> and lazy-loads with the rest of your page.

Scales without artifacts

Vector text and shapes, not raster screenshots. Crisp on retina, crisp at 4× zoom, crisp embedded at any width.

Manual

Start Here

Install Domotion and capture your first SVG with one command.

  • What is Domotion?
  • Installation
  • Quick start
  • Your first capture
  • +2 more

Concepts

How Domotion thinks about capture, rendering, and animation.

  • The capture pipeline
  • The element tree
  • Text rendering
  • Animation model

Guides

Cookbook recipes for the most common things people build.

  • Capture a single frame
  • Build an animated demo
  • Typing & tap overlays
  • Fonts & non-Latin scripts
  • +2 more

API Reference

Every public export, with signatures, parameters, and examples.

  • Overview
  • captureElementTree()
  • elementTreeToSvg()
  • CapturedElement
  • +5 more

CSS Support

Which CSS features round-trip faithfully — and which don't.

  • Overview
  • Text & fonts
  • Colors & backgrounds
  • Gradients
  • +5 more

Help

Troubleshooting, FAQ, contributing.

  • Troubleshooting
  • FAQ
  • Contributing

Animated SVG, looping natively in your browser

Three-frame terminal animation: 'npm install domotion-svg' typing in, a progress bar resolving dependencies, then a green checkmark with the installed packages list.
Three captured HTML states stitched into one SVG with crossfades — no JavaScript at runtime.

One install, one command

npm install -g domotion-svg
domotion capture https://example.com -o example.svg

Chromium auto-installs on first capture. Drop down to the JS API when you outgrow the CLI.

Quick start →