How to use Live Capture with Flowboard

What Live Capture does

Flowboard injects a picker overlay into the current http or https page. You hover the page, choose the element you want, confirm the selection, and Flowboard saves a local capture with structure, computed styles, images, responsive hints, and simple interaction hints where available.

After that, open Webflow Designer, return to Flowboard's Capture tab, click Import capture, and paste the copied result into the Webflow canvas.

Quick start

1. Open the website page that contains the component you want to capture.
2. Open the Flowboard extension and go to Capture.
3. Click Pick element.
4. Hover the page and click the component you want.
5. Use Parent or Child if the highlighted selection is too large or too small.
6. Click Confirm.
7. Open your project in Webflow Designer.
8. Open Flowboard again, go to Capture, and click Import capture.
9. Click into the Webflow canvas and paste.

If you see Imported capture and copied for Webflow, the capture was converted and copied successfully.

Step by step

1. Start on the source website.
   • Use a normal http or https page.
   • Do not start from Chrome settings pages, extension pages, PDFs, or other browser-internal pages.
   • Wait for the section to finish loading before starting the picker.
2. Open Flowboard and select the Capture tab.
3. Click Pick element.
4. In the Live Capture overlay, move your mouse over the page.
   • The overlay shows the selected tag, classes, node count, and image count.
   • Click an element to select it.
   • Click Parent if you only selected a small inner element.
   • Click Child if you selected too much.
5. Confirm the selection.
   • Click Confirm, or press Enter.
   • Press Esc to cancel.
   • You should see a message that the selection was saved locally as Capture IR.
6. Open the target Webflow Designer project.
7. Open Flowboard again and return to Capture.
8. Click Import capture.
   • Flowboard reconstructs the saved capture.
   • It converts the reconstructed HTML into a Webflow clipboard payload.
   • It saves the converted item in history.
   • It copies the result for Webflow.
9. Click into the Webflow canvas and paste.
10. Review the imported section in Webflow.
    • Check spacing, images, responsive behavior, hover states, and any interactive behavior.
    • Tidy classes and layout in the Style panel as needed.

Picker controls

Best practices for clean captures

• Capture one component or section at a time.
• Choose the outer wrapper for the component, not a tiny text node or button inside it.
• Use Parent until the highlight includes the whole component you want.
• Use Child if the highlight includes unrelated surrounding content.
• Prefer sections with clear HTML structure, normal images, text, buttons, cards, forms, or nav-like layouts.
• Capture at the viewport size closest to the Webflow breakpoint you care about first.
• Import into Webflow, then inspect tablet and mobile breakpoints before reusing the section.

What Live Capture handles best

Live Capture is designed for editable Webflow output. It may approximate parts of a source website when the original relies on browser-only behavior, complex scripts, or effects Webflow cannot represent natively.

What to avoid

• Full pages with thousands of nodes
• Huge image-heavy pages
• Canvas, WebGL, video-heavy, or animation-heavy sections
• Complex app UI that depends on live JavaScript state
• Hidden, collapsed, or lazy-loaded content that is not visible yet
• Third-party widgets, ads, maps, iframes, and embeds you do not control
• Capturing content you do not have permission to reuse

Smaller captures are easier to import, easier to clean up, and less likely to hit browser storage limits.

Free and Pro limits

Full pricing details are on the pricing page.

Troubleshooting

Pick element is disabled

1. Check whether the free daily live-capture limit has been reached.
2. Open a regular http or https page.
3. Refresh the source page and reopen Flowboard.

The picker does not appear

1. Make sure the active tab is the source website, not Webflow Designer or a browser-internal page.
2. Refresh the page and click Pick element again.
3. Try a simpler public page to confirm the extension can inject the picker.

The selected area is wrong

1. Use Parent to include the whole component.
2. Use Child to narrow a broad page wrapper.
3. Cancel and start again if the page changed while you were selecting.

Import capture says to open Webflow Designer

1. Open your target project in Webflow Designer.
2. Click into the Designer tab so it is the active tab.
3. Open Flowboard, go to Capture, and click Import capture again.

The imported layout does not match perfectly

1. Capture a smaller section.
2. Avoid sections that depend on canvas, complex JavaScript, or heavy custom effects.
3. Check the converted report for Live Capture warnings.
4. Adjust spacing, sizing, and states in the Webflow Style panel.

Live Capture FAQ