Conversion Overview

Convertex takes standard HTML and CSS and produces Webflow's proprietary JSON format (@webflow/XscpData). The output can be pasted directly into Webflow Designer, where it appears as native elements with full style configurations -- no manual reconstruction required.

How Conversion Works

A visual walkthrough of the five-step conversion pipeline, from raw code to Webflow-ready JSON.

~4 min

The Five-Step Pipeline

Every conversion follows the same deterministic pipeline. Understanding these steps helps you write HTML and CSS that converts with maximum fidelity.

Parse CSS

Your CSS is parsed using PostCSS with a safe-parser fallback for malformed stylesheets. During this step:

CSS variables are extracted and resolved
Media queries are mapped to Webflow breakpoints
Shorthand properties (padding, margin, border, font, background) are expanded into individual declarations
Combo classes (.card.active) are identified
Pseudo-classes are categorized as natively supported or requiring ghost blocks

Parse HTML

Your HTML markup is parsed into a tree structure. Each HTML tag is mapped to its corresponding Webflow node type (for example, <div> becomes a Block, <h1> becomes a Heading). During parsing:

Class names, IDs, and data attributes are preserved
Text content is extracted as TextNode children
Images extract src, alt, and loading attributes
Links preserve href and target attributes
Special Webflow class prefixes (w-nav, w-form, w-slider, etc.) trigger component-specific conversion

Unify Styles

The parsed CSS declarations are matched to the HTML elements by selector. Each element receives its resolved styles organized by breakpoint:

Main (desktop) -- the default breakpoint
Medium (tablet) -- max-width 991px
Small (mobile landscape) -- max-width 767px
Tiny (mobile portrait) -- max-width 478px

Styles that Webflow cannot represent natively (descendant selectors, complex combinators, unsupported pseudo-classes) are separated into ghost block candidates.

Build JSON

The unified data is serialized into Webflow's @webflow/XscpData format. This includes:

A nodes array representing the DOM tree with Webflow-specific types
A styles array containing class definitions with per-breakpoint properties
Asset references for images and videos
Component-specific metadata for navbars, forms, sliders, and other special elements

Output

The final JSON is presented in the editor. You can copy it to your clipboard with one click and paste it into Webflow Designer using Cmd+V (or Ctrl+V).

What Gets Converted

Convertex handles the vast majority of HTML and CSS patterns you will encounter in production code:

Category	Coverage
HTML elements	All standard tags: divs, headings, paragraphs, links, images, lists, forms, semantic elements, video, and more
CSS layout	Flexbox, CSS Grid (including `grid-template-areas`), positioning, floats
Typography	Font family, size, weight, style, line-height, letter-spacing, text-transform, text-decoration
Colors & backgrounds	Solid colors, gradients, background images, background-size/position/repeat
Borders & shadows	Border width/style/color/radius, box-shadow, outline
Transforms & transitions	CSS transforms, transition properties
Responsive design	Media queries mapped to Webflow's four breakpoints
Pseudo-classes	`:hover`, `:active`, `:focus`, `:visited`, `:focus-visible`, `:focus-within` natively; others via ghost blocks
CSS variables	Parsed, resolved, and tracked across breakpoints
Special components	Navbars, dropdowns, forms, sliders, tabs, lightboxes, background video

What Does Not Convert

Some patterns fall outside what Webflow supports natively. Convertex handles these gracefully:

JavaScript behavior -- Convertex converts structure and styling, not logic. JavaScript interactions must be recreated in Webflow using interactions or custom code.
CSS animations (@keyframes) -- Webflow has its own animation system. Keyframe animations are not converted but can be re-created with Webflow Interactions.
Unsupported pseudo-classes -- Selectors like :nth-child(), ::before, ::after, and ::placeholder are routed to ghost blocks to preserve visual fidelity.
Complex selectors -- Descendant selectors (.parent .child), sibling combinators (+, ~), and child combinators (>) are embedded as ghost blocks.
Server-side rendering -- Convertex processes static HTML/CSS. Dynamic content from server-side frameworks is not resolved.

When CSS cannot be represented natively in Webflow, Convertex automatically creates ghost blocks -- embedded style tags that preserve your original CSS. This means visual fidelity is maintained even for unsupported patterns. Learn more in the Ghost Blocks guide.

Fidelity Expectations

Convertex aims for pixel-level fidelity between your original HTML/CSS and the Webflow result. In practice:

Layout and spacing reproduce accurately thanks to complete shorthand expansion and breakpoint mapping.
Typography matches because font properties are fully mapped to Webflow's style system.
Colors and backgrounds convert precisely, including gradients and background images.
Responsive behavior is preserved through the four-breakpoint system that mirrors Webflow's own responsive model.
Visual fidelity for unsupported CSS is maintained through ghost blocks, which embed the original CSS directly in the page.

The primary area where differences may appear is interactive behavior (hover animations, JavaScript-driven state changes), which must be configured through Webflow's native tools after import.

Next Steps

HTML Conversion -- Detailed tag mapping and attribute handling
CSS Conversion -- Property support, breakpoints, and pseudo-classes
Ghost Blocks -- How unsupported CSS is preserved
Special Components -- Navbars, forms, sliders, and more
Conversion FAQs -- Common questions answered

HTML Conversion