Guides / Bolt to Webflow

Bolt to Webflow

Bolt.new makes an app that operates in the browser. To move a page of your website into Webflow, capture the rendered sections from the Bolt preview. Then paste the sections as native elements.

Add to Chrome, free →See the demo
section.quotes
[IN]Route
Bolt preview (open in new tab)
  → FlowPaste: Capture an element
  → Webflow Designer: ⌘V or Ctrl+V
[OUT]What you get in Webflow
  • Sections with their computed styles
  • Breakpoints from the media queries of the page
  • Named classes that you can clean and use again

Steps

  1. Open the Bolt preview in a separate tab.
  2. Use FlowPaste → Capture an element on each section that you want.
  3. In the Webflow Designer, paste from FlowPaste → History.

Limits

  • FlowPaste moves only the visual layer. The app behavior stays in Bolt.
  • Captured class names come from the source. FlowPaste compiles Tailwind utilities into CSS rules first.

Questions

Can I paste Bolt's code directly?

No. Bolt projects are usually React with a build step. Capture the rendered page. Do not paste the source files.

Try it with your own code.

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

Add to Chrome, free →