You can add JavaScript libraries to your Pen through the JavaScript settings menu.

There are two ways to access the JavaScript settings menu. For quickest access, click the gear icon in the upper left of the JS editor panel.

That opens the Pen Settings menu with the JavaScript tab automatically selected.

Or, click the “Settings” button in the header, then select the JavaScript tab from the Pen Settings menu.

Search for a JavaScript Library

Start typing the name of the JavaScript library and search will auto-suggest matching libraries as you type. Click the library you want to use to add it to your Pen.

Add your own JavaScript library

You can also add a JavaScript library from another website, another Pen, or from your Assets if you have a PRO account read more about Asset hosting here.

Link JavaScript from another Pen

To link JS from another Pen, use the Pen’s Editor View /pen/ URL as a JavaScript link, like this:

Note that the JS from the other Pen won’t carry its dependencies over with it. For example, if the Pen you’re linking to requires jQuery, you’ll need to add jQuery to your new Pen. If the Pen you are linking up uses a preprocessor (e.g. CoffeeScript) it will process it into JavaScript before adding it. You may add .js to the end of the URL if you like, but leaving it off works as well (it will know that because you put the URL in as a JavaScript External Resource, you’re trying to use the JavaScript from that Pen).

Removing a JavaScript Library

If you want to remove a library or other external JavaScript, click the × to the right of the URL input.


You don’t need to use DOM ready statements (e.g. $(function() { }); in jQuery). We insert your authored JavaScript at the end of the <body>, so the DOM is already ready! If you need to wait for window load, you’ll need to use something like $(window).load(function() { });