Component Library guide

Flowboard Component Library Guide

The Flowboard Library stores reusable Webflow-ready components locally so you can copy, convert, capture, restore, and reuse them without rebuilding the same sections again.

Use this when you want an auto-history of recent work, or when you want to save your best components for repeated use across pages and projects.

What the Library does

Flowboard automatically adds components to the Library when you copy an element in Webflow Designer, convert HTML to Webflow, or import a Live Capture.

New items land in Recent first. You can then save the best ones to Saved so they stay available while throwaway recent items are cleared or trimmed.

The Library is stored in chrome.storage.local. Clipboard payloads stay local by default and are not uploaded by the Library.

Quick start

  1. Open Webflow Designer.
  2. Copy an element, convert HTML, or import a Live Capture.
  3. Open Flowboard and go to Library.
  4. Open Recent to find the new item.
  5. Rename it if needed.
  6. Click Save to Library to keep it in Saved.
  7. Click Restore when you want to use it again.
  8. Click back into the Webflow canvas and paste.

If you see Item successfully copied to clipboard, the item is ready to paste into Webflow.

How items get added

Webflow copy

When capture is enabled, Flowboard listens for explicit copy actions inside Webflow Designer. If the clipboard contains a Webflow payload, Flowboard saves it as a Recent Library item.

This is best for native Webflow components you want to reuse later with their Webflow structure, classes, and styles intact.

HTML to Webflow conversion

When you convert HTML in the Convert tab, Flowboard saves the generated Webflow payload in the Library and copies it for Webflow.

This gives you a recent record of converted sections so you can restore a previous conversion without running it again.

Live Capture import

When you import a saved Live Capture from the Capture tab, Flowboard reconstructs the capture, converts it into a Webflow payload, saves it in the Library, and copies it for Webflow.

This makes imported captures reusable after the first import.

Library views

Saved

Saved is for components you intentionally keep. Save components you expect to reuse, such as navbars, hero sections, pricing cards, forms, CTAs, and trusted project-native components.

Recent

Recent is the auto-history. New Webflow copies, conversions, and Live Capture imports appear here automatically. Use it as a working queue, save the useful items, then clear the rest when they are no longer needed.

Component card actions

  • Name field renames the Library item.
  • Save to Library moves a Recent item into Saved.
  • Remove from Saved moves a Saved item back to Recent.
  • Restore copies the item back to the clipboard for Webflow.
  • Delete removes the item from the Library.
  • Unbind CMS appears only on CMS-bound items and prepares a static version for paste.
  • Use as template appears on compatible native navbar items and can seed native navbar conversion.

Some cards also show a tag, class chips, source URL, captured type details in debug mode, or a CMS status badge.

Restoring a component

  1. Open the target Webflow Designer project.
  2. Open Flowboard and go to Library.
  3. Choose Saved or Recent.
  4. Click Restore on the component.
  5. Click into the Webflow canvas.
  6. Paste.

Restore does not delete the Library item. It writes the saved Webflow clipboard payload back to the clipboard so Designer can paste it as native Webflow elements.

CMS-bound components

Some copied Webflow components include CMS bindings from a Collection List, Collection Item, or Collection Page. Webflow may block those components from being pasted outside the original CMS context.

When Flowboard detects CMS data, the card shows Unbind CMS. Use it when you want to paste the component as static Webflow elements.

  1. Enable Unbind CMS on the card.
  2. Click Restore.
  3. Paste into the target Webflow page.
  4. Review text, images, links, and styles after paste.

Unbinding removes CMS references where possible. It does not recreate CMS collections, CMS fields, or dynamic bindings.

Search and cleanup

Use the Library search field to find items by name, tag, class, source URL, CMS state, or host.

Use Clear Recent when you want to remove temporary auto-history items. Saved components are kept.

Use Delete on a card when you want to remove a specific item from either view.

Best practices

  • Rename useful items right after they are captured or converted.
  • Save only the components you expect to reuse.
  • Keep Recent clean so the useful auto-history is easy to scan.
  • Restore into the same project first when testing a complex component.
  • For cross-project reuse, prefer clean native Webflow components and avoid stale project-specific CMS bindings.
  • For CMS-bound items, use Unbind CMS when the target page is not the original Collection List or Collection Page.
  • Keep a saved native Webflow version of key project components when you want Flowboard to match existing project patterns.

Free and Pro limits

Free plan

  • Up to 3 local Library items are kept as new Recent items arrive
  • Up to 2 saved components
  • 2 CMS unbinding restores

Pro plan

  • Unlimited Library items
  • Unlimited saved components
  • Unlimited CMS unbinding restores

The Library trims temporary Recent items first where possible. Saved components are intended to protect your best reusable items.

Full pricing details are on the pricing page.

Troubleshooting

A copied Webflow element does not appear in Recent

  1. Make sure you copied from Webflow Designer, not the published site.
  2. Check that capture is enabled in Flowboard.
  3. Copy the element again and wait a moment before opening Library.
  4. Try copying a simpler element to confirm Webflow clipboard capture is working.

Restore says the clipboard is empty

  1. Click Restore again while the Webflow Designer tab is active.
  2. Click into the canvas before pasting.
  3. If the item came from an older or incomplete capture, copy it again from Webflow and save the newer card.

The pasted component looks different

  1. Check whether the target project already has classes with the same names.
  2. Paste into a blank area first and inspect the classes in Designer.
  3. For converted or captured items, review spacing, images, breakpoints, and interactions after paste.

A CMS item will not paste

  1. Enable Unbind CMS on the card.
  2. Click Restore again.
  3. Paste into the target page.
  4. If Webflow still blocks the paste, copy a smaller child element from inside the CMS item and try again.

Saved components disappeared from Saved

  1. Check the Recent view in case the item was removed from Saved.
  2. On the free plan, only 2 saved components are allowed.
  3. Save the most important components first before clearing Recent.

Clear Recent removed something I wanted

Clear Recent removes unsaved recent items only. Save important items before clearing Recent.

Component Library FAQ

Is the Library the same as History?

It uses the same underlying local storage, but the UI is now organized as a reusable component Library with Saved and Recent views.

Are Library items uploaded?

No. Library items are stored locally by default in Chrome extension storage.

What should I save?

Save components you expect to reuse: project-native navbars, hero sections, cards, forms, CTAs, pricing sections, and clean converted or captured sections.

Can I reuse components across projects?

Often, yes. Native Webflow elements usually restore best. Project-specific CMS bindings may need Unbind CMS, and class name conflicts can still need cleanup in Designer.

Does Restore paste automatically?

No. Restore copies the component back to the clipboard. You still click into the Webflow canvas and paste.

Can I keep converted HTML and Live Capture imports?

Yes. Both are automatically saved as Recent Library items after successful conversion or import. Save the useful ones to keep them.