I built a VSCode extension
The Problem
If you've ever built custom JavaScript or animations on top of a Webflow site, you know the workflow: hop over to Webflow, copy a class name, hop back to your code editor, paste it in. Repeat fifty times. Miss a character somewhere and spend ten minutes debugging why .hero-secton isn't selecting anything. (bonus points if you saw the typo)
Webflow is fantastic for visual design, but when it comes to writing JavaScript that targets those elements, you're flying blind. No autocomplete. No IntelliSense. Just copying and pasting class names and hoping you got them right.
The Solution
I built Webflow Project Syncer, a VSCode extension that solves this by syncing your published Webflow site locally and providing autocomplete for:
- CSS classes: Type
.inside a string and see all your Webflow classes - Data attributes: Type
[data-and see your custom data attributes
It works in JavaScript, TypeScript, JSX, and TSX. No Webflow API token required.
How It Works
The extension fetches your published Webflow page, extracts all the CSS files, parses out the class names and data attributes, and stores them locally. VSCode's IntelliSense then picks these up and offers them as suggestions while you code.
// Type '.' and get suggestions
document.querySelector(".hero-section");
// Works with GSAP
gsap.to(".w-container", { opacity: 0 });
// Data attributes too
document.querySelectorAll("[data-wf-page]");Where to Find It
The extension is available on the VSCode Marketplace:
Or search for "Webflow Project Syncer" in the VSCode extensions panel.
How to Install
- Open VSCode
- Go to the Extensions panel (
Cmd+Shift+X/Ctrl+Shift+X) - Search for "Webflow Project Syncer"
- Click Install
How to Use
Step 1: Create the config file
Add a wf-pages.json file to your project root:
{
"url": "https://your-site.webflow.io/"
}
Use any published page URL from your Webflow site. Since Webflow shares CSS across the entire site, one page is enough to capture all your classes.
### Step 2: Sync
Open the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) and run: Webflow: Sync
The extension fetches your page, extracts all CSS classes and data attributes, and stores them in a .webflow folder (automatically gitignored).
Step 3: Code with autocomplete
Start writing your JavaScript. When you type . inside a string, you'll see your Webflow classes. When you type [data-, you'll see your data attributes.
That's it. No more copy-pasting. No more typos.
Final Thoughts
This was a fun project that scratched my own itch. If you work with Webflow and write custom JavaScript, give it a try.
Introducing Swiperflow
Attribute based swiper library. Create custom, CMS & Static sliders with just attributes.
Managing UI State in Webflow with JavaScript
A concise introduction to front-end reactivity, showing why data should control the UI and how to create and watch reactive variables using Vue’s reactivity system, with practical examples.
Using HonoJS with your reverse proxy
Hono.js replaces messy if/else chains with clean, readable routing to build a reverse proxy that scales
Reverse Proxy First Steps
In the next ~30 minutes, you'll have two different sites running under one URL.
Webflow Reverse Proxy Overview: What It Is, Why It Matters, and When to Use It
Reverse proxies are the gateway drug to Webflow Enterprise. Almost every enterprise project I’ve been involved in has implemented it in some form.
Building a Webflow to Algolia Sync with Cloudflare Workers
Build an automated sync between Webflow's CMS and Algolia's search service using Cloudflare Workers.
Using Videos Effectively in Webflow (Without Losing Your Mind)
If you’ve ever used Webflow’s native background video component and thought “damn, that looks rough” I'm here for you.
Webflow + Cloudflare reverse proxy. Why and How
As more companies move to Webflow and demand for Webflow Enterprise grows, you’ll see more teams leaning on reverse proxies to solve some of Webflow’s infrastructure limitations.
How (and why) to add keyboard shortcuts to your Webflow site
A small keyboard shortcut can make a marketing site feel faster, more intentional, and “app-like” with almost no extra design or development
Useful GSAP utilities
A practical, code-heavy dive into GSAP’s utility functions—keyframes, pipe, clamp, normalize, and interpolate—and why they’re so much more than just shortcuts for animation math.
Using Functions as Property Values in GSAP (And Why You Probably Should)
GSAP lets you pass _functions_ as property values. I've known this for a while but never really explored it particularly deeply. Over the last couple of weeks I've been testing, experimenting and getting creative with it to deepen my understanding.
Organising JavaScript in Webflow: Exploring Scalable Patterns
Exploring ways to keep JavaScript modular and maintainable in Webflow — from Slater to GitHub to a custom window.functions pattern. A look at what’s worked (and what hasn’t) while building more scalable websites.