Sandpack quickstart

With Sandpack, you can easily create interactive components and test your code in real-time, without leaving your browser. Whether you are a beginner or an experienced developer, you will find Sandpack a valuable and fun tool to use.

1. Install

Install the Sandpack dependency on your project.

npm i @codesandbox/sandpack-react

2. Theme

A theme is a set of visual styles and design elements that can be applied to your project, such as colors, fonts, and layout. This allows you to easily customize the look and feel of your project, without having to manually edit the CSS and HTML. More about custom themes ->

See preview ↓

3. Template

A template is a pre-defined structure for your project, which includes basic HTML, CSS, and JavaScript files. This allows you to quickly set up a project with a basic structure and styling, without having to start from scratch. More about files and templates ->

staticangularreactsolidsveltevanillavuenodenextjsvitereact (Vite)preact (Vite)vue (Vite)svelte (Vite)astro

See preview ↓

4. Layout

A layout refers to the arrangement of elements on the page, such as the positioning of text and images. This allows you to create a visually appealing and user-friendly design for your project, and can include elements such as grids and columns. More about layout and components ->

See preview ↓

Preview

This is where you can see your component in action and test it in real-time. You can make changes to your code and see the results immediately.

export default function Home({ data }) {
  return (
    <div>
      <h1>Hello {data}</h1>
    </div>
  );
}
  
export function getServerSideProps() {
  return {
    props: { data: "world" },
  }
}

Code snippet

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

const App = () => {
  const files = {}
  
  return (
    <Sandpack
      files={files} 
      theme="light" 
      template="nextjs"
    />
  )  
}