https://codesandbox.io/blog/announcing-sandpack-2 CodeSandbox * Sign In * Try for free * Features * Use Cases + code_blocksCode in Sandboxes Prototype your ideas in record time. + dnsFull Stack Development Build production-ready projects with your team. + schoolLearn & Experiment Try frameworks and experiment new tools. + reviewsCode Reviews Review PRs in record time. * iOS * Discover * Docs * Support * Blog * Pricing New Announcing Sandpack 2.0 and Nodebox You can now run Node.js in any browser! Learn more arrow_back Blog chevron_right CodeSandbox Feb 16, 2023 Announcing Sandpack 2.0 and a Node.js runtime for any browser We are beyond excited to introduce Sandpack 2.0, which brings a Node.js runtime that runs in every browser. Danilo WoznicaIves van HoorneJasper de Moor Danilo Woznica, Ives van Hoorne & Jasper de Moor Announcing Sandpack 2.0 and a Node.js runtime for any browser * share Share + + + Ives van Hoorne 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 Woznica 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: NodeJSNodeJS NodeJS Next.jsNext.js Next.js ViteVite Vite React (Vite)React (Vite) React (Vite) Vue (Vite)Vue (Vite) Vue (Vite) Svelte (Vite)Svelte (Vite) Svelte (Vite) AstroAstro Astro More examples: Vite boilerplateVite boilerplate Vite boilerplate Express.jsExpress.js Express.js Next.js + TailwindNext.js + Tailwind Next.js + Tailwind VuePressVuePress VuePress 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. export default function Home({ data }) { return (

Hello {data}

); } export function getServerSideProps() { return { props: { data: "world" }, } } import { Sandpack } from "@codesandbox/sandpack-react" 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 Moor 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 Vite 4 support Run React, Vue, Astro, Svelte Get started 500ms Vite template hot start time with auto-install dependencies Any browser SafariChromeFirefox 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! Sandpack Repository A component toolkit for creating live-running code editing experiences. Nodebox Repository A Node.js-compatible runtime that runs in every browser. description Sandpack Documentation All the resources you need to get started with Sandpack. description Nodebox Documentation Learn how Nodebox works under the hood and get started with it. --------------------------------------------------------------------- arrow_back Return to all articles * codesandbox * sandpack * node --------------------------------------------------------------------- Keep reading about CodeSandbox . Everyone Can Commit. Bringing Code to The Whole Team CodeSandbox Feb 10, 2023 Everyone Can Commit. Bringing Code to The Whole Team Coding should be more accessible. Here's how we are making that happen. * codesandbox * collaboration * github Announcing Rust Support in CodeSandbox CodeSandbox Jan 19, 2023 Announcing Rust Support in CodeSandbox Hello, Rust community! You can now spin up a Rust development environment in CodeSandbox. * codesandbox * rust * announcement Introducing Docker Support in CodeSandbox CodeSandbox Jan 11, 2023 Introducing Docker Support in CodeSandbox You can now run anything on CodeSandbox with our native Docker support. * docker * deno * containers --------------------------------------------------------------------- Use Cases * Code in Sandboxes * Learn & Experiment * Coding Exercises * Full Stack Development * Code Reviews * Instant Feedback Ecosystem * Features * CodeSandbox for iOS * VS Code Extension * Sandpack * Status * Pricing Explore * Discover * Changelog * Documentation * Blog Company * About * Support * Careers * Brand kit --------------------------------------------------------------------- Copyright (c) 2023 CodeSandbox B.V. All rights reserved. * Terms of Use * Privacy Policy * Github * Twitter * Discord * YouTube