Converting...
Conversion Complete
Copied to clipboard — paste directly into Webflow Designer
Edit Conversion
Copy Again
Canvas
Convert HTML
Extract JSON
Harvest
JSON to HTML
Canvas
Class Registry
Dashboard
Convert to Webflow
Terms
Privacy
Cookies
Aviso Legal
Resources
@vanalva
MADE WITH
BY
HTML to Webflow Converter
Paste or drop your HTML here
ctrl
+
V
Paste HTML
Load Files
Drop CSS, HTML, or a full ZIP project to extract variables, breakpoints, and pseudo-states.
Drop CSS / HTML / ZIP files here
or click to browse
Or paste CSS
Parse CSS
Pages
Converted XscpData
Convert a page to see the output here
Copy for Webflow
Copy Raw JSON
Copy Class Inventory
QA Audit
Save
Save as Page
Save as Component
Project Loaded
0
Classes
0
Variables
0
Breakpoints
0
Pseudo
Design System
Page Fonts
Replace unknown fonts
View variables / breakpoints / unsupported
Variables
Breakpoints
Unsupported
Collection Preview
Preparing export...
Options
Skip conversion success screen
Auto-extract classes to registry
Use Native Webflow Elements
Uncheck to use generic Block:
Section
Container
VFlex
HFlex
Grid
Heading
Paragraph
Blockquote
List
Link
Button
Image
Video
Form
Tabs
Slider
Navbar
Dropdown
Lightbox
Inline CSS into classes
CSS from <style> blocks into styleLess. Includes :hover/:focus and breakpoints.
Extract styles to CSS Embed
CSS to Embed block. Scripts always extracted.
Strip Webflow built-in CSS
Removes .w-* and :root system vars.
Include tag styles
Creates All Links, All H1s, etc. Off = tag rules stay in CSS embeds (recommended).
Rename w- classes
Prefix:
Convert animations to Webflow native
Detects scroll reveals, hover effects, and GSAP patterns → generates Webflow IX3 interactions. When off, keeps original JS/CSS as code embeds.
Merge variant styles
Match existing classes
BEM combo conversion
Aggressive styleLess (experimental)
Flips discretionary embed gates — statically-present rules go native instead of embeds. Diff against a normal conversion before trusting output.
Custom CSS Embed
Custom JS Embed
Actions
Apply to Registry
Download Project
Save as Site
Generate Design System
Extract Framework
Starter Kit
Simplify Pages
Clear
Convert
Export Site
Design System
🔎
Inspecting variables…
Quick
Advanced
Quick Convert:
Native + Inline CSS + Extract scripts.
Convert
Apply Registry
🔎
Inspecting variables…
Auto-detect variable system
Lumos · Client-First · CSS-Native
Force system into
CSS-Native
flwr
Lumos
Client-First
+ Custom…
Also rewrite variable names
⚠ Renames every variable's CSS name to the target convention and rewrites all
var()
references across exported pages. Higher fidelity — irreversible.
Include images
Minify large SVGs for embed
50–75 KB serialized → minify try; >75 KB always as asset files. Off: >60 KB as files.
Format
WebP
JPEG
PNG
Quality
80%
Fit 4MB
Export Site (ZIP)
🔎
Inspecting variables…
Output:
Organized
Flat
organized
flat
Format:
Download JSON
Copy to Clipboard
Per Collection ZIP
Export Design System
Extract JSON
Paste Webflow component data to extract @webflow/XscpData JSON.
Paste here
Ctrl+V / Cmd+V
Harvest
Paste multiple XscpData JSONs. Each paste creates a card.
Paste JSON
Paste as many as you need
Save All
Clear
JSON to HTML
Convert Webflow XscpData JSON back to HTML.
Convert
Sample
Converted HTML
Copy HTML
Preview
Download
Class Registry
×
Add existing class names manually or harvest them from your Flowriter project.
Add Existing Classes:
Add
Existing (
0
)
Clear
No existing classes
Class ID Harvester
Paste Webflow elements to harvest class IDs.
Flowriter Integration
Harvest all classes from your project.
Import File
Paste Clipboard
Strip CSS for harvested classes (skip style creation)
Clear
|
Clear
|
Clear
|
Clear
Paste here
Harvest class IDs
0 classes
Clear
0
classes need Webflow IDs:
Paste additional elements
Each paste adds more IDs
×
