Announcing Sandpack 2.0 and a Node.js runtime for any browser

Ives van HoorneCodeSandbox Co-Founder

Today, we are announcing Sandpack 2.0, which introduces Nodebox—a fast Node.js runtime that allows you to run server-side code in any browser.

One year ago, we introduced Sandpack, an open-source in-browser bundler that allows you to run live running code examples on your website.

We couldn’t have made a better decision. We knew how powerful Sandpack is (it's the bundler that powers CodeSandbox itself!), so making it freely available to everyone just made sense. And we kept thinking: what sorts of cool stuff will people build using this technology?

Lo and behold, cool stuff was built. From the impressive React.js beta docs to products like SideGuide, we marveled at how this technology was pushing the limits of what could be run in a browser.

But the JavaScript world moves fast! New challenges keep appearing, moving beyond runtime execution and demanding more server implementation to solve problems of growing complexity. So, what about... Node support? Not only would this solve an increasing need for server execution, but it would also empower developers by making it more accessible to run Node projects without elaborate setups.

And that is why we’re all so excited to share the release of Sandpack 2.0 with Nodebox technology, which you can try out in this sandbox 🥳

Run Node in any browser

Danilo WoznicaSandpack maintainer

If you have heard about or used Sandpack, you probably know what it’s all about: running any JavaScript application directly in the browser. But in version 1, the big caveat to “any JavaScript application” was that it only worked for client runtime execution. And we wanted to change that.

No matter if your app depends on server or client runtime execution, in Sandpack it should work for you. This was the key objective as we worked towards version 2.

To make this a reality, Sandpack 2.0 introduces Nodebox, a new technology that implements its very own abstraction of Node.js in-browser. Nodebox brings a new set of possibilities allowing Sandpack to run almost any JavaScript application you can imagine in any browser.

framework

We believe this can be huge—just as big, if not bigger than what Sandpack v1 enabled. With Nodebox, you won’t have to git-clone, download specific Node versions, run scripts on the terminal, etc.—you can run a Node project in seconds in the browser without installing anything on your computer. Plus, you get Sandpack’s customizable UI, low footprint, and a tried-and-true developer experience all in a single package.

But enough talk. Time to really put Sandpack 2.0 to the test with some cool examples. Remember: all of these are editable, so tweak them to your heart’s desire!

Nodebox templates:

More examples:

iOS Safari is currently in beta support, which means that some of the templates might crash this browser tab because of an internal error. Please keep this in mind.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

import { Sandpack } from "@codesandbox/sandpack-react"
  
<Sandpack template="vite" />

👉 Open the example above in this cloud sandbox and start building!

Making Node at home, everywhere

Sooooo… what can it run?

With Sandpack 2.0, you can bring your docs to a whole new level, as Nodebox allows running server-side examples. Go ahead and add Next.js or any Vite-based examples, tutorials for Node scripts… all of these will run for everyone visiting your Docs, regardless of their browser or device. Take a look at our brand-new Sandpack Docs for a glimpse of all the exciting things you can achieve with interactive documentation.

This also means that disposable server-side instances are now a reality. Unlike Node emulation technologies, Sandpack 2.0 allows you to run themeable and customizable server projects quickly and easily with almost no footprint—no need for a server, registration, source control, installation, and running steps.

At CodeSandbox, we are committed to preventing ideas and even simple moments of curiosity from slipping away. Programming is an incredibly powerful tool to solve real-life problems, we just have to provide accessibility. Sandpack made it possible for any website to make coding part of their content and now, with Nodebox, server code as well. Super excited to see people learn and play with Sandpack 2.0! — Christian Alfoni

Finally, Sandpack 2.0 opens a whole new world of possibilities for technical content creators, documentation maintainers, developers of new online tools, and other creative usages where a server environment in-browser might be useful.

To cap it all off, when using Sandpack 2.0 you’re always one click away from a full development environment. Open any example on the new CodeSandbox experience to keep building it, going as complex as you need.

Nodebox under the hood

Jasper de MoorNodebox maintainer

We started working on Nodebox because of our own internal needs at CodeSandbox and several external requests from other developers wanting an easy way to run Node in any browser.

Nodebox is a high-level abstraction of Node.js. That means it doesn’t implement some of the small details of Node.js, but we made various tweaks to make it compatible with every browser. So, Nodebox aims for application compatibility, not Node.js feature parity.

Performance was also one of our top priorities while developing Nodebox. We completely rewrote the Sandpack transpiler using Rust, tweaked our caching and made several other optimizations. The result? It’s really fast! Our Vite templates, for example, have a hot start time of 500ms 🎉.

We’re shipping Nodebox with out-of-the-box support for Next.js, Vite and Astro, but we’re growing to support just about any server-side framework you can imagine. However, bear in mind it can’t run napi or any other low-level C++/Rust package you can use in Node.js—only WebAssembly and JavaScript modules. Postgres, MongoDB and MySQL are also currently not supported because of the lack of raw socket support in browsers.

Plus, we're currently working on some missing APIs, such as async_hooks, vm, worker_threads, automatic process exiting (users now need to manually call process.exit before the process is exited) and synchronous exec/spawn. Nodebox works in iOS Safari, but it’s still on beta support due to a browser memory leak. Most of these are planned for March.

Vite 4 support

Run React, Vue, Astro, Svelte

500ms

Vite template hot start time

with auto-install dependencies

Any browser

Ready to use

Check out the Nodebox API documentation

Difference with WebContainers

We get that Nodebox will invariably be compared to WebContainers. So, below is an overview of how they differ.

WebContainers is a technology that also allows you to run Node.js in the browser. However, it uses modern browser technologies like SharedArrayBuffer, which makes it impossible to run in Safari and requires the user to set additional Cross-Origin-Isolation headers on the server to run any code.

Instead, we implemented Nodebox without modern browser technologies, to make it run in any browser (like iOS and Safari) with minimal setup. The disadvantage of this is that Nodebox will use more memory when you spawn more threads, and we cannot get full Node API compatibility (for example, we cannot use synchronous fork). This is okay for Nodebox because it was built to run small projects and examples, which it does really well. If you want to do full development in the browser, we recommend using our microVM technology instead.

For more detailed information, check our FAQ.

Powerful. Fast. Ready To Use.

We will never grow tired of developing a more accessible web for everyone.

Building something as powerful and fast as Nodebox is truly a joy, but it wouldn’t have such a big impact unless we made it for everyone. So, you can use Nodebox as an NPM package, which allows you to run Node.js in any browser, any context, and any application.

For example, here’s how you can run Express.js in Nodebox with just a few lines of code:

import { Nodebox } from "@codesandbox/nodebox";

const previewIframe = document.getElementById("preview-iframe");
const nodeboxIframe = document.getElementById("nodebox-iframe");

(async () => {
  // Set up Nodebox and assign a bridge iframe
  const nodebox = new Nodebox({ iframe: nodeboxIframe });

  // Connect to the nodebox environment
  await nodebox.connect();

  // Write files to the node filesystem inside Nodebox
  await nodebox.fs.init({
    "package.json": JSON.stringify({
      dependencies: {
        express: "4.18.2",
      },
    }),
    "index.js": `const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})`,
  });

  // Create a shell interface to listen to events and start a command
  const shell = nodebox.shell.create();

  // Start a node command executing the index.js file (our Express.js server)
  // If there are any missing node_modules, Nodebox will automatically install them
  const { id } = await shell.runCommand("node", ["index.js"]);

  // Get the first URL the shell started and display it on an iframe
  const { url } = await nodebox.preview.getByShellId(id);
  previewIframe.src = url;
})();

👉 Try this example in this sandbox.

What’s Next?

There’s definitely a bright future ahead for Sandpack!

Next up, we’re working on enabling microVMs in Sandpack, which will allow you to get rid of browser limitations and run complex projects with any programming language.

While unfortunately we are not open-sourcing Nodebox for a variety of reasons, some of which are outside of our control, we believe this technology may be the future of improved DX. So, we will continue to explore whether we can open-source it in the future.

We can’t wait to see all the amazing things that you will build! If you encounter any bugs or want to request any missing features, open an issue on GitHub.

Our enormous thank you to the people who have made this a reality. Kudos to Adewale, Alex, Artem, Bas, Danilo, Filipe, Ives, Jasper, Marco, Obinna, Oskar, Zeh, and all our Sandpack contributors on GitHub!