Koppel

Edit your site's custom CSS and JavaScript in VS Code, Cursor or Windsurf, by hand or with the AI you already use (Claude, ChatGPT, Copilot or Cursor). Every save is live on staging within a second. Publish when it's ready, roll back in one click.

Made for designers and no-code developers who want custom code in Webflow or Framer without a build setup. No API keys, no extra AI subscription.

Private beta, starting soon. Koppel is free during the beta. Join the waitlist and we'll email you when there's a spot for you. You can install the extension now; signing in works once you're in.

Made for

Designers who build with AI. You know what the site should do, and your AI writes the code. Koppel makes sure it lands in the right place: staging first, never straight on your client's live site. You see where it arrived, and one click takes it back.

Webflow and Framer developers. GSAP, Lenis, Swiper, your own components, in real files with your editor, Git and AI. No 50,000-character limit, no Webflow republish for every console.log, versions and rollback built in.

Studios and agencies. Every client site in one dashboard. Invite your team, decide who may publish live, and see who published what and when.

Your AI, set up for your site

Open a project and Koppel offers to set up your AI. It then knows your domains, how your files become code on the site, and one rule: build in Webflow first, code only the rest.

• Works with the AI you already pay for: Claude Code, ChatGPT (Codex), GitHub Copilot and Cursor. Koppel adds an AGENTS.md that all of them read, with no message limits.
• Builds in Webflow, not around it: with the Webflow MCP, the AI creates structure, classes and GSAP interactions directly in the Designer, so you can fine-tune them there. Only what Webflow can't do goes into css/ and js/.
• Tests its own work: with the Chrome DevTools MCP, the AI opens your staging site, checks the console, takes screenshots at every breakpoint and clicks through the interaction.
• Never publishes live: the AI finishes with a short "Ready to go live" checklist. You press the button.

Prefer to write the code yourself? Skip the setup; everything else works the same.

Try it in your AI chat:

/koppel-build Make the pricing cards fade in one after another when they scroll into view
/koppel-build Add a sticky header that hides on scroll down and comes back on scroll up
/koppel-test Check the homepage on mobile

How it works

1. Create a project at koppel.treo.studio and paste one snippet into your site settings, once.
2. Open it in your editor with "Open in VS Code" or "Open in Cursor". The extension signs in and opens the project folder.
3. Save, and it's on staging. Your *.webflow.io or *.framer.website address shows the change after a reload. Your live site stays as it is.
4. Publish live in the dashboard when staging looks right. Your live domain gets exactly what you tested, without republishing Webflow or Framer. One click takes you back.

What else you get

• "Did it arrive?" The status bar shows when a save is on staging. The dashboard shows on which domains your snippet runs.
• Clear errors: if the code doesn't build, staging keeps the last working version and the Problems panel shows what's wrong.
• Secret warnings: Koppel warns you before you deliver something that looks like an API key, because website code is public.
• Your files stay yours: everything is a normal folder on your computer. No lock-in.
• Safe by design: your editor and your AI can only change staging. Publishing live needs the dashboard and a recent sign-in.

Works with

• Sites: Webflow and Framer, plus anything that can load a script tag (Shopify, WordPress, Squarespace, plain HTML).
• Editors: VS Code, Cursor and Windsurf.

Commands

• Koppel: Open Project…
• Koppel: Set Up AI Workflow
• Koppel: Sync Now
• Koppel: Publish Live… (opens the dashboard)
• Koppel: Open Dashboard
• Koppel: Sign Out

Privacy

The extension uploads the files of Koppel project folders to Koppel when you save. It keeps its sign-in in your system keychain and sends no usage analytics. The AI setup files stay on your computer. Details: privacy policy.

Questions or feedback: koppel@treo.studio