Skip to content

README.md

Latest commit

 

History

History
154 lines (110 loc) · 7.98 KB

README.md

File metadata and controls

154 lines (110 loc) · 7.98 KB
Raw

FlowConvert

Paste HTML. Get Webflow.

Open-source HTML / CSS / JS → Webflow clipboard converter. Drop your code in, click Convert, and paste straight into Webflow Designer — your design lands as real Webflow nodes, styles, and embeds.

License: MIT Next.js PRs Welcome

Live demo · AI Prompt Guide · Architecture · Changelog

Hosted live at http://mekko.tools/ — no install needed, just paste and convert.

What it does

FlowConvert turns raw HTML + CSS + JS into Webflow's internal clipboard format (@webflow/XscpData) and copies it to your clipboard. Open Webflow Designer, select a section, hit Cmd/Ctrl+V, and your design appears as native Webflow nodes — not a useless HTML embed.

  • 100 % client-side. No server, no API key, no upload. Your code never leaves the browser.
  • Real Webflow nodes. Sections, Headings, Links, Forms, Images, Lists — all map to native Webflow types.
  • Real Webflow styles. ~124 CSS properties route into styleLess; the rest fall through to a tidy <style> HtmlEmbed.
  • Responsive aware. @media (max-width: 991 / 767 / 478) maps to Webflow's medium / small / tiny breakpoints automatically.
  • Form support. <form> → FormWrapper + FormForm + success/error messages. Checkbox, radio, select, textarea all map correctly.
  • Smart fixes. Auto-expands shorthands (margin, padding, border, transition, animation, inset, flex, gap); recovers reveal animations (opacity:0 + transition); preserves SVGs centered as embeds; keeps data-* / aria-* / on* attributes intact.

Quick start

git clone https://github.com/mekko-digital/flow-convert.git
cd flow-convert
npm install
npm run dev

Open http://localhost:3000.

Scripts

Command What it does
npm run dev Start the dev server
npm run build Production build (static export to out/)
npm run start Serve the production build locally
npm run lint Run ESLint
npm run typecheck Run TypeScript without emitting

The app is a static Next.js export — drop the out/ folder on any static host (Vercel, Cloudflare Pages, Netlify, GitHub Pages, S3, …).

How to use it (3 steps)

  1. Paste your code into the HTML / CSS / JS tabs.
  2. Click Convert. The Webflow JSON is auto-copied to your clipboard.
  3. Open Webflow Designer, select a section, and paste. Done.

For best results — clean class names, simple selectors, vanilla CSS — see the AI Prompt Guide or copy the bundled AI prompt from the in-app /prompt-guide page and feed it to Claude, ChatGPT, or Gemini along with your Figma screenshot.

How it works

convertToWebflow(html, css, js)
  → DOMParser (browser-native)
  → CSS parser (shorthand expand, breakpoint detect, var/clamp/env routing)
  → Recursive DOM walk (tag → Webflow type map)
  → Custom-CSS / JS / SVG → HtmlEmbed nodes
  → Wrap in @webflow/XscpData envelope
  → Copy to clipboard as application/json

Deep dive: docs/architecture.md and docs/xscpdata-format.md.

Known limitations

  • Complex CSS selectors (.parent .child, .a.b, :hover, ::before, tag, id) → fall through to a custom <style> HtmlEmbed by design — Webflow's native style system is class-flat.
  • var(), clamp(), env() values always go to custom CSS.
  • No Webflow IX2 interaction mapping (use Designer for those).
  • Images stay on external URLs — they're not uploaded to Webflow Assets.
  • Each paste generates fresh UUIDs (re-pasting creates duplicate styles).
  • :hover only works on the published site, not in Designer canvas.

Full quirk list: docs/webflow-quirks.md.

Project layout

flow-convert/
├── src/app/
│   ├── layout.tsx              # Root layout, fonts, metadata
│   ├── page.tsx                # Converter UI (CodeMirror editor + result)
│   ├── converter.ts            # The conversion engine (~130 lines, all client-side)
│   ├── changelog/page.tsx      # /changelog
│   └── prompt-guide/page.tsx   # /prompt-guide — bundled AI prompt
├── docs/
│   ├── architecture.md
│   ├── xscpdata-format.md
│   ├── html-authoring-rules.md
│   ├── webflow-quirks.md
│   └── changelog.md
├── public/                     # Static assets
├── .github/                    # Issue / PR templates, CI workflow
└── ...                         # LICENSE, CONTRIBUTING, etc.

Contributing

Issues and PRs are welcome. Please read CONTRIBUTING.md and the Code of Conduct first.

Areas we'd love help with:

  • More node-type mappings (custom code components, embeds)
  • Better grid / flex shorthand coverage
  • Webflow CMS field detection
  • A drop-in JS library (flow-convert/core) split out from the Next.js app
  • More AI-prompt presets (Tailwind-input mode, design-token mode, etc.)

Security

Found a vulnerability? Please don't open a public issue — read SECURITY.md for private disclosure.

License

MIT © Mekko Digital.

This format (@webflow/XscpData) is not officially documented by Webflow. Everything in this repo is reverse-engineered from real clipboard data and public community sources. "Webflow" is a trademark of Webflow, Inc., and this project is not affiliated with or endorsed by Webflow.

Credits

Built and open-sourced by the team at Mekko Digital — a small studio that ships fast Webflow & Fullstack MVP solutions and tools. If FlowConvert saves you a day of rebuilding, say hi.

Check out our other free tools at Mekko Tools. Tool is hosted live at Flow Convert.

Tayyab Ul Islam

GitHub LinkedIn X Facebook Upwork WhatsApp

Hamza Zafar

GitHub LinkedIn X Facebook Upwork WhatsApp