Docs

Getting Started

Paste any HTML into the input panel and click the arrow button (or press ⌘+Enter). The converter generates Webflow-compatible JSON that you can paste directly into Webflow Designer.

To go the other direction, switch to Webflow → HTML mode. Copy any element in Webflow Designer (⌘+C), paste the JSON into the input, and get clean HTML + CSS back.

How It Works

HTML → Webflow

1. Paste your HTML markup into the left panel.
2. The converter parses it, maps each element to the correct Webflow type (Block, Section, Heading, Paragraph, List, Image, Link, or DOM), and generates the @webflow/XscpData clipboard format.
3. The JSON is automatically copied to your clipboard.
4. In Webflow Designer, click on the canvas and press ⌘+V to paste.

Webflow → HTML

1. In Webflow Designer, select any element and press ⌘+C.
2. Switch to Webflow → HTML mode.
3. Paste into the left panel (the clipboard contains the JSON).
4. The converter reconstructs the HTML tree with class names, attributes, and generates CSS from Webflow's style definitions.

Use Cases

Debugging Webflow elements

Copy any element from Webflow Designer, paste it here in Webflow → HTML mode, and see the underlying HTML + CSS structure. Useful when an element isn't behaving as expected and you need to understand what Webflow is actually generating.

Migrating HTML into Webflow

Have existing HTML from another platform, a static site, or hand-coded markup? Convert it to Webflow JSON and paste it directly into the Designer. Saves hours of manual recreation.

Extracting styles from Webflow

Copy styled elements from Webflow, convert to HTML + CSS, and extract the exact CSS declarations Webflow is using. Useful for documenting design systems or migrating styles to other projects.

Working with AI-generated code

AI tools (ChatGPT, Claude, v0) generate HTML. This converter bridges that output into Webflow — paste the AI-generated HTML, get Webflow JSON, paste into Designer. Works the other way too: copy from Webflow, give the HTML to AI for modifications, convert back.

Building shareable Webflow snippets

Create reusable component snippets in HTML, convert them, and share via link. Anyone with the link can convert and paste the component into their own Webflow project as native elements.

Custom DOM elements in Webflow

Webflow's Designer doesn't let you create arbitrary HTML elements (<nav>, <article>, <details>, etc.). This converter creates them as DOM-type elements that Webflow renders natively with the correct HTML tag.

Reverse engineering for learning

Curious how a Webflow site is structured? Copy elements, convert to HTML, and study the markup. Great for learning Webflow's internal element model and how classes map to styles.

Element Mapping

The converter maps HTML elements to Webflow's internal types. Elements with proven native Webflow types use them. Everything else uses the DOM type, which tells Webflow to render the element as its original HTML tag.

Known Limitations

• Images with empty src are removed — they crash Webflow Designer.
• CSS classes without styles are created as empty classes in Webflow. If a class with the same name exists on your site, Webflow merges them. If not, you'll need to add styles manually.
• Inline styles become auto-generated classes named _inline-XXXXXXXX. These work but aren't pretty — consider using class names instead.
• CSS shorthand (margin, padding, gap) is expanded to longhand. Webflow requires longhand properties.
• SVG internals (path, circle, etc.) are preserved as DOM elements. They render correctly but can't be edited in Webflow's style panel.
• Form elements are converted as DOM elements, not native Webflow form components. They render correctly but don't get Webflow's form submission behavior.
• Interactions / animations are not converted. The ix2 field in the output is always empty.
• CMS bindings are not supported. Dynamic content references are lost.
• Multiple classes on an element create combo classes in Webflow. The first class is the base, subsequent ones are combos.
• Special characters in class names (dots, colons, brackets like Tailwind classes) are sanitized to hyphens.

What Will Error

The converter is designed to never produce output that crashes Webflow. However, some inputs produce warnings:

• Invalid JSON in Webflow → HTML mode — the converter will tell you it's not valid @webflow/XscpData.
• Malformed HTML — the browser's DOMParser auto-corrects most issues (unclosed tags, missing attributes). Enable Sanitize to catch common typos before conversion.
• Very large HTML (500KB+) — the API rejects oversized payloads. Split large pages into sections.

The Sanitizer

Enable the Sanitize toggle to automatically fix common issues before conversion:

• css="" → class="" typos
• Missing semicolons between inline style declarations
• Common tag misspellings (buton → button)
• Empty class="" and style="" attributes
• Duplicate id warnings
• <img src=""> removal

API

The converter is available as an API for programmatic use.

HTML → Webflow

POST /convert/html-to-webflow
Content-Type: application/json

{
  "html": "<div class=\"hero\"><h1>Hello</h1></div>",
  "sanitize": true
}

Webflow → HTML

POST /convert/webflow-to-html
Content-Type: application/json

{
  "json": "{\"type\":\"@webflow/XscpData\", ...}"
}

Base URL: https://html-to-webflow-converter.carterogunsola7589.workers.dev