KoppelSign in

How Koppel works

Write your site’s custom CSS and JavaScript in your own code editor, with the AI you already use. Save a file and your staging site updates. Publish live when it’s right, and your live site gets exactly what you tested. Works with Webflow, Framer and more.

Setup

  • Create a project in the dashboard, one per website.
  • Open it in your editor with “Open in VS Code” (or Cursor, Windsurf). The Koppel extension signs in, downloads the starter files into ~/Koppel/<project> and opens the folder.
  • Add the snippet once (Settings → Installation). In Webflow: Site settings → Custom code. In Framer: Site settings → General → Custom code. Publish your site once; the project page ticks this off when it sees the snippet.

Files

  • Everything in css/ is bundled into one stylesheet, everything in js/ into one script, in alphabetical order. Prefix files with numbers if order matters (01-reset.css).
  • Files in subfolders are only included when you import them, so you can keep helpers and libraries there.
  • Need a script on one page only? Each file is also available on its own. Settings → Installation lists a tag per file.
  • Your code is public once delivered. Never put API keys or passwords in it; the extension warns you if it spots one.

Working with AI

Koppel doesn’t need an AI of its own or API keys: it teaches the AI in your editor (Cursor, Copilot, Claude Code) how your project works. When you open a project, the extension offers to set this up, or run “Koppel: Set Up AI Workflow” anytime. Nothing of it is uploaded.

  • AGENTS.md holds the rules: your domains, how files are bundled, and the workflow. For Webflow that’s “Webflow first”: structure, styles and animations (GSAP timeline) are built in Webflow, so you can fine-tune them in the Designer. Only what Webflow can’t do goes into css/ and js/. Add your own rules under “Your notes”; updates never touch them.
  • MCP servers in .mcp.json and .cursor/mcp.json: the Webflow MCP (sign in with Webflow in the browser the first time) and Chrome DevTools, so the AI can test on staging itself. Existing entries are kept. You need Node.js and Chrome.
  • Skills you start in the AI chat: /koppel-build (plan, build, stage, test), /koppel-test and /koppel-ship (a checklist for going live).
  • The AI never publishes live. It works on staging and ends with a checklist; you press “Publish live”. Editor access can’t change your live site, by design.

Staging and live

  • Saving is always safe. Every save goes to staging only: your *.webflow.io or *.framer.website address (and the Webflow Designer). Reload the page to see the change. In Framer, custom code doesn’t run inside the editor, so test on the published address.
  • Publish live puts exactly what’s on staging on your live site as a new version (v1, v2, …). No need to republish your Webflow or Framer site.
  • Restore puts any earlier version back live within about a minute. Right after publishing you can also press “Undo” in the notice.
  • For publishing live and deleting, the dashboard asks for a fresh login code if your last sign-in is older than 24 hours. Each publish is emailed to the project’s owners and admins.
  • Staging and live domains are set per project under Settings. Wildcards like *.webflow.io work.

Teams

  • Workspaces hold projects. You start with a personal one; create more from the workspace menu at the top, for example one per agency or client.
  • Invite people under Settings → Team. The link works for 7 days and only for the invited email address.
  • Roles: members open projects in their editor and save to staging. Admins also publish live, change settings and invite people. Owners manage roles.

Emergencies

  • Pause custom code (Settings → Emergency & delete) delivers empty files: your site keeps working, just without Koppel’s CSS and JS.
  • Code editors (account menu) lists every editor with access. Sign out anything you don’t recognize.

Troubleshooting

  • Nothing syncs and the status bar says “Restricted Mode”: VS Code doesn’t trust the folder yet. Choose “Trust”, then save again.
  • Changes don’t show on staging: check that the snippet is in the head of the page and that your domain is listed as a staging domain. Hard-reload once.
  • Live site shows old code: your live site only changes when you publish live. The loader is cached for up to a minute.
  • Build error: the status bar turns red and the Problems panel shows where. Staging keeps the last working build, so your site never breaks.

Beta

Koppel is in private beta and free. Found a bug or missing something? Send us feedback.