# How Instatic's Super Import Converts Raw HTML/CSS into Editable Nodes
> Discover how Instatic's Super Import transforms raw HTML CSS into editable nodes. Learn about its deterministic pipeline for parsing, stripping unsafe content, and mapping elements.
- Repository: [CoreBunch/Instatic](https://github.com/CoreBunch/Instatic)
- Tags: internals
- Published: 2026-07-30
---
**Instatic's Super Import uses a deterministic pipeline in [`src/core/htmlImport/walkAndMap.ts`](https://github.com/CoreBunch/Instatic/blob/main/src/core/htmlImport/walkAndMap.ts) to parse raw HTML, strip unsafe content through `stripUnsafe`, recursively map DOM elements to `PageNode` objects via `walkAndMap`, and extract CSS into the `styleCss` field for the editor's Style panel.**
Instatic's visual editor manipulates a structured node tree to enable real-time page editing. The **Super Import** feature bridges static HTML documents and this editable ecosystem by transforming raw markup into native `PageNode` objects that the editor can manipulate immediately. According to the CoreBunch/Instatic source code, this conversion happens through a single public API that performs sanitization, parsing, and tree mapping in one atomic pass.
## The Five-Stage Import Pipeline
The `importHtml` function exported from [`src/core/htmlImport/walkAndMap.ts`](https://github.com/CoreBunch/Instatic/blob/main/src/core/htmlImport/walkAndMap.ts) processes HTML strings through five deterministic stages that ensure safe, accurate conversion to editable nodes.
### Stage 1: Parsing the Raw Markup
The pipeline begins by invoking `parseHtml` to convert the raw HTML string into a DOM-like tree structure. This initial parse provides a traversable foundation for the sanitization and mapping steps that follow.
### Stage 2: Sanitizing Unsafe Content
Before traversal, the `stripUnsafe` function removes potentially dangerous elements including `