Sandpack React

React components that give you the power of editable sandboxes that run in the browser. Powered by Sandpack, the online bundler used by CodeSandbox.

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

<Sandpack template="react" />;

Interfaces

Components

CodeEditorRef

Ƭ CodeEditorRef: CodeMirrorRef

Defined in

sandpack-react/src/components/CodeEditor/index.tsx:22

CodeEditor

• Const CodeEditor: ForwardRefExoticComponent<CodeMirrorProps & RefAttributes<CodeMirrorRef>>

Defined in

sandpack-react/src/components/CodeEditor/CodeMirror.tsx:111

ErrorOverlay

• Const ErrorOverlay: React.FC<React.DOMAttributes<HTMLDivElement> & { children?: React.ReactNode }>

Defined in

sandpack-react/src/common/ErrorOverlay.tsx:16

SandpackCodeEditor

• Const SandpackCodeEditor: ForwardRefExoticComponent<CodeEditorProps & RefAttributes<CodeMirrorRef>>

Defined in

sandpack-react/src/components/CodeEditor/index.tsx:73

SandpackCodeViewer

• Const SandpackCodeViewer: ForwardRefExoticComponent<CodeViewerProps & RefAttributes<CodeMirrorRef>>

Defined in

sandpack-react/src/components/CodeViewer/index.tsx:41

SandpackLayout

• Const SandpackLayout: ForwardRefExoticComponent<SandpackLayoutProps & RefAttributes<HTMLDivElement>>

Defined in

sandpack-react/src/common/Layout.tsx:66

SandpackPreview

• Const SandpackPreview: ForwardRefExoticComponent<PreviewProps & HTMLAttributes<HTMLDivElement> & RefAttributes<SandpackPreviewRef>>

Defined in

sandpack-react/src/components/Preview/index.tsx:82

SandpackStack

• Const SandpackStack: React.FC<React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }>

Defined in

sandpack-react/src/common/Stack.tsx:20

UnstyledOpenInCodeSandboxButton

• Const UnstyledOpenInCodeSandboxButton: React.FC<React.HtmlHTMLAttributes<unknown>>

Defined in

sandpack-react/src/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx:49

FileTabs

▸ FileTabs(__namedParameters): Element

FileTabs is a list of all open files, the active file, and its state.

Parameters

Name	Type
`__namedParameters`	`FileTabsProps` & `HTMLAttributes`<`HTMLDivElement`>

Returns

Element

Defined in

sandpack-react/src/components/FileTabs/index.tsx:67

LoadingOverlay

▸ LoadingOverlay(__namedParameters): null | Element

Parameters

Name	Type
`__namedParameters`	`LoadingOverlayProps` & `HTMLAttributes`<`HTMLDivElement`>

Returns

null | Element

Defined in

sandpack-react/src/common/LoadingOverlay.tsx:38

Navigator

▸ Navigator(__namedParameters): Element

Parameters

Name	Type
`__namedParameters`	`NavigatorProps` & `HTMLAttributes`<`HTMLDivElement`>

Returns

Element

Defined in

sandpack-react/src/components/Navigator/index.tsx:59

OpenInCodeSandboxButton

▸ OpenInCodeSandboxButton(): null | Element

Returns

null | Element

Defined in

sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx:18

RefreshButton

▸ RefreshButton(__namedParameters): Element

Parameters

Name	Type
`__namedParameters`	`RefreshButtonProps`

Returns

Element

Defined in

sandpack-react/src/components/Preview/RefreshButton.tsx:21

RunButton

▸ RunButton(__namedParameters): null | Element

Parameters

Name	Type
`__namedParameters`	`HTMLAttributes`<`HTMLButtonElement`>

Returns

null | Element

Defined in

sandpack-react/src/common/RunButton.tsx:20

SandpackFileExplorer

▸ SandpackFileExplorer(__namedParameters): null | Element

Parameters

Name	Type
`__namedParameters`	`HTMLAttributes`<`HTMLDivElement`>

Returns

null | Element

Defined in

sandpack-react/src/components/FileExplorer/index.tsx:18

SandpackReactDevTools

▸ SandpackReactDevTools(__namedParameters): null | Element

Parameters

