Better Webflow Custom Code with VS Code, Node.js, Parcel.js & GitHub

Nov 17, 2022
20 Minutes
Webflow custom code and visual studio tutorial
Writing custom code in the Webflow GUI is both impractical and severely limited - this guide will run you through how to set up a proper development pipeline, using Visual Studio Code, Node.js, Parcel.js, and GitHub Pages.

0. Overview

This guide is building on the knowledge acquired from these great tutorials:

🤔 The why:

If you’ve done any kind of custom coding using Webflow you’ve likely encountered some or all of the following pain points:

  • Poor syntax highlighting
  • No autocomplete
  • Endless clicking through menus to edit/publish your code
  • Waiting for the site to re-publish every time you make any change to the code
  • Character limits
  • Having to upload code to a CDN
  • Can’t use NPM to easily install libraries
  • Can’t easily segment code into individual files, leading to a bloated, endless file or lots of script-src to keep track of
  • No integration with GitHub or robust version control/collaboration tool

This article will show you how to tackle all of these, allowing you to efficiently inject advanced functionalities and effects into your Webflow site. Let’s get into the How!

1. Prerequisites

2. Setting up LocalHost + Webflow using Parcel.js

  1. Create a new GitHub Repository and make it public
  2. Clone your Repository to your desktop
  3. Open your Repository in VS Code and create a new app.js file
  4. Open the integrated terminal (Ctrl+Shift) and make sure you have downloaded & installed node & npm
  5. Initialize NPM, by running npm init in the terminal
  6. Install Parcel.js, by running npm i parcel in the terminal
  7. Before you commit to your Git Repo, make sure to create a .gitignore with the following so that we don’t track our cache or node_modules
    # dependencies
    # misc

  8. A package.json was created in step 5 let’s add a run command to it so we can simply run npm start in the terminal to package our app and serve it on localhost.
      "scripts": {
        "start": "parcel app.js --hmr-port 50619"
    We specify a WebSocket port to avoid potential connection errors

      "name": "repo-name",
      "version": "1.0.0",
      "description": "repo description",
      "main": "app.js",
      "scripts": {
        "start": "parcel app.js --hmr-port 50619"
      "repository": {
        "type": "git",
        "url": "git+"
      "author": "Author Name",
      "license": "ISC",
      "bugs": {
        "url": ""
      "homepage": "",
      "dependencies": {
        "parcel": "^2.7.0",
    Complete package.json file should look something like this

  9. Run npm start we’ll see that our parcel server is running at http://localhost:1234/
  10. We can now add the following to the Webflow project’s head custom code section and publish our Webflow site:
    <script src="http://localhost:1234/app.js"></script>
  11. Now as long as your parcel.js localhost server is running, any saved change to app.js will be reflected when you reload your Webflow site in your browser - no need to re-publish your project every time.

    To check this is working try adding an alert to
    alert('Hello World')

  12. You can now use NPM to install libraries, split your code into multiple files and import files into your code:
    import {Curtains, Plane, RenderTarget, PingPongPlane, ShaderPass} from 'curtainsjs';
    import {TextTexture} from './TextTexture';
    import sliderShader from './sliderShader';
    import textShader from './textShader';
    import ThreeD from './3d';
    import svg from './svg.glb'
    import glb from './icon.glb'
    Importing from libraries, other files.js, a vector.svg and a 3D mesh.glb
  13. You may want to import files which parcel doesn’t know how to parse/transform:
    @parcel/core: No transformers found for icon.glb.
    Error message when trying to import a .glb 3D file

    If so you’ll have to add a .parcelrc file with something like the following:

        "extends": "@parcel/config-default",
        "transformers": {
            "*.glb": ["@parcel/transformer-raw"]
    .parcelrc content for transforming .glb files

    Importing assets this way is likely fine while developing or for small files like simple .svg and .glb with no textures - for production, you likely want a proper CDN to handle 100s or 1000s of kb

3. Hosting our Code using GitHub Pages

Great, we can develop our custom code locally - now let’s get it live using GitHub pages so we can share our work with the team/client.

This setup relies on a public repository, make sure you are not handling any sensitive data in your code.

  1. Got to your and navigate to your repository settings > general

  2. Make sure the repository visibility is set to public if it isn’t already - look at the bottom of the settings page settings > general > Danger Zone

  3. In settings > pages create a site from your main branch /root

  4. Once your site is live, your parceljs-bundled app.js (and every other tracked file) will be hosted under your page domain, something like:

  5. At the top of your app.js define the following variable - we will use this to check if our parceled app is loaded
    const parceled = true

  6. In our Webflow project, we can now add some logic so that if localhost:1234/app.js isn’t available the site will pull the address with the bundled app.js from GitHub Pages:
    <script src="http://localhost:1234/app.js"></script>  
    <!-- tries to load from local host -->
    if(typeof parceled === 'undefined') {
    		let script = document.createElement('script')
    		script.type = 'text/javascript'
    		script.src = '';
    //checks if the parceled variable from app.js is undefined - meaning local host isn't up and running
    //if not loads from the github pages
    Make sure to point to the bundled file in repo-name/dist/app, not repo-name/app.js

    This allows us to work locally from localhost and make changes without temporarily breaking the site for users, or having to make any edits to the Webflow project’s Head Code.

  7. Every time we commit our code to main (or whatever branch we set our GitHub page to publish from in 3.) our app.js will update and so will our Webflow site.
    Ensure you’ve run npm start before committing so that dist/app.js is up to date

All done! Once your code is 100% done, you may want to host your app.js on a proper CDN rather than GitHub pages to ensure top speed - but this quick and efficient setup should be more than enough during development and for small-scale or personal projects.