@codesandbox/sandpack-react

What is @codesandbox/sandpack-react?

@codesandbox/sandpack-react is a React component library that allows you to embed and run code sandboxes directly in your React applications. It provides a seamless way to integrate live code editing and previewing experiences, making it ideal for documentation, tutorials, and interactive coding environments.

What are @codesandbox/sandpack-react's main functionalities?

Basic Setup

This code demonstrates the basic setup of a Sandpack component with a simple React template. It includes a single file, `App.js`, which renders a 'Hello, world!' message.

import { Sandpack } from '@codesandbox/sandpack-react';

function App() {
  return (
    <Sandpack
      template="react"
      files={{
        '/App.js': `import React from 'react';
        
        export default function App() {
          return <h1>Hello, world!</h1>;
        }`
      }}
    />
  );
}

Custom Themes

This code demonstrates how to apply a custom theme to the Sandpack component. In this example, the 'dracula' theme is applied to the same basic React template.

import { Sandpack } from '@codesandbox/sandpack-react';
import { dracula } from '@codesandbox/sandpack-themes';

function App() {
  return (
    <Sandpack
      template="react"
      theme={dracula}
      files={{
        '/App.js': `import React from 'react';
        
        export default function App() {
          return <h1>Hello, world!</h1>;
        }`
      }}
    />
  );
}

Multiple Files

This code demonstrates how to include multiple files in a Sandpack component. The `App.js` file imports and uses a `Hello` component defined in `Hello.js`.

import { Sandpack } from '@codesandbox/sandpack-react';

function App() {
  return (
    <Sandpack
      template="react"
      files={{
        '/App.js': `import React from 'react';
        import { Hello } from './Hello';
        
        export default function App() {
          return <Hello />;
        }`,
        '/Hello.js': `import React from 'react';
        
        export function Hello() {
          return <h1>Hello, world!</h1>;
        }`
      }}
    />
  );
}

Other packages similar to @codesandbox/sandpack-react

react-live

react-live is a React component that enables live editing of code with a preview. It is similar to @codesandbox/sandpack-react in that it allows for interactive code examples, but it is more lightweight and does not provide the full sandbox environment that Sandpack offers.

storybook

Storybook is a tool for developing UI components in isolation. It allows you to create and showcase components with different states and interactions. While it does not provide live code editing like @codesandbox/sandpack-react, it is a powerful tool for building and testing UI components.

code-surfer

code-surfer is a React component for creating live code presentations. It allows you to step through code with explanations, making it ideal for presentations and tutorials. Unlike @codesandbox/sandpack-react, it focuses more on the presentation aspect rather than live editing and sandboxing.

README

Sandpack React

React components that give you the power of editable sandboxes that run in the browser.

import { Sandpack } from "@codesandbox/sandpack-react";

<Sandpack template="react" />;

Read more

Documentation

For full documentation, visit https://sandpack.codesandbox.io/docs/

Changelog

2.20.0 (2025-02-14)

Features

• update to react 19 (#1251) (6449a73)