Name	Type
`__namedParameters`	{ `clientId?`: `string` ; `theme?`: `DevToolsTheme` } & `HTMLAttributes`<`HTMLDivElement`>

Returns

null | Element

Defined in

sandpack-react/src/components/ReactDevTools/index.tsx:20

SandpackTranspiledCode

▸ SandpackTranspiledCode(__namedParameters): Element

Parameters

Name	Type
`__namedParameters`	`CodeViewerProps` & `HTMLAttributes`<`HTMLDivElement`>

Returns

Element

Defined in

sandpack-react/src/components/TranspiledCode/index.tsx:26

Hooks

useActiveCode

▸ useActiveCode(): Object

This returns the current state of the active file and a method to update its content.

Returns

Object

Name	Type
`code`	`string`
`readOnly`	`boolean`
`updateCode`	(`newCode`: `string`) => `void`

Defined in

sandpack-react/src/hooks/useActiveCode.ts:9

useErrorMessage

▸ useErrorMessage(): null | string

Returns

null | string

Defined in

sandpack-react/src/hooks/useErrorMessage.ts:8

useLoadingOverlayState

▸ useLoadingOverlayState(clientId?, externalLoading?): LoadingOverlayState

Parameters

Name	Type
`clientId?`	`string`
`externalLoading?`	`boolean`

Returns

LoadingOverlayState

Defined in

sandpack-react/src/hooks/useLoadingOverlayState.ts:23

useSandpack

▸ useSandpack(): UseSandpack

Returns

UseSandpack

Defined in

sandpack-react/src/hooks/useSandpack.ts:22

useSandpackNavigation

▸ useSandpackNavigation(clientId?): Object

Parameters

Name	Type
`clientId?`	`string`

Returns

Object

Name	Type
`back`	() => `void`
`forward`	() => `void`
`refresh`	() => `void`

Defined in

sandpack-react/src/hooks/useSandpackNavigation.ts:6

useSandpackTheme

▸ useSandpackTheme(): Object

Returns

Object

Name	Type
`theme`	`SandpackTheme`
`themeId`	`string`

Defined in

sandpack-react/src/hooks/useSandpackTheme.ts:9

useTranspiledCode

▸ useTranspiledCode(): null | string

Returns

null | string

Defined in

sandpack-react/src/hooks/useTranspiledCode.ts:18

Other

getSandpackCssText

▸ getSandpackCssText(): string

Returns

string

Defined in

node_modules/@stitches/core/types/stitches.d.ts:132

Provider

SandpackConsumer

• Const SandpackConsumer: Consumer<null | SandpackContext> = Sandpack.Consumer

Defined in

sandpack-react/src/contexts/sandpackContext.tsx:677

SandpackReactContext

• Const SandpackReactContext: Context<null | SandpackContext>

Defined in

sandpack-react/src/contexts/sandpackContext.tsx:33

Setup

SandboxEnvironment

Defined in

sandpack-react/src/types.ts:202

SandpackInitMode

Ƭ SandpackInitMode: "immediate" | "lazy" | "user-visible"

immediate: It immediately mounts all components, such as the code-editor and the preview - this option might overload the memory usage and resource from the browser on a page with multiple instances;

lazy: Only initialize the components when the user is about to scroll them to the viewport and keep these components mounted until the user leaves the page - this is the default value;

user-visible: Only initialize the components when the user is about to scroll them to the viewport, but differently from lazy, this option unmounts those components once it's no longer in the viewport.

Defined in

sandpack-react/src/types.ts:251

SandpackPredefinedTemplate

Defined in

sandpack-react/src/types.ts:215

Template

ANGULAR_TEMPLATE

• Const ANGULAR_TEMPLATE: Object

Type declaration

