Docs Index

Doc

Frontend Frameworks for HTML/CSS/JS

Last updated on

Adding NPM Libraries to HTML/CSS/JS

In order to add an npm library to your HTML/CSS/JS Pads, you’ll need to utilize a CDN such as UNPKG and add UMD script tags into your HTML head tag.

Using this method, we’re able to demonstrate embedding popular libraries such as:

You’re even able to use Babel to transpile yet-unavailable ECMAScript proposals in a Pad to work in your browser.

Setting Up a New Library

Let’s use RxJS as an example. First, you should start by looking for any documentation for “Installation” or “Setup”. Usually, if a library supports in-browser usage, they’ll disclose that there.

You’re looking for anything that mentions “Bundle”, “UMD”, “CDN” or “In Browser” usage. 

Oftentimes, when documenting the bundle location, they’ll also mention what the global variable to reference the library is. This global variable is then used in place of “import”s or “require” statements

For this example, we’ll copy and paste the CDN URL and place it inside of the HTML Pad’s <header> tag. The URL should be inside of a “script” tag within the “src” attribute.

<html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script> </head> <body> <!-- Etc --> </body> </html>
Code language: HTML, XML (xml)

Once done, you’ll use the global variable in a “body” “script” tag.

<body> <div id="root"></div> <script> const { interval } = rxjs; </script> </body>
Code language: HTML, XML (xml)