By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
Quick hacks

Webflow Custom Code Character Limit: Two Solutions

Writing and managing custom code in Webflow can be challenging. It can be very easy to quickly go over the 10,000 on-page custom code character limit, or the 20,000 project level custom code character limit. In this short article, I will go through two solutions.

To help illustrate these solutions, I have put together a very simple Webflow site, whereby if you click the button, a custom JavaScript file will run and an alert will pop up.

The JavaScript file has been expanded to be 10,108 characters long.

Solution 1: Host in Webflow Assets

  1. The first thing you want to do is copy/cut all the custom code and paste it into a new file in whatever code editor you use. In this example I'm using VS Code.
  2. Don't include <script> tags in the code you've pasted.
  3. Save the file as a .txt file.

  1. Upload the file to your Webflow assets folder.

  1. Copy the file's asset link.

  1. In the on-page custom code area, or in an embedded custom code box set up <script> tags and be sure to include type="text/javascript". Paste the copied asset link in as the "src" attribute's value.
  1. Publish your page and your code will work. If you inspect your page using Dev Tools you will see the functioning <script>

Solution 2: Host with GitHub & JSDelivr

  1. Assuming you have a functional GitHub account, login to it, and create a new repo.

  1. Give it a name and description & then upload the custom JavaScript file you need hosted.

  1. Commit the changes.
  1. To use JSDelivr as the CDN - the template URL is:

         So in this case:

  1. Add the above into a couple of <script> tags either in the main project custom code area, the on-page custom code area, or an embed code box. Like so:

  1. Publish your project and it should read the code perfectly.

* A note about updating / editing your code

An important addendum to the JSDelivr solution, is that if you make changes to your GitHub hosted JavaScript code, you need to commit these either as a new file, or more simply on a new branch. This is because JSDelivr fetches the code only once from GitHub as they state in their documentation:

To get around this, you can use branches. Here is what that looks like:

  1. Click on the branch drop-down menu and type in the name of a new branch. Click to create this new branch. Your current code will be in the new branch.

  1. Making sure the new branch is selected from the dropdown menu, click on the pencil icon to edit the code.

  1. Write or paste in your code changes and then commit your changes to the new branch.

  1. Update the <script> "src" attribute in your Webflow project to include the branch after the repo name like so:

<script src="" type="text/javascript"></script>

  1. If you then inspect the code, you will see that it is now utilising the updated version of your code from the new branch:

You're all caught up.
There are no more recent posts.
That's everything.
There are no more articles, you've read them all!