Introducing the CodeSandbox Storybook add-on

Bring every story to life.

Learn more
Blog chevron_right Sandpack
Feb 4, 2022

Interactive code snippets with Sandpack - a showcase.

Check out some of the amazing ways people have been using Sandpack to improve the experience of code on the web.

Adewale Abati
Adewale Abati
Interactive code snippets with Sandpack - a showcase.

Sharing code snippets have always been a huge part of learning on the web. Documentations, blogposts, tutorials and other learning platforms use code snippets regularly to educate their audiences.

These snippets are usually either accompanied with a screenshot to show the reader a preview or they have to copy it over to their machine and run to see the results. With Sandpack however, we get both the editable code and a preview, live in the browser. It’s amazing!

What is Sandpack?

Sandpack is a component toolkit that makes it possible to have interactive, live-running code editing experiences in the browser. It is the in-browser bundler that powers CodeSandbox that is now open source. Check out the announcement article here.

With Sandpack’s live coding environment, you get:

  • A full editor experience with syntax highlighting.
  • An advanced preview that takes advantage of npm dependency support, hot module reloading etc.
  • One click away from opening your code snippets directly in CodeSandbox.

Sandpack Showcase

The use cases for having this kind of experience is limitless and we are excited to see different applications spring up using Sandpack. Here are a few we’ve found exciting.

Interactive Coding Tutorials

With Sandpack, you can power up your coding tutorials. CodeAmigo has lessons that you can practice and follow along. They use Sandpack together with their custom editor for running the code.

XState Tutorials uses Sandpack to teach XState, a library that brings state machines to Javascript and Typescript, through solving puzzles and instant feedback from the interactive UI.

Guided Walkthroughs

Sandpack also comes in handy for walkthroughs - showing progress through a project or step-by step-tutorials. CodeHike is a library that allows you to create guided code walkthroughs - they implemented Sandpack using the sandpack-client for showing the live running code in a preview.

Technical Documentation

The new React Documentation uses Sandpack for its examples and challenges. They were able to fully style and customize Sandpack for their needs including just syntax highlighting in some cases. You can learn to do the same with Sandpack’s Custom UI options.

Chris, @ctnicholasdev has Sandpack implemented on his web technologies blog for interactive tutorials and demos. In this article about using Sandpack for Code Demos, he’s able to show how Sandpack can change how we learn on the web.

Web Editors

GitLab uses Sandpack to execute frontend projects so you can write code, and make commits all while seeing the live results.

If you’re using Sandpack, we’d love to know and also add to our showcase! Go ahead and share it with our community platform.

If you're new to Sandpack, you can get started with the documentation and get support or start a conversation on our community platform.

We are really excited about the possibilities for Sandpack and there's really no limit on what you can use it for.

Keep reading about Sandpack .

Using Sandpack for React Libraries Documentation
Sandpack Apr 19, 2023

Using Sandpack for React Libraries Documentation

Improve the accessibility of your React library's Docs with live coding examples powered by Sandpack.

Announcing Sandpack 2.0 and a Node.js runtime for any browser
Sandpack 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.

Contribute to Sandpack in Hacktoberfest
Sandpack Sep 30, 2022

Contribute to Sandpack in Hacktoberfest

Empower developers with custom live coding experiences by contributing new themes to Sandpack .

Sandpack v1: a fresh design and a new accessible API
Sandpack Jun 15, 2022

Sandpack v1: a fresh design and a new accessible API

Today, we are proud to announce the first major release of Sandpack v1 - A toolkit for creating in-browser live coding.