We revamped our site to better serve our users!
Frontend Hire
Stackpack

Overview

Sandpack clone with WebContainers in React and TypeScript

This is the first ever course (at least that we know of as of 19th April 2024) that teaches you how to build a Sandpack clone using WebContainers.

Introduction

Let us understand what it used to be like before Sandpack and WebContainers.

Imagine, you are building something like a coding practice platform like Frontend Hire, GreatFrontend, LeetCode, AlgoExpert, Algochurn, etc. You want users to write code in the browser and see the output in real-time. Or maybe you are building a new web framework and want to give users a way to try it out without setting up a dev environment like how React or Svelte do.

We used to have a couple of options:

Options

1. CodePen, JSFiddle, etc.

These online code editors allow you to write code in the browser and see the output in real-time without involving a server. But, they are not designed for modern JavaScript frameworks like React, Vue, Svelte, etc. They are like a playground for vanilla JavaScript, HTML, and CSS.

  • You could embed these editors in your website, creating a not-so-unique experience.
  • We could not find great examples of this.

2. CodeSandbox, StackBlitz, etc.

These online code editors allow you to write code in the browser and see the output in real-time. They are designed for modern JavaScript frameworks like React, Vue, Svelte, etc. But they stream the response from the server, which means there is a delay in seeing the output.

  • You could embed these editors in your website, creating a not-so-unique experience.
  • Feedback depends on the server's response time (now that they also use Sandpack and WebContainers, this is instant).
  • Algochurn does this using StackBlitz.

3. Custom Setup similar to CodeSandbox, StackBlitz

You build your version of CodeSandbox or StackBlitz. You send the input code to the server, and the server compiles the code and streams the output back to the client.

  • Has a unique experience but requires a server to compile the code.
  • Feedback depends on the server's response time.
  • AlgoExpert and LeetCode do this.

Sandpack does not support other languages like Python, Java, etc. WebContainers does through WASI (WebAssembly System Interface).

How WebContainers and Sandpack are a better option

Sandpack is an open ecosystem of components and utilities that allow you to compile and run modern JavaScript frameworks in the browser. - What is Sandpack?

WebContainers are a browser-based runtime for executing Node.js applications and operating system commands, entirely inside your browser tab. - Introduction to WebContainers

An image showing two different approaches for executing code written in a browser. The top half, labeled "Regular Server Approach," depicts a two-step process with arrows indicating interaction between the "Browser" and "Server" boxes. The browser box contains the text "User writes code and clicks on a run button or is debounced," while the server box states, "Compiles the code and streams the output back." The bottom half, labeled "WebContainers and Sandpack Approach," shows a large box with the text "Everything happens in the browser." The overall message is that the regular server approach involves a server compiling the code, whereas the WebContainers and Sandpack approach compiles and runs code entirely within the browser. The diagram uses a color scheme with red for the server approach and green for the WebContainers and Sandpack approach.

Simply put, Sandpack and WebContainers allow you to have local dev server equivalents in the browser. The advantages are just too many:

  • Instant feedback.
  • No server required.
  • Cost-effective.
  • Secure.

Read more about the advantages from the WebContainers docs: WebContainers versus cloud VM approach

The underlying technology that powers Sandpack is Nodebox.

WebContainers is a similar technology that allows you to run dev servers in the browser. They do not have a UI like Sandpack, but you can build one on top of their APIs, which is exactly what we will do in this course.

Course Overview

In this course, we will build a Sandpack clone using WebContainers, which we call Stackpack. We will use React and TypeScript to create the UI and WebContainers to run the code in the browser.

An illustration of a software development environment interface divided into three sections. On the left, a large panel labeled "Code Editor" is designed for writing and editing code. Below it, a smaller panel is marked "Terminal," typically used for command line operations. To the right, there's another large panel labeled "Browser Output," where the results of the code executed in the editor can be viewed. The layout suggests an integrated development environment (IDE) with real-time code execution and output display. Two small, indistinct icons within the interface suggest a resizable panel handle. The background is dark, with white text for labels, giving it a sleek, modern look.

All the things that we will cover:

  • Monaco Editor: The editor that powers VSCode. We will use the React wrapper for it.
  • WebContainers: The technology that enables running Node.js applications and operating system commands in the browser.
  • Xterm.js: The terminal emulator.
  • ResizeObserver: The Web API we will use to handle callbacks when the size of the terminal changes. We will first use it without a wrapper and then refactor to use the React wrapper.
  • React: The UI library.
  • TypeScript: The language we will use to write the code.
  • Tailwind CSS: The utility-first CSS framework we will use for styling.
  • React Resizeable Panels: The library we will use to create resizable panels.
  • clsx: The utility for conditionally joining class names.
  • tailwind-merge: The utility to merge Tailwind CSS classes.

This course will not cover the basics of React, TypeScript, Tailwind CSS, etc. It would be best if you had a basic understanding of these technologies. We will try to keep the code as production-ready as possible but will not cover testing, deployment, CI/CD, etc. We also do not worry too much about our design choices. We will focus on the functionality.

Further Reading

Summary

We learned a lot of things in this mini-course.

Project Setup

In this guide, we will not cover the initial setup of the project. But we followed the same steps as those covered in our other course.

On this page