Name	Type
`dependencies`	{ `@angular/common`: `string` = "^11.2.0"; `@angular/compiler`: `string` = "^11.2.0"; `@angular/core`: `string` = "^11.2.0"; `@angular/platform-browser`: `string` = "^11.2.0"; `@angular/platform-browser-dynamic`: `string` = "^11.2.0"; `core-js`: `string` = "3.8.3"; `rxjs`: `string` = "6.6.3"; `zone.js`: `string` = "0.11.3" }
`[email protected]/common`	`string`
`[email protected]/compiler`	`string`
`[email protected]/core`	`string`
`[email protected]/platform-browser`	`string`
`[email protected]/platform-browser-dynamic`	`string`
`dependencies.core-js`	`string`
`dependencies.rxjs`	`string`
`dependencies.zone.js`	`string`
`entry`	`string`
`environment`	`string`
`files`	{ `/src/app/app.component.css`: { `code`: `string` } ; `/src/app/app.component.html`: { `code`: `string` } ; `/src/app/app.component.ts`: { `code`: `string` } ; `/src/app/app.module.ts`: { `code`: `string` } ; `/src/index.html`: { `code`: `string` } ; `/src/main.ts`: { `code`: `string` } ; `/src/polyfills.ts`: { `code`: `string` } }
`files./src/app/app.component.css`	{ `code`: `string` }
`files./src/app/app.component.css.code`	`string`
`files./src/app/app.component.html`	{ `code`: `string` }
`files./src/app/app.component.html.code`	`string`
`files./src/app/app.component.ts`	{ `code`: `string` }
`files./src/app/app.component.ts.code`	`string`
`files./src/app/app.module.ts`	{ `code`: `string` }
`files./src/app/app.module.ts.code`	`string`
`files./src/index.html`	{ `code`: `string` }
`files./src/index.html.code`	`string`
`files./src/main.ts`	{ `code`: `string` }
`files./src/main.ts.code`	`string`
`files./src/polyfills.ts`	{ `code`: `string` }
`files./src/polyfills.ts.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/angular.ts:4

REACT_TEMPLATE

• Const REACT_TEMPLATE: Object

Type declaration

Name	Type
`dependencies`	{ `react`: `string` = "^18.0.0"; `react-dom`: `string` = "^18.0.0"; `react-scripts`: `string` = "^4.0.0" }
`dependencies.react`	`string`
`dependencies.react-dom`	`string`
`dependencies.react-scripts`	`string`
`entry`	`string`
`environment`	`string`
`files`	{ `/App.js`: { `code`: `string` } ; `/index.js`: { `code`: `string` } ; `/public/index.html`: { `code`: `string` } ; `/styles.css`: { `code`: `string` } }
`files./App.js`	{ `code`: `string` }
`files./App.js.code`	`string`
`files./index.js`	{ `code`: `string` }
`files./index.js.code`	`string`
`files./public/index.html`	{ `code`: `string` }
`files./public/index.html.code`	`string`
`files./styles.css`	{ `code`: `string` }
`files./styles.css.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/react.ts:4

REACT_TYPESCRIPT_TEMPLATE

• Const REACT_TYPESCRIPT_TEMPLATE: Object

Type declaration

Name	Type
`dependencies`	{ `react`: `string` = "^18.0.0"; `react-dom`: `string` = "^18.0.0"; `react-scripts`: `string` = "^4.0.0" }
`dependencies.react`	`string`
`dependencies.react-dom`	`string`
`dependencies.react-scripts`	`string`
`devDependencies`	{ `@types/react`: `string` = "^18.0.0"; `@types/react-dom`: `string` = "^18.0.0"; `typescript`: `string` = "^4.0.0" }
`[email protected]/react`	`string`
`[email protected]/react-dom`	`string`
`devDependencies.typescript`	`string`
`entry`	`string`
`environment`	`string`
`files`	{ `/App.tsx`: { `code`: `string` } ; `/index.tsx`: { `code`: `string` } ; `/public/index.html`: { `code`: `string` } ; `/styles.css`: { `code`: `string` } ; `tsconfig.json`: { `code`: `string` } }
`files./App.tsx`	{ `code`: `string` }
`files./App.tsx.code`	`string`
`files./index.tsx`	{ `code`: `string` }
`files./index.tsx.code`	`string`
`files./public/index.html`	{ `code`: `string` }
`files./public/index.html.code`	`string`
`files./styles.css`	{ `code`: `string` }
`files./styles.css.code`	`string`
`files.tsconfig.json`	{ `code`: `string` }
`files.tsconfig.json.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/react-typescript.ts:4

SOLID_TEMPLATE

• Const SOLID_TEMPLATE: Object

Type declaration

Name	Type
`dependencies`	{ `solid-js`: `string` = "1.3.15" }
`dependencies.solid-js`	`string`
`entry`	`string`
`environment`	`string`
`files`	{ `/App.tsx`: { `code`: `string` } ; `/index.html`: { `code`: `string` } ; `/index.tsx`: { `code`: `string` } ; `/styles.css`: { `code`: `string` } }
`files./App.tsx`	{ `code`: `string` }
`files./App.tsx.code`	`string`
`files./index.html`	{ `code`: `string` }
`files./index.html.code`	`string`
`files./index.tsx`	{ `code`: `string` }
`files./index.tsx.code`	`string`
`files./styles.css`	{ `code`: `string` }
`files./styles.css.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/solid.ts:4

SVELTE_TEMPLATE

• Const SVELTE_TEMPLATE: Object

Type declaration

Name	Type
`dependencies`	{ `svelte`: `string` = "^3.0.0" }
`dependencies.svelte`	`string`
`entry`	`string`
`environment`	`string`
`files`	{ `/App.svelte`: { `code`: `string` } ; `/index.js`: { `code`: `string` } ; `/public/index.html`: { `code`: `string` } }
`files./App.svelte`	{ `code`: `string` }
`files./App.svelte.code`	`string`
`files./index.js`	{ `code`: `string` }
`files./index.js.code`	`string`
`files./public/index.html`	{ `code`: `string` }
`files./public/index.html.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/svelte.ts:4

VANILLA_TEMPLATE

• Const VANILLA_TEMPLATE: Object

Type declaration

Name	Type
`dependencies`	{}
`entry`	`string`
`environment`	`string`
`files`	{ `/index.html`: { `code`: `string` } ; `/src/index.js`: { `code`: `string` } ; `/src/styles.css`: { `code`: `string` } }
`files./index.html`	{ `code`: `string` }
`files./index.html.code`	`string`
`files./src/index.js`	{ `code`: `string` }
`files./src/index.js.code`	`string`
`files./src/styles.css`	{ `code`: `string` }
`files./src/styles.css.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/vanilla.ts:4

VANILLA_TYPESCRIPT_TEMPLATE

• Const VANILLA_TYPESCRIPT_TEMPLATE: Object

Type declaration

Name	Type
`dependencies`	{}
`devDependencies`	{ `typescript`: `string` = "^4.0.0" }
`devDependencies.typescript`	`string`
`entry`	`string`
`environment`	`string`
`files`	{ `/index.html`: { `code`: `string` } ; `/src/index.ts`: { `code`: `string` } ; `/src/styles.css`: { `code`: `string` } ; `tsconfig.json`: { `code`: `string` } }
`files./index.html`	{ `code`: `string` }
`files./index.html.code`	`string`
`files./src/index.ts`	{ `code`: `string` }
`files./src/index.ts.code`	`string`
`files./src/styles.css`	{ `code`: `string` }
`files./src/styles.css.code`	`string`
`files.tsconfig.json`	{ `code`: `string` }
`files.tsconfig.json.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/vanilla-typescript.ts:4

VUE_TEMPLATE

• Const VUE_TEMPLATE: Object

Type declaration

Name	Type
`dependencies`	{ `@vue/cli-plugin-babel`: `string` = "4.1.1"; `vue`: `string` = "^2.6.11" }
`[email protected]/cli-plugin-babel`	`string`
`dependencies.vue`	`string`
`entry`	`string`
`environment`	`string`
`files`	{ `/public/index.html`: { `code`: `string` } ; `/src/App.vue`: { `code`: `string` } ; `/src/main.js`: { `code`: `string` } }
`files./public/index.html`	{ `code`: `string` }
`files./public/index.html.code`	`string`
`files./src/App.vue`	{ `code`: `string` }
`files./src/App.vue.code`	`string`
`files./src/main.js`	{ `code`: `string` }
`files./src/main.js.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/vue.ts:4

VUE_TEMPLATE_3

• Const VUE_TEMPLATE_3: Object

Type declaration

Name	Type
`dependencies`	{ `@vue/cli-plugin-babel`: `string` = "4.5.0"; `core-js`: `string` = "^3.6.5"; `vue`: `string` = "^3.0.0-0" }
`[email protected]/cli-plugin-babel`	`string`
`dependencies.core-js`	`string`
`dependencies.vue`	`string`
`entry`	`string`
`environment`	`string`
`files`	{ `/public/index.html`: { `code`: `string` } ; `/src/App.vue`: { `code`: `string` } ; `/src/main.js`: { `code`: `string` } }
`files./public/index.html`	{ `code`: `string` }
`files./public/index.html.code`	`string`
`files./src/App.vue`	{ `code`: `string` }
`files./src/App.vue.code`	`string`
`files./src/main.js`	{ `code`: `string` }
`files./src/main.js.code`	`string`
`main`	`string`

Defined in

sandpack-react/src/templates/vue3.ts:4

Theme

SandpackPredefinedTheme

Ƭ SandpackPredefinedTheme: "light" | "dark" | "auto"

Defined in

sandpack-react/src/types.ts:256

SandpackThemeProp

Ƭ SandpackThemeProp: SandpackPredefinedTheme | DeepPartial<SandpackTheme>

Defined in

sandpack-react/src/types.ts:327

SANDPACK_THEMES

• Const SANDPACK_THEMES: Record<SandpackPredefinedTheme, SandpackTheme>

Defined in

sandpack-react/src/themes/index.ts:84

SandpackThemeProvider

• Const SandpackThemeProvider: React.FC<React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode ; theme?: SandpackThemeProp }>

Defined in

sandpack-react/src/contexts/themeContext.tsx:47

defaultDark

• Const defaultDark: SandpackTheme

Defined in

sandpack-react/src/themes/index.ts:45

defaultLight

• Const defaultLight: SandpackTheme

Defined in

sandpack-react/src/themes/index.ts:6

Interfaces​

Components​

CodeEditorRef​

Defined in​

CodeEditor​

Defined in​

ErrorOverlay​

Defined in​

SandpackCodeEditor​

Defined in​

SandpackCodeViewer​

Defined in​

SandpackLayout​

Defined in​

SandpackPreview​

Defined in​

SandpackStack​

Defined in​

UnstyledOpenInCodeSandboxButton​

Defined in​

FileTabs​

Parameters​

Returns​

Defined in​

LoadingOverlay​

Parameters​

Returns​

Defined in​

Navigator​

Parameters​

Returns​

Defined in​

OpenInCodeSandboxButton​

Returns​

Defined in​

RefreshButton​

Parameters​

Returns​

Defined in​

RunButton​

Parameters​

Returns​

Defined in​

SandpackFileExplorer​

Parameters​

Returns​

Defined in​

SandpackReactDevTools​

Parameters​

Returns​

Defined in​

SandpackTranspiledCode​

Parameters​

Returns​

Defined in​

Hooks​

useActiveCode​

Returns​

Defined in​

useErrorMessage​

Returns​

Defined in​

useLoadingOverlayState​

Parameters​

Returns​

Defined in​

useSandpack​

Returns​

Defined in​

useSandpackNavigation​

Parameters​

Returns​

Defined in​

useSandpackTheme​

Returns​

Defined in​

useTranspiledCode​

Returns​

Defined in​

Other​

Interfaces

Components

CodeEditorRef

Defined in

CodeEditor

Defined in

ErrorOverlay

Defined in

SandpackCodeEditor

Defined in

SandpackCodeViewer

Defined in

SandpackLayout

Defined in

SandpackPreview

Defined in

SandpackStack

Defined in

UnstyledOpenInCodeSandboxButton

Defined in

FileTabs

Parameters

Returns

Defined in

LoadingOverlay

Parameters

Returns

Defined in

Navigator

Parameters

Returns

Defined in

OpenInCodeSandboxButton

Returns

Defined in

RefreshButton

Parameters

Returns

Defined in

RunButton

Parameters

Returns

Defined in

SandpackFileExplorer

Parameters

Returns

Defined in

SandpackReactDevTools

Parameters

Returns

Defined in

SandpackTranspiledCode

Parameters

Returns

Defined in

Hooks

useActiveCode

Returns

Defined in

useErrorMessage

Returns

Defined in

useLoadingOverlayState

Parameters

Returns

Defined in

useSandpack

Returns

Defined in

useSandpackNavigation

Parameters

Returns

Defined in

useSandpackTheme

Returns

Defined in

useTranspiledCode

Returns

Defined in

Other