Rebuilding a page you already have the HTML for is tedious. You’re copying over markup by hand, recreating every class in the Style Manager, and then going back for the CSS you forgot the first time around. Etch Importer skips all of that. Paste a full HTML document in and it comes out the other side as Etch blocks, styles, and variables, ready to work with.

Please purchase access below to download this plugin

How it works

Etch Importer adds an Import HTML button to the Etch settings bar.

Click it, paste in a complete HTML document (<!DOCTYPE html> and all), and hit Import. The plugin reads through the page and sorts everything into the right place:

  • Everything inside <body> becomes top-level Etch blocks (unless customized in the settings).
  • Class, ID, attribute, and tag selector rules from any <style> tag go into the Style Manager.
  • :root custom properties become Etch global Variables instead of a literal :root rule.
  • @media, @container, @font-face, @keyframes, @supports, and bare element selectors like div or body get pulled into a new, timestamped global stylesheet.
  • Inline <script> code, wherever it was in the original document, gets concatenated and attached to the first imported element.
A red arrow points to the Etch Importer download icon on a vertical toolbar with various icons on a dark background next to a white workspace.

Using the importer

  1. Click Import HTML in the Etch settings bar.
  2. Paste your full HTML document into the text area.
  3. If the pasted HTML links to any external stylesheets, you’ll see a confirmation screen listing them. Uncheck any you don’t want fetched.
  4. Click Import. A summary shows what came in, broken down by stylesheet source, along with any warnings like skipped external scripts or CORS failures.

If the page you’re importing wraps everything in a single shell div rather than laying content directly inside <body>, you can point the importer at that wrapper’s contents instead. That’s what the Container Selector Override setting is for, more on that below.

External stylesheets

Any absolute <link rel="stylesheet" href="..."> in the pasted HTML is detected automatically. Confirm which ones to keep, and the importer fetches and merges them the same way it handles a <style> tag. You can also add stylesheet URLs manually from the paste screen, which is useful for relative <link> hrefs the importer can’t resolve on its own, or for CSS coming from somewhere else entirely.

Keep in mind fetching is subject to CORS. If a stylesheet lives on a server without permissive CORS headers, the fetch fails and the import continues without it. The summary tells you which one failed and why.

Import Settings

Open this from the Import Settings link at the bottom of the paste screen.

Setting What it does
Container selector override By default, <body>‘s direct children become separate top-level blocks. If the page wraps everything in one shell div, set a selector here (like .page or main) to import that wrapper’s contents instead of the wrapper itself.
Exclude selectors Comma-separated CSS selectors. Any matching element, and its descendants, gets skipped entirely.
@-rules Toggle @media, @container, @font-face, @keyframes, and @supports on or off individually for import into the global stylesheet.
Generic element selectors Whether bare tag or universal selectors (div, body, *) get imported into the global stylesheet. Off by default, since these often overlap with your Etch’s own reset.
JavaScript Whether inline <script> code gets attached to the first imported element, or skipped entirely.

These settings save to the browser’s localStorage, so they’re per-browser rather than shared across admins or synced across devices.

A few things to know before using:

Changelog

1.0.1 — Nested @media and @container Support

Released Aug 18 2026

Fixed: nested @media and @container no longer disappear on import

If a pasted stylesheet used modern CSS nesting, a @media or @container query written inside a selector’s own block instead of wrapping it from outside, that block was silently lost during import. It’s now preserved correctly, and it stays nested right where you’d expect it: attached to that selector’s own style in the Style Manager, not scattered into a separate global stylesheet.

New: @container is now a supported at-rule type

Container queries get the same treatment as @media, including their own toggle in Import Settings if you’d rather skip them.

1.0.0 — Initial Release

Released Aug 17, 2026

Etch Importer adds an “Import HTML” button to the Etch builder’s settings bar. Paste a full HTML document and it converts directly into Etch blocks, styles, and (optionally) a script, instead of rebuilding the page by hand.

What it does:

Everything inside the pasted document’s <body> becomes top-level blocks. If the page wraps everything in one shell div, a container selector override lets you import that wrapper’s contents directly instead of the wrapper itself.

CSS is parsed and routed automatically. Class, ID, attribute, and tag selector rules go to Etch’s Style Manager. Root-level custom properties become Etch’s global Variables. @media, @font-face, @keyframes, and @supports rules, along with generic element selectors like div or *, go into a new, timestamped global stylesheet, since the Style Manager has no place to hang those.

Any absolute linked stylesheet in the pasted HTML is detected automatically. After you confirm which ones to keep, they’re fetched and merged the same way as inline <style> tags. You can also add extra stylesheet URLs by hand, for relative links the importer can’t resolve on its own.

Inline <script> code is attached to the first imported element.

Settings let you exclude selectors, toggle each at-rule type on or off, and choose whether generic selectors and scripts get imported at all.