UnHTML
Get UnHTML
How it works Features Pricing FAQ Get UnHTML
HTML → editable layers

Any webpage, rebuilt as native Figma layers.

UnHTML converts a page into real frames, text, images, vectors, and true auto-layout, mapped from its actual CSS. Not a flattened screenshot. Drop in a file and edit everything the moment it lands.

Get UnHTML See how it works
Workflow

From file to editable canvas in three moves.

No account, no upload step. The plugin renders and measures your page in its own UI, then writes native layers straight onto the canvas.

01

Drop a file

A self-contained .html, a Safari .webarchive, or a scene.json. It stages as a chip so you can confirm exactly what is loaded.

02

Set viewport & options

Choose Desktop 1440, Mobile 390, or type a custom width. Toggle auto-layout conversion and, if you need it, opt in to remote fetching.

03

Get layers + a report

Real editable layers land on your canvas, with an honest report of every font substituted, frame reverted to absolute, and image skipped.

A Simplest path

Drop it straight into the plugin

Drag a self-contained file onto the drop zone. The plugin renders it in a real browser context, measures every node, and builds the layers. No CLI, no setup beyond the plugin itself.

B Robust path

Capture with the CLI or bookmarklet

For live sites, remote assets, or JS-built pages, a real headless browser fetches everything with no CORS limits and full-page scroll, then you drop the scene.json.

# capture any URL to a scene file node capture/cli/capture.js https://example.com --out scene.json
Fidelity

Built for editing, not just for looking.

Every layer maps to something you can actually change in Figma. When a mapping cannot be reproduced, the plugin degrades on purpose and tells you why.

Real auto-layout, from real CSS

CSS flex, simple grids, and stacked block sections map to true Figma auto-layout: spacing, padding, wrap, and stretch included. A frame that cannot reproduce the captured geometry falls back to absolute automatically, so the result is never worse than a pixel-faithful import. Toggle it off any time to import everything with absolute positions.

flex → auto-layout gap · padding wrap · stretch auto fallback → absolute

Editable text with real runs

Family, weight, size, and color per run, plus letter-spacing, line-height, text-transform, alignment, underline, and strikethrough, all preserved as live text.

Images & vectors, natively

SVGs become native Figma vectors. WebP and AVIF transcode to PNG. Hero and card background photos become image fills behind their content, and gradients map to Figma gradients.

Fonts you lack, handled

Missing fonts are substituted automatically (default Inter, configurable), and every single swap is listed so nothing changes silently.

Honest reporting

After every import you get a report: fonts substituted, frames reverted to absolute, images skipped. A node-count budget guards against 10k-layer dumps.

JS-rendered pages

Bundled React and Vue pages are detected and re-rendered with scripts on inside a sandboxed frame, an explicit opt-in because it needs the network.

Offline by default

By default, nothing leaves your machine.

Zero network requests with default settings. Self-contained files and web archives carry their own assets, so the import needs nothing from the outside.

Markup is sanitized before it renders: scripts, inline event handlers, and javascript: URLs are stripped.

Remote fetching is opt-in. JS-rendered pages run only in a sandboxed frame, and only when you turn it on deliberately.

Pricing

One-time pricing. No subscription.

Start on the free plugin and see your first pages land as layers. Pro adds the one-click capture and the auto-layout that makes them worth editing. Pay once; nothing renews.

Free
$0
The plugin, to try
Get the free plugin
  • Drop HTML, .webarchive or scene.json
  • Absolute positioning (auto-layout is Pro)
  • Up to 500 layers per import
  • Open-source capture CLI & bookmarklet
  • Personal use, community support
Most popular
Pro
$39one-time · per editor
The full plugin
  • Everything in Free
  • Auto-layout from real CSS flex & grid
  • Unlimited layers per import
  • Desktop, Mobile & custom viewports
  • Import reports & font-substitution log
  • Commercial use, one year of updates
Studio
$119one-time
Pro for a team of five
  • Everything in Pro
  • Up to 5 editors
  • Priority support
  • One year of updates

Launch pricing, and it may change. A purchase you have already made stays at the price you paid.

FAQ

Straight answers.

What UnHTML does, what it does not, and where its limits are, stated plainly.

Best with a self-contained .html file or a Safari .webarchive, since both carry their own images, styles, and fonts. For live sites behind the network, remote stylesheets, or pages built by JavaScript, use the CLI or bookmarklet to capture a scene.json, then drop that into the plugin.
No. Any font you do not have is substituted automatically (Inter by default, and configurable), and every substitution is listed in the import report, so you always know exactly what changed.
No. With default settings the import makes zero network requests and nothing leaves your machine. Remote fetching is an explicit opt-in toggle, off until you turn it on.
Pages that build their DOM with JavaScript are detected and re-rendered with scripts on inside a sandboxed frame. Because that step needs the network, it is opt-in. For the most reliable result on heavy apps, capture with the CLI first.
Those flatten a page into an image or trace an approximation of it. UnHTML builds real frames, editable text runs, native vectors, and true auto-layout from the page's actual CSS, so you edit it like something you drew in Figma yourself.
Yes. Auto-layout is mapped from the page's real flex and grid. When a frame cannot reproduce the captured geometry, it falls back to absolute positioning automatically, so the output is never worse than a pixel-faithful import, and you can turn conversion off entirely.
Pro and Studio are one-time purchases that include one year of updates. Launch pricing may change over time, but a purchase you have already made stays yours at the price you paid.
HTML → editable layers

Stop screenshotting. Start editing.

Bring any page into Figma as layers you can actually work with, and keep it all on your machine while you do.

Get UnHTML Review the workflow