Sandpack

Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox. Sandpack uses CodeMirror under the hood, giving you all the basic capabilities of a code editor and syntax highlight. However, if you want to use your own editor framework, you can add that as a component too! Sandpack embeds the browser bundler that powers CodeSandbox and takes advantage of features like npm dependency support, hot module reloading, error overlaying, and caching. With Sandpack, you're always one click away from opening your code snippet in CodeSandbox. This way, you can easily share bug reports or examples behind a unique URL. Set the template prop to get started with Sandpack in a few lines of code. Each template contains all the files and dependencies needed to start a project right away. Tweak the UI to your liking using the options prop. Quickly toggle the appearance of built-in components.