Webflow Project Syncer

Get autocomplete for your Webflow CSS classes and data attributes in JavaScript/TypeScript.

Sync your published Webflow site's CSS classes locally and get IntelliSense when writing selectors in querySelector, GSAP, or any JS/TS code.

Features

• CSS Class Autocomplete — Type . inside any string and get suggestions for all your Webflow classes
• Data Attribute Autocomplete — Type [data- to see your custom data attributes
• Zero Config — Just add a URL to wf-pages.json and sync
• Works Everywhere — JavaScript, TypeScript, JSX, TSX
• Auto Gitignore — Synced files are automatically added to .gitignore

Quick Start

1. Create a config file

Add wf-pages.json to your project root:

{
  "url": "https://your-site.webflow.io/"
}

Use any published page URL — Webflow shares CSS across the entire site, so one page captures all classes.

2. Sync your Webflow site

Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run:

Webflow: Sync

This fetches your page's HTML and all linked CSS files, extracts the class names and data attributes, and saves them locally.

3. Start coding with autocomplete

// Type '.' after the quote to see class suggestions
document.querySelector(".hero-section");

// Works in GSAP too
gsap.to(".w-container", { opacity: 0 });

// Data attributes work with [data-
document.querySelectorAll("[data-wf-page]");

What Gets Synced

After running sync, a .webflow folder is created:

.webflow/
  index.html           # The fetched page (formatted)
  styles/
    *.css              # All CSS files (formatted)
  classes.json         # Extracted class names
  data-attributes.json # Extracted data-* attributes

These files are automatically added to your .gitignore.

Configuration

The wf-pages.json file supports these options:

{
  "url": "https://your-site.webflow.io/",
  "options": {
    "timeout": 10000
  }
}

Requirements

• A published Webflow site (public URL)
• VS Code 1.108.1 or higher

No Webflow API token needed — the extension fetches from your public site.

Known Limitations

• Only works with published Webflow sites (not staging or unpublished pages)
• Autocomplete triggers inside string literals only
• Re-run sync manually when your Webflow site changes

FAQ

Q: Do I need a Webflow API token? No. The extension fetches from your published site's public URL.

Q: How often should I sync? Whenever you publish changes to your Webflow site that add new classes or data attributes.

Q: Does this work with custom domains? Yes. Use your custom domain URL (e.g., https://www.yoursite.com/) in wf-pages.json.

Q: Why is the CSS formatted? Webflow serves minified CSS. The extension formats it for readability in case you need to reference it.

Contributing

Found a bug or have a feature request? Open an issue.

License

MIT