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: 5 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 (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-24T13:17:28.000Z (11 days ago)
- Last Synced: 2025-04-30T15:14:40.530Z (5 days ago)
- Topics: documentation, hacktoberfest, live-coding, playground, reactjs, sandbox, sandpack
- Language: TypeScript
- Homepage: https://sandpack.codesandbox.io
- Size: 14.4 MB
- Stars: 5,406
- Watchers: 25
- Forks: 399
- Open Issues: 125
-
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-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/)
[](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)