Running a JS package through npm on Webflow

Hello! Hope everything is well.

I am having some trouble understanding how to run a certain script (fontsampler-js โ€” A configurable standalone webfont type tester for displaying and manipulating sample text in the browser.) in Webflow using npm. I am a bit novice when it comes to dependencies and such, so any help is more than appreciated :slight_smile:

Thank you and stay safe!

You will not be able to install a NPM package on a Webflow hosted site. NPM is a tool that allows you to import dependencies into projects for which you control the build. Webflow does not allow any server side access so you will not be able to do this.

If you want to use external libraries with Webflow you have 2 options:

  • Pull the library in via a https script include from a CDN (or your own hosting).
  • Find the build output code for the library and add it directly into your Webflow site via the custom code options. In Github repos, you will often find this in a directory called dist.

In your case I canโ€™t see a CDN hosting the library, but the build files are right here in the dist directory their repo. You probbaly just want the minified versions of these, so copy the contents of these files into script (for the JavaScript files) and style (for the CSS file) tags in your Webflow site.

2 Likes

Thank you so much for the explanation! Will try it out asap :slight_smile:

I just tried to copy the contents of the minified files into the custom-code section of my page, but apparently I canโ€™t due to the character limit. Am I missing something?

No, Webflow has a custom code limit of 10000 characters. You could try putting the CSS in the head code and the JavaScript in the body code to see if you can get around it.

Failing that you can host your these files somewhere else free (Github pages, Netlify, Firebase, etc) and load them as https script / link includes.

1 Like

Thank you for the explanation! Will try asap :slight_smile:

Do you have experience with any of those? My head is a mess at the moment :S

I just found out about this website fontsampler-js CDN by jsDelivr - A CDN for npm and GitHub and I think I finally put everything in place :slight_smile:

You can also change the javascript file extension from js to txt, upload them to assets and use that link as the script src. It sucks that it cannot be done with css files though.

Hey thatโ€™s good, should be problem solved then since you found a CDN that already hosts this.

Definitely it should work like that! I saw somebody else doing the same thing, so I will try if neede d :slight_smile:

To clarify, NPM is a node package manager. It still can generate JS which can be used frontend-side.