Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/live-codes/livecodes/llms.txt

Use this file to discover all available pages before exploring further.

​
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';
LiveCodes automatically resolves these imports to CDN URLs.

​
Version Pinning

Specify exact versions: 
import React from 'react@18.2.0';
import lodash from 'lodash@4.17.21';
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: 
import React from 'esm.sh:react';
import _ from 'npm:lodash'; // Also uses esm.sh

​
Supported CDNs

​
ES Module CDNs

esm.sh

Fast, global CDN with smart module resolution
import pkg from 'esm.sh:package';

Skypack

Optimized, cached ES modules
import pkg from 'skypack:package';

jsDelivr ESM

High-performance, reliable CDN
import pkg from 'jsdelivr.esm:package';

JSPM

Import maps and module CDN
import pkg from 'jspm:package';

​
NPM CDNs (for Assets)

// Load non-module resources
const url = 'jsdelivr:bootstrap@5.3.0/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/react@18.2.0",
    "@/components": "./components/index.js",
    "utils/": "./utils/"
  }
}
Then import: 
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

1

Pin Versions

Always specify versions for production:
import React from 'react@18.2.0';
2

Use esm.sh for Compatibility

esm.sh handles complex dependencies and CommonJS conversion:
import moment from 'esm.sh:moment'; // CommonJS → ESM
3

Minimize Dependencies

Only import what you need:
import { debounce } from 'lodash/debounce'; // Not entire lodash
4

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
  • 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

CDNBest ForSpeedFeatures
esm.shComplex deps, CommonJSFastAuto-conversion, types
SkypackModern ESMVery FastOptimized, cached
jsDelivrReliabilityFastGlobal, stable
UNPKGSimplicityMediumBasic, straightforward

Build docs developers (and LLMs) love

Get started for freeTalk to us