• Advanced Usage
• Experimental bundler (beta)

Experimental bundler (beta)

The new bundler:

• Skips the transpiling step for dependencies by caching them in our custom-built CDN.
• Fetches dependencies from our very own CDN, no longer third-party involved.
• Uses fewer resources (avoids fetching unnecessary files) and is significantly faster.

How to use

You just need to set the new bundler URL in your Sandpack instance:

Examples:

<SandpackProvider
  template="react"
  options={{ bundlerURL: "https://sandpack-bundler.codesandbox.io" }}
>
  {/* Children */}
</SandpackProvider>

<Sandpack
  template="react"
  options={{ bundlerURL: "https://sandpack-bundler.codesandbox.io" }}
/>

Preview

export default function App() {
  return <h1>Hello world</h1>
}

Known issues & limitations

• ✅ Support the React and Solid templates.
• ✅ Watch console message.
• ⏳ Other templates: Vue, Svelte, Vanilla, etc.
• ⏳ No support for loading private dependencies.
• ❌ No aliasing, git and file dependencies support in package.json.
• ❌ It doesn't watch package.json changes.

Same benefits as the previous bundler

Security

The bundler evaluates and transpiles all files in an iFrame under a different subdomain. This is important because it prevents attackers from tampering with cookies of the host domain when evaluating code.

Scoped styles/JavaScript execution

There's no risk of any executed code affecting the main page, which avoids unexpected styles or unhandled errors.

Performance

We heavily make use of Web Workers for transpilations, and only for sandboxes that are in the viewport and the user is interacting with, meaning that we only use resources as needed.

Bundle Size

Another reason to host the bundler externally is code splitting: we split all our transpilers away and load them on-demand.

React DevTools

The Sandpack bundler supports running react-devtools-inline in isolated mode, as an external dependency. This means you can run more than one instance per page and lazily load it.

Others

• npm dependency support.
• Hot module reloading.
• Error overlaying.
• Caching.

Benchmarks

• [1] idle - peek
• [2] Exclude local resource & external, except Sandpack & disabled cache
• [3] Incognito window (fresh cache) & Fast 3G
• [4] Cache enabled & Fast 3G
• [5] Incognito window (fresh cache) & no throttling