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.
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. :rootcustom properties become Etch global Variables instead of a literal:rootrule.@media,@container,@font-face,@keyframes,@supports, and bare element selectors likedivorbodyget 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.
Using the importer
- Click Import HTML in the Etch settings bar.
- Paste your full HTML document into the text area.
- If the pasted HTML links to any external stylesheets, you’ll see a confirmation screen listing them. Uncheck any you don’t want fetched.
- 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:
- Relative
<link>hrefs can’t be auto-detected since the importer has no way to know the original page’s origin. Add the absolute URL manually if you need that stylesheet. - External
<script src="...">tags aren’t imported, only inline script code. Paste the script’s contents directly if you need it. - Very large or deeply nested documents may take a moment longer to process, since conversion happens synchronously in the browser.
- Imported markup is used as is, including inline event handlers and embedded scripts. Only paste HTML you trust.
- Take a backup before doing any imports as this touches global things like the selector system. This is always a good idea!
Changelog
1.1.0 – Fetch external stylesheets server-side, skip Automatic.css, fix selector splitting
Released Oct 26, 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.
Linked stylesheets now import, wherever they’re hosted
Before, most external stylesheets failed to import because the source site blocked cross-site requests (CORS), and you had to copy the CSS in by hand. Etch Importer now fetches stylesheets through your own WordPress site, so they come through on their own. If the server can’t reach a stylesheet, it tries from your browser instead. Background images and fonts inside those stylesheets still point at the original site instead of breaking.
Only admins can use the server fetch, and it only connects to public websites. It can’t be pointed at your server’s internal network.
Skip Automatic.css automatically
Importing a site built with Automatic.css used to bring in thousands of framework classes and variables you didn’t need. A new setting, on by default, detects ACSS stylesheets and leaves them out. Install ACSS on your Etch site instead, and the utility classes in the imported markup pick up your own ACSS styles.
Fixes
- Modern CSS selectors import correctly. Selectors such as
:is(),:where()and:not()with several arguments were being split into broken styles. They now come through intact, and the “Exclude selectors” setting handles them too. - Imported scripts no longer break on non-JavaScript blocks. Data blocks such as speculation rules and structured data (JSON-LD) are now skipped, so they can’t cause a syntax error that stops the rest of the attached script from running.
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@supportsrules, along with generic element selectors likedivor*, 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.