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: about 2 months 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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-25T09:45:54.000Z (about 2 months ago)
• Last Synced: 2024-07-31T04:02:25.681Z (about 2 months ago)
• Topics: documentation, hacktoberfest, live-coding, playground, reactjs, sandbox, sandpack
• Language: TypeScript
• Homepage: https://sandpack.codesandbox.io
• Size: 13.7 MB
• Stars: 4,564
• Watchers: 21
• Forks: 314
• Open Issues: 100
• 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)