Overview
Enhance your projects by adding:
- External Scripts - JavaScript libraries from CDNs
- External Stylesheets - CSS frameworks and themes
- Web Fonts - Google Fonts and custom fonts
- CSS Presets - Popular CSS frameworks
Adding External Resources
Open Resources Panel
Click Menu → External Resources
Add URLs
Enter CDN URLs for scripts or stylesheets (one per line)
Apply
Click Load Resources to apply changes
External resources are loaded before your code runs, ensuring libraries are available when needed.
External Scripts
Add JavaScript libraries:
Access in your code:
// jQuery is now available globally
$('button').on('click', () => {
console.log('Clicked!');
});
// Lodash utilities
const unique = _.uniq([1, 2, 2, 3]);
// Axios for HTTP requests
axios.get('/api/data').then(console.log);
External scripts add global variables. For ES modules, use module imports instead. External Stylesheets
Add CSS frameworks and styles:
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css
https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
<button class="btn btn-primary">Bootstrap Button</button>
<h1 class="animate__animated animate__bounce">Animated Title</h1>
<p style="font-family: 'Roboto', sans-serif">Custom Font</p>
CSS Presets
Quickly add popular CSS frameworks:
Normalize.css
CSS reset for consistency GitHub Markdown
GitHub-style markdown renderingPreset: GitHub Markdown CSS
Selecting Presets
Open External Resources
Navigate to Menu → External Resources
Choose Preset
Select from available CSS presets
Apply
The preset CSS is automatically loaded
NPM Package Search
Search and add packages directly from npm:
Search
In the External Resources panel, use the search box: Browse Results
See package details, versions, and available files
Add Files
Click JS or CSS to add to your project:
- JS files → External Scripts
- CSS files → External Stylesheets
The search shows the default CSS and JS files from jsDelivr for each package.
Google Fonts
Add web fonts easily:
Select Font
In External Resources, open the Fonts section
Choose from Dropdown
Select from popular Google Fonts:
- Roboto
- Open Sans
- Lato
- Montserrat
- And many more…
Add to Project
Click Add to include the font stylesheet
Use in CSS
body {
font-family: 'Roboto', sans-serif;
}
Custom Font URLs
Add any font stylesheet URL:
https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap
https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap
Common Libraries
UI Frameworks
Bootstrap
Tailwind CSS
Bulma
Foundation
Script: https://cdn.tailwindcss.com
Utility Libraries
Animation Libraries
Icon Libraries
Font Awesome
Material Icons
Bootstrap Icons
https://fonts.googleapis.com/icon?family=Material+Icons
Load Order
External resources are loaded in this order:
Stylesheets First
All external stylesheets are loaded in the <head>
Then Scripts
External scripts are loaded before your code
Your Code Last
Your markup, styles, and scripts run after external resources
This ensures all libraries and styles are available when your code executes.
Configuration
External resources in project config:
{
"stylesheets": [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://fonts.googleapis.com/css2?family=Roboto&display=swap"
],
"scripts": [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
],
"cssPreset": "normalize.css"
}
Best Practices
Use CDN URLs
Prefer reliable CDNs like jsDelivr, cdnjs, or unpkg
Pin Versions
Specify exact versions for consistency: HTTPS Only
Always use HTTPS URLs for security
Minimize Resources
Only add what you actually use
Too many external resources can slow down your project. Use ES module imports when possible.
Troubleshooting
- Check URL is correct and accessible
- Verify HTTPS (not HTTP)
- Check browser console for errors
- Try different CDN
- Ensure script is in External Scripts (not ES module)
- Check load order
- Verify global variable name
- Verify CSS URL is correct
- Check for CSS conflicts
- Inspect element to see applied styles