Write Webflow custom code in VS Code, or any editor.

Why your own editor

The custom code fields in Webflow are fine for a few lines. Once a project grows, you want files, version control, a bundler and the editor you already know. The hard part is testing: the code has to run on the Webflow site, and publishing for every change is slow and visible to visitors.

Stagepass closes that gap. Your files stay on your Mac, and only your browser loads them on the live URL.

Prepare the folder

Use any project structure. What matters is the folder with the built files, for example dist/ or js/. Vite, Webpack and plain files all work.

my-awesome-project/
  src/app.ts
  dist/js/app.js
  dist/css/styles.css

Serve it locally

1. Install the CLI
   Terminal Copy

   $ npm install -g @stagepass/cli

2. Run setup once
   Terminal Copy

   $ stagepass setup
   $ stagepass start

3. Link the folder
   Terminal Copy

   $ cd my-awesome-project/dist
   $ stagepass link my-project

   The folder is now at https://my-project.sp with valid SSL.

Add the loader

Add the loader to Project Settings, Custom Code, Head Code, and publish once. From now on you only publish when you deploy.

<script src="https://cdn.jsdelivr.net/npm/@stagepass/loader@2/dist/loader.min.js"></script>

Tag your files

Point data-src at the production file, for example on jsDelivr, and data-stagepass-path at the same file in your folder.

<script
  data-src="https://cdn.example.com/app.min.js"
  data-stagepass="true"
  data-stagepass-path="js/app.js"
></script>

Test on the live URL

Open the site with ?stagepass=my-project.sp. Edit a file, build, reload. The flag in the top right corner shows that local files are active.

Next steps