hub / github.com/codesandbox/sandpack

github.com/codesandbox/sandpack @v2.20.0 sqlite

repository ↗ · DeepWiki ↗ · release v2.20.0 ↗

754 symbols 1,646 edges 370 files 14 documented · 2%

README

Component toolkit for live running code editing experiences

Sandpack

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

Learn more about 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.

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" />;

Sandpack Themes

A list of themes to customize your Sandpack components.

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

<Sandpack theme={githubLight} />;

Extension points exported contracts — how you extend this code

SandpackSyntaxStyle (Interface)

* @category Theme

sandpack-react/src/types.ts

SandpackSyntaxStyle (Interface)

(no doc)

sandpack-themes/src/types.ts

ClientOptions (Interface)

(no doc)

sandpack-client/src/types.ts

DocsThemeConfig (Interface)

(no doc)

website/codesandbox-theme-docs/src/types.ts

Example (Interface)

(no doc)

website/landing/components/AdvancedUsage/UsageExample.tsx

SandpackProps (Interface)

(no doc)

sandpack-react/src/types.ts

SandpackTheme (Interface)

(no doc)

sandpack-themes/src/types.ts

SandboxSetup (Interface)

(no doc)

sandpack-client/src/types.ts

Core symbols most depended-on inside this repo

getSandpackStateFromProps

called by 57

sandpack-react/src/utils/sandpackUtils.ts

useSandpack

called by 40

sandpack-react/src/hooks/useSandpack.ts

useClassNames

called by 32

sandpack-react/src/utils/classNames.tsx

renderComponent

called by 25

website/codesandbox-theme-docs/src/utils/render.tsx

listen

called by 20

sandpack-client/src/clients/base.ts

dispatch

called by 20

sandpack-client/src/clients/node/index.ts

useConfig

called by 18

website/codesandbox-theme-docs/src/contexts/config.tsx

normalizePath

called by 16

sandpack-client/src/utils.ts

Shape

Function 531

Interface 127

Method 69

Class 24

Enum 3

Languages

TypeScript100%

Modules by API surface

sandpack-client/src/types.ts33 symbols

sandpack-react/src/presets/CustomSandpack.stories.tsx22 symbols

sandpack-react/src/types.ts19 symbols

sandpack-client/src/clients/runtime/index.ts17 symbols

sandpack-client/src/clients/node/index.ts16 symbols

sandpack-react/src/components/icons/index.tsx15 symbols

sandpack-client/src/clients/node/taskManager.ts15 symbols

sandpack-react/src/presets/Sandpack.stories.tsx13 symbols

sandpack-client/src/clients/static/index.ts13 symbols

sandpack-react/src/contexts/utils/useClient.ts11 symbols

website/codesandbox-theme-docs/src/mdx-components.tsx10 symbols

sandpack-react/src/components/Tests/utils.ts10 symbols

Dependencies from manifests, versioned

@babel/core7.12.3 · 1×

@babel/preset-env7.16.5 · 1×

@babel/preset-react7.16.5 · 1×

@babel/preset-typescript7.16.5 · 1×

@codemirror/autocomplete6.4.0 · 1×

@codemirror/commands6.1.3 · 1×

@codemirror/lang-css6.0.1 · 1×

@codemirror/lang-html6.4.0 · 1×

@codemirror/lang-javascript6.1.2 · 1×

@codemirror/lang-python6.1.0 · 1×

@codemirror/language6.3.2 · 1×

@codemirror/legacy-modes6.3.1 · 1×

For agents

$ claude mcp add sandpack \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact