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.

After you've added your library (or libraries), be sure to press the green "Save & Close" button below the settings panel to save your library selection.

Quick-add a popular JavaScript library

We have a selection of ready-made script links for popular libraries on the quick-add menu. Select a library and it will autofill one of the JavaScript fields with a link to the latest version of that library.

By default there are two spaces for JavaScript libraries, but you can add another by clicking the "add another resource" button below the script links.

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. Be sure to save your changes.


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() { });