Webflow support custom code in HTML Embed areas, as well as in page-level and site-level custom code areas.
However, these areas have a size limit, are difficult to access and inconvenient to develop in.
While there are some hacks such as uploading your JS as .txt files, none of these are really suitable for development work. It's well worth your time to invest in learning the real tools that will work for you.
Free JavaScript Hosting
If you want to host a JavaScript file for free, there are several reliable options available. In general you should think of this as two parts;
- The code storage repository
- The code delivery network ( a form of CDN )
Here are some of the best combinations;
- GitHub + jsDelivr
- GitHub + Netlify
Finsweet has a walkthrough of this process.
https://www.youtube.com/watch?v=GEodIxXdmnY&ab_channel=Finsweet
Understanding the Pieces
GitHub
Github has a built-in editor, full history, and excellent user control. To serve the content you have several options;
- GitHub Pages: If your JS file is part of a project, you can host it using GitHub Pages. It's primarily for static site hosting, but you can link to individual files, including JavaScript files.
- Raw GitHub Content: You can also link directly to the raw content of a JS file in a GitHub repository. However, the domain (raw.githubusercontent.com) does not send the correct content type for JS files by default, so it's not always suitable for direct inclusion as a script on other sites.
- jsDelivr ( see below )
- Netlify ( see below )
jsDelivr
A free public CDN that can serve files from npm packages or directly from GitHub repositories. It's optimized for loading speed and can be used to host and serve your JS files.
Netlify
With Netlify, you can drag and drop your project, and it will be hosted for free. It's great for hosting static sites, but you can also use it to serve individual JS files.
It can also be directly connected to a public Github repo, and auto-publish from it. Private repos are also available on a paid Netlify plan.
Vercel
Another platform similar to Netlify. Vercel provides hosting for static files and JS-based projects like those made with Next.js.
Glitch
Glitch allows you to write, share, and remix code for fun and practical purposes. You can host full web applications, but it's also feasible to serve individual JS files.
Firebase Hosting
Part of Google's Firebase suite of tools, Firebase Hosting offers free hosting for static assets, including JS files.
CDNJS ( by permission )
A community-driven CDN which hosts many popular JavaScript libraries and plugins. If your JS file is a library or tool that others might benefit from, you can request its inclusion on CDNJS.
Development-Time Hosting
During development, these are other great options which support an Interactive Development Environment ( IDE ). This allows you to code freely, and then immediately save and view the results in your Webflow site without having to update script in your site's custom code area.
However these options may not be entirely free.
Codepen.io
Offers a nice built in editor, and delivers any file type by CDN, however it has no history or ability to revert changes, and not designed for team use.
Codepen pro allows you to directly serve your JS and CSS files so that they can be referenced in your Webflow site.
Codesandbox
Similar to Codepen but a bit beefier on project management.
GitHub Codespaces
Codespaces is one of our favorite frameworks today. It involves a bit of knowledge and setup, however if you do real development on Webflow we consider it a non-negotiable part of the equation.
