Paste your HTML + CSS, get Webflow Designer-ready JSON. One click convert, Ctrl+V into Webflow. No account, no limits.
Input
HTML + CSS
Output
Webflow XscpData
Converted JSON will appear here.
Click "Convert" to transform your HTML into
Webflow Designer clipboard format.
0 elements
0 classes
0 hover states
Hover & Embed CSS
0 hover states
0 hover states extracted
Paste not working? Try the Embed method.
Copy the Embed CSS above (the green button)
In Webflow Designer, add an Embed element (drag from Add Panel, or press A and search "Embed")
Paste the CSS inside <style> tags in the Embed code editor
Click Save & Close on the Embed
Your hover effects, transitions, and interactive styles will now work on the page
Why does this happen? Webflow's clipboard paste handles structure and base styles well,
but hover states, transitions, and some CSS properties don't always survive the paste.
The Embed method injects real CSS directly into the page, so everything works exactly as designed.
This is the same technique professional Webflow developers use for custom interactions.
How to Use
Grab your HTML — open your HTML file (or view source on a live page) and copy the full markup including any <style> blocks
Paste it in the Input panel on the left — full documents, fragments, and inline styles all work
Click Convert (or press Ctrl+Enter) — the converter parses your CSS, resolves variables, expands shorthands, and builds Webflow-native JSON
Click "Copy to Clipboard" to grab the output JSON
Open Webflow Designer, click on the canvas (or inside a Section/Div), and press Ctrl+V — your elements appear with styles intact
If hover states were detected, a separate Hover CSS panel appears below — copy that CSS and paste it into a Webflow Embed element on the page
Tip: For best results, use complete HTML documents with CSS in <style> tags rather than external stylesheets. The converter can't fetch external CSS files — everything needs to be in the HTML you paste.
♥
Buy me a coffee?
This tool is completely free, no strings attached. If it saved you time, a small donation helps keep it running and fuels more free tools like this one.
Drop in your HTML with CSS — full documents, fragments, inline styles all work.
2
Convert
We parse CSS, resolve variables, simulate inheritance, and build Webflow-native JSON.
3
Paste in Webflow
Copy the output, click on the Webflow Designer canvas, and press Ctrl+V. Done.
Thanks for being here.
I built this because I needed it myself. I've spent a mind numbing amount of hours
manually designing in Webflow or finding the right developer that can capture a vision
in my head. This is the tool I wish I always had all this time. While many others and I
will move to code only platforms, some of my clients will stay on Webflow, and many of
yours may as well. I figured if it saves me time, it might save you time too. This tool
is a small piece of a much bigger system I'm building at DeskWolf, and every person who
uses it, free or paid, genuinely makes a difference. If this helped you even once, that's
a win. Thank you for supporting a small developer and a small business.