Overview
LiveCodes provides seamless NPM package imports with:
- Automatic module resolution from multiple CDNs
- ES Module support for modern JavaScript
- TypeScript definitions loaded automatically
- No build step required - imports work instantly
Import Syntax
Basic Imports
Import any NPM package using standard ES Module syntax:
import React from 'react';
import { useState } from 'react';
import _ from 'lodash';
import dayjs from 'dayjs';
Version Pinning
Specify exact versions:
Always pin versions in production projects for consistency.
Subpath Imports
Import from package subpaths:
import { format } from 'date-fns/format';
import Button from 'antd/lib/button';
import 'tippy.js/dist/tippy.css'; // CSS imports
CDN Prefixes
Explicitly specify which CDN to use:
esm.sh (Default)
Skypack
jsDelivr
UNPKG
import React from 'esm.sh:react';
import _ from 'npm:lodash'; // Also uses esm.sh
import React from 'skypack:react';
import React from 'jsdelivr:react';
import React from 'unpkg:react?module';
Supported CDNs
ES Module CDNs
esm.sh
Fast, global CDN with smart module resolutionimport pkg from 'esm.sh:package';
Skypack
Optimized, cached ES modulesimport pkg from 'skypack:package';
jsDelivr ESM
High-performance, reliable CDNimport pkg from 'jsdelivr.esm:package';
JSPM
Import maps and module CDNimport pkg from 'jspm:package';
NPM CDNs (for Assets)
// Load non-module resources
const url = 'jsdelivr:[email protected]/dist/css/bootstrap.min.css';
const url2 = 'unpkg:normalize.css';
Available NPM CDNs: jsDelivr, UNPKG, npmcdn, and their mirrors.
GitHub CDNs
Load files directly from GitHub:
import Component from 'jsdelivr.gh:user/repo@tag/file.js';
import script from 'statically:user/repo/main/script.js';
Advanced Features
Import Maps
Define custom import mappings:
// In project configuration
{
"imports": {
"react": "https://esm.sh/[email protected]",
"@/components": "./components/index.js",
"utils/": "./utils/"
}
}
import React from 'react';
import Button from '@/components';
import { helper } from 'utils/helpers.js';
External Dependencies
Mark dependencies as external to reduce bundle size:
import { useState } from 'react#nobundle';
Use #nobundle to prevent bundling and use the CDN version directly.
JSR Packages
Import from JavaScript Registry:
import { someFunc } from 'jsr:@scope/package';
Package.pr.new
Test package previews:
import pkg from 'pr:user/repo/123';
import pkg from 'pkg.pr.new:user/repo/123';
TypeScript Support
Automatic Type Loading
LiveCodes automatically loads TypeScript definitions:
import React, { useState } from 'react';
// ^? - Full TypeScript IntelliSense
const [count, setCount] = useState(0);
// ^? - Type: number
Type-Only Imports
import type { ComponentType } from 'react';
import type { Request, Response } from 'express';
Package Hover Info
Hover over any import to see:
- Package name and version
- Description
- Links to: npm, GitHub, Skypack, jsDelivr, Bundlephobia
Configuration
Default CDN
Set the default CDN in app settings or project config:
{
"customSettings": {
"defaultCDN": "skypack" // or "jsdelivr", "unpkg", etc.
}
}
Custom CDN
Use a custom CDN URL:
https://livecodes.io/?appCDN=jsdelivr
Best Practices
Pin Versions
Always specify versions for production: Use esm.sh for Compatibility
esm.sh handles complex dependencies and CommonJS conversion:import moment from 'esm.sh:moment'; // CommonJS → ESM
Minimize Dependencies
Only import what you need:import { debounce } from 'lodash/debounce'; // Not entire lodash
Test CDN Availability
If one CDN is slow, try another:import pkg from 'jsdelivr:package'; // Fallback CDN
Common Patterns
React Application
import React from 'react@18';
import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
export default function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(setData);
}, []);
return <div>{JSON.stringify(data)}</div>;
}
Using Utility Libraries
import _ from 'lodash';
import dayjs from 'dayjs';
import axios from 'axios';
const users = [
{ name: 'Alice', joined: '2024-01-01' },
{ name: 'Bob', joined: '2024-02-15' }
];
const sorted = _.sortBy(users, (u) =>
dayjs(u.joined).unix()
);
const response = await axios.get('/api/users');
CSS Imports
import 'normalize.css';
import 'tippy.js/dist/tippy.css';
import '@/styles/main.css'; // From import map
Troubleshooting
- Check package name spelling
- Verify package exists on npm
- Try different CDN:
skypack:package or jsdelivr:package
- Check browser console for specific error
Type definitions not loading
- Types load automatically for popular packages
- Some packages don’t have types
- Install
@types/package if available:
import pkg from 'package';
// Types from esm.sh/@types/package
Use esm.sh which converts CommonJS to ESM:import pkg from 'esm.sh:commonjs-package';
- Use version pinning for better caching
- Try different CDN
- Consider bundling dependencies
CDN Comparison
| CDN | Best For | Speed | Features |
|---|
| esm.sh | Complex deps, CommonJS | Fast | Auto-conversion, types |
| Skypack | Modern ESM | Very Fast | Optimized, cached |
| jsDelivr | Reliability | Fast | Global, stable |
| UNPKG | Simplicity | Medium | Basic, straightforward |