Guides / Cursor to Webflow

Cursor to Webflow

If you make prototypes in Cursor or VS Code, you can continue to write code and deliver in Webflow. Convert the HTML file directly. Or start your dev server and capture the rendered section.

Add to Chrome, free →See the demo
index.htmlSection.heroHeadingButton:hover
[IN]Ask Cursor for
A single index.html for the hero section.
CSS in <style>, class names in kebab-case,
GSAP from the CDN for the entrance animation.
[OUT]What you get in Webflow
  • HTML files: FlowPaste converts the files directly, with the CSS and GSAP
  • Framework projects (React, Vue, Astro): capture the localhost page while the dev server runs
  • Your class names → Webflow classes

Steps

  1. Open the HTML file and copy all of the code. Or start your dev server.
  2. Paste the code into FlowPaste in the Designer. Or use Capture an element on localhost.
  3. Click Convert & copy. Then press ⌘V or Ctrl+V on the canvas.

Limits

  • When you capture localhost for the first time, FlowPaste asks for the optional site access permission.
  • Separate CSS and JS boxes are a Pro feature. On the Free plan, put the CSS and JS in the HTML.

Questions

Can I convert a multi-file project?

Yes. Convert the project 1 section at a time. Put the CSS for each section in a <style> tag. Or use Live Capture on the page while the dev server runs. Live Capture collects the CSS for you.

Try it with your own code.

Free: 3 conversions each day. You do not need a credit card.

Add to Chrome, free →