https://github.com/codesandbox/sandpack

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.
https://github.com/codesandbox/sandpack

documentation hacktoberfest live-coding playground reactjs sandbox sandpack

Last synced: 4 days ago
JSON representation

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

• Host: GitHub
• URL: https://github.com/codesandbox/sandpack
• Owner: codesandbox
• License: apache-2.0
• Created: 2021-02-19T08:06:29.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-11-21T12:04:29.000Z (22 days ago)
• Last Synced: 2024-12-08T21:18:02.594Z (4 days ago)
• Topics: documentation, hacktoberfest, live-coding, playground, reactjs, sandbox, sandpack
• Language: TypeScript
• Homepage: https://sandpack.codesandbox.io
• Size: 14.2 MB
• Stars: 4,956
• Watchers: 24
• Forks: 357
• Open Issues: 107
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

• awesome - codesandbox/sandpack - A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox. (TypeScript)
• awesome-github-star - sandpack - running code editing experiences, using the power of CodeSandbox. | codesandbox | 4040 | (TypeScript)

README

        


# Sandpack

Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox.

[Learn more about Sandpack](https://sandpack.codesandbox.io/) 

[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/codesandbox/sandpack)

## Sandpack Client

This is a small foundation package that sits on top of the bundler. It is

framework agnostic and facilitates the handshake between your context and the bundler iframe.

[Read more](https://sandpack.codesandbox.io/docs/advanced-usage/client)

## Sandpack React

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

```jsx

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

;

```

[Read more](https://sandpack.codesandbox.io/docs/advanced-usage/components)

## Sandpack Themes

A list of themes to customize your Sandpack components.

```jsx

import { githubLight } from "@codesandbox/sandpack-themes";

;

```

[Read more](https://sandpack.codesandbox.io/docs/getting-started/themes)