DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Interactive code snippets with Sandpack - a showcase.
Adewale Abati for CodeSandbox

Posted on • Originally published at codesandbox.io

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!

Sandpack image

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.

CodeAmigo

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.

X-state

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.

CodeHike

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.

React docs

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.

CTNicholas

Web Editors

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

Gitlab live Preview

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

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

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

Top comments (0)

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

Β 
🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content