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:
https://codepen.io/mariemosley/pen/RWMBKG.jsTwo things to note here:
- The dependencies from the linked-up Pen won’t carry over. It’s just the raw JavaScript code from that Pen.
- These URLs don’t work off-CodePen.
Removing a JavaScript Library
If you want to remove a library or other external JavaScript, click the × to the right of the URL input.
Notes
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() { });