Smart Imports

Codespark implements an intelligent dependency analysis system that automatically collects import dependencies in your code. You can import any browser-compatible npm package without additional configuration.

Basic Usage

Import npm packages directly in your code. Codespark automatically resolves and loads them from esm.sh.

Package Version

Use the imports prop to pin specific package versions. Each key represents the package name used in your import statements, and the value is a valid esm.sh URL. The imports object is injected into the preview iframe's import map, allowing you to override default package resolutions.

const code = `import * as _ from 'lodash-es';`

<Codespark imports={{ 'lodash-es': 'https://esm.sh/lodash-es@4.17.21' }} />

via URL

Import packages directly from URLs using ESM CDNs like esm.sh or unpkg.

Local Dependency

You can also import components from other files in your workspace.

Limitations

Dependency resolution is powered by esm.sh, which means private scoped npm packages cannot be imported directly.

If you need to preview private npm packages, consider these options:

1. Self-host esm.sh - Follow the esm.sh self-hosting guide to set up your own CDN instance
2. Custom import maps - Configure custom import maps to point to your private package URLs