Getting Started

Flowboard HTML to Webflow Guide

This guide is written for beginners. Follow the steps exactly and you will get reliable results.

What this feature does

Flowboard takes your HTML (and optional CSS/JS), converts it, and puts it on your clipboard in a Webflow-friendly format so you can paste it into Webflow Designer.

In the extension popup, use the HTML to Webflow section.

30-second quick start

  1. Open your Webflow Designer project.
  2. Open the Flowboard extension popup.
  3. In Convert, paste your HTML into Paste HTML....
  4. Click Convert to Webflow.
  5. Go back to Webflow Designer and press Cmd+V / Ctrl+V.

Success check: if you see a saved message, your conversion worked and is in your extension history.

Exact step-by-step

  1. Open Flowboard popup.
  2. Paste your code.
    • Put HTML in the first box.
    • If you are Pro, you can also use Optional CSS... and Optional JavaScript....
    • You can also paste one complete HTML document directly into the HTML box, including <!DOCTYPE html>, <head>, <style>, <body>, and inline <script> tags.
  3. Click Convert to Webflow.
  4. Wait for success state:
    • Success toast: Converted and copied for Webflow.
    • Status usually includes: Saved to history.
  5. Paste in Webflow Designer (Cmd+V / Ctrl+V).
  6. If needed, open Flowboard History and restore the saved item again.

Why a JS embed appears (or not)

  • If your snippet has no <script>, no inline event handlers (for example onclick), and no explicit custom nav markers (data-nav-trigger + data-nav-menu), conversion should not create a supplemental JS embed.
  • In custom navbar handling, nav shim JS is only generated when explicit custom nav markers are present.
  • In native navbar handling, compatibility nav shim JS is disabled.
  • Supplemental CSS/JS embeds are emitted as siblings after converted content, not nested inside your navbar/root element.

GSAP to Webflow interactions

Need examples and authoring rules for the highest native mapping rate? See the dedicated GSAP guide.

Flowboard can map some GSAP code from Optional JavaScript... or inline HTML <script> blocks into native Webflow interactions instead of keeping it only as runtime JS.

Current supported shape:

  • Page load, simple click, simple hover, and simple ScrollTrigger triggers.
  • Direct class targets, simple descendants, or #id targets.
  • gsap.from(...), gsap.to(...), gsap.fromTo(...).
  • gsap.set(...) for initial states before mapped entrance tweens.
  • Simple chained and assigned gsap.timeline(...) patterns.
  • Simple named timeline controls using play(), reverse(), or restart().
  • Simple relative timeline positions like "-=0.7" / "+=0.2".
  • Simple ScrollTrigger options with selector/string trigger plus optional start, end, scrub, and once.
  • Simple SplitText usage on class selectors.
  • Basic transform/value properties like opacity, x/y, scale, rotation, skew, and explicit color/background/border states.
  • Full single-file HTML documents with inline style and script blocks.
  • Mixed handlers where supported GSAP maps and extra lines remain supplemental JS.

If mapping succeeds, the conversion report should show mapped GSAP interaction counts.

Avoid for now:

  • Complex ScrollTrigger options like pin, snap, callbacks, or custom scrollers.
  • Selector chains more complex than simple descendant class/id chains.
  • Advanced stagger grids beyond simple amounts.
  • Handlers that depend on unsupported plugin patterns or broad runtime side effects.

AI best practices (important)

If you use ChatGPT/Claude/other AI to generate code, use these rules:

  1. Ask for HTML + vanilla CSS.
  2. Do not ask for Tailwind, Bootstrap, or framework classes.
  3. Ask for class-based selectors (example: .card-title), not complex selector chains.
  4. Ask for simple, explicit values (#111111, 16px, 24px), not CSS variables.
  5. Prefer Flexbox and simple layout rules.
  6. Keep structure semantic and simple: section, div, h1-h6, p, a, span, img, button.

Use this prompt:

Generate clean HTML and vanilla CSS for Flowboard's HTML-to-Webflow converter.

Rules:
- No Tailwind, no Bootstrap, no framework utilities.
- Use semantic HTML and class-based CSS only.
- Keep CSS simple and explicit with literal values.
- Avoid complex selectors and advanced effects.
- HTML, CSS and JS in one file

What to avoid (saves you time)

  • Tailwind utility classes
  • Very complex selectors
  • Blur/filter-heavy effects
  • Gradient/image background tricks
  • Advanced grid tricks (repeat, minmax, fit-content)

Simple code converts more reliably.

Free vs Pro limits

Free plan

  • 3 conversions per day
  • 8,000 total characters per conversion
  • Optional CSS and Optional JavaScript inputs are disabled

Pro plan

  • No daily conversion cap
  • No character cap
  • Optional CSS and Optional JavaScript inputs enabled

Troubleshooting

Nothing pastes into Webflow

  1. Confirm you are pasting into a real Webflow Designer tab.
  2. Try copying a native Webflow element once, then convert again.
  3. Convert a very small test snippet first (one heading + one paragraph).

Output looks wrong

  1. Remove complex CSS effects.
  2. Convert only HTML + basic CSS first.
  3. Re-run with simpler class names and simpler layout.

Button says convert failed

  1. Reduce total input size.
  2. Check Free plan limits.
  3. Remove unsupported CSS/JS and retry.

Golden rule

If you want predictable results: keep your HTML/CSS boring, clean, and explicit. Flowboard works best with simple structure and vanilla CSS.