Skip to main content

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:113


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

NameType
__namedParametersFileTabsProps & HTMLAttributes<HTMLDivElement>

Returns

Element

Defined in

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


LoadingOverlay

LoadingOverlay(__namedParameters): null | Element

Parameters

NameType
__namedParametersLoadingOverlayProps & HTMLAttributes<HTMLDivElement>

Returns

null | Element

Defined in

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


Navigator(__namedParameters): Element

Parameters

NameType
__namedParametersNavigatorProps & 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

NameType
__namedParametersRefreshButtonProps

Returns

Element

Defined in

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


RunButton

RunButton(__namedParameters): null | Element

Parameters

NameType
__namedParametersHTMLAttributes<HTMLButtonElement>

Returns

null | Element

Defined in

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


SandpackFileExplorer

SandpackFileExplorer(__namedParameters): null | Element

Parameters

NameType
__namedParametersSandpackFileExplorerProp & HTMLAttributes<HTMLDivElement>

Returns

null | Element

Defined in

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


SandpackReactDevTools

SandpackReactDevTools(__namedParameters): null | Element

Parameters

NameType
__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

NameType
__namedParametersCodeViewerProps & 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

NameType
codestring
readOnlyboolean
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

NameType
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

NameType
clientId?string

Returns

Object

NameType
back() => void
forward() => void
refresh() => void

Defined in

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


useSandpackTheme

useSandpackTheme(): Object

Returns

Object

NameType
themeSandpackTheme
themeIdstring

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

SandpackClientDispatch

Ƭ SandpackClientDispatch: (msg: SandpackMessage, clientId?: string) => void

Type declaration

▸ (msg, clientId?): void

Parameters
NameType
msgSandpackMessage
clientId?string
Returns

void

Defined in

sandpack-react/src/types.ts:476


SandpackClientListen

Ƭ SandpackClientListen: (listener: ListenerFunction, clientId?: string) => UnsubscribeFunction

Type declaration

▸ (listener, clientId?): UnsubscribeFunction

Parameters
NameType
listenerListenerFunction
clientId?string
Returns

UnsubscribeFunction

Defined in

sandpack-react/src/types.ts:481


SandpackContext

Ƭ SandpackContext: SandpackState & { dispatch: SandpackClientDispatch ; listen: SandpackClientListen }

Defined in

sandpack-react/src/types.ts:486


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:692


SandpackReactContext

Const SandpackReactContext: Context<null | SandpackContext>

Defined in

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

Setup

SandboxEnvironment

Ƭ SandboxEnvironment: "angular-cli" | "create-react-app" | "create-react-app-typescript" | "svelte" | "parcel" | "vue-cli" | "static" | "solid"

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

Ƭ SandpackPredefinedTemplate: "angular" | "react" | "react-ts" | "vanilla" | "vanilla-ts" | "vue" | "vue3" | "svelte" | "solid"

Defined in

sandpack-react/src/types.ts:215

Template

ANGULAR_TEMPLATE

Const ANGULAR_TEMPLATE: Object

Type declaration

NameType
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]/commonstring
[email protected]/compilerstring
[email protected]/corestring
[email protected]/platform-browserstring
[email protected]/platform-browser-dynamicstring
dependencies.core-jsstring
dependencies.rxjsstring
dependencies.zone.jsstring
entrystring
environmentstring
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.codestring
files./src/app/app.component.html{ code: string }
files./src/app/app.component.html.codestring
files./src/app/app.component.ts{ code: string }
files./src/app/app.component.ts.codestring
files./src/app/app.module.ts{ code: string }
files./src/app/app.module.ts.codestring
files./src/index.html{ code: string }
files./src/index.html.codestring
files./src/main.ts{ code: string }
files./src/main.ts.codestring
files./src/polyfills.ts{ code: string }
files./src/polyfills.ts.codestring
mainstring

Defined in

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


REACT_TEMPLATE

Const REACT_TEMPLATE: Object

Type declaration

NameType
dependencies{ react: string = "^18.0.0"; react-dom: string = "^18.0.0"; react-scripts: string = "^4.0.0" }
dependencies.reactstring
dependencies.react-domstring
dependencies.react-scriptsstring
entrystring
environmentstring
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.codestring
files./index.js{ code: string }
files./index.js.codestring
files./public/index.html{ code: string }
files./public/index.html.codestring
files./styles.css{ code: string }
files./styles.css.codestring
mainstring

Defined in

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


REACT_TYPESCRIPT_TEMPLATE

Const REACT_TYPESCRIPT_TEMPLATE: Object

Type declaration

NameType
dependencies{ react: string = "^18.0.0"; react-dom: string = "^18.0.0"; react-scripts: string = "^4.0.0" }
dependencies.reactstring
dependencies.react-domstring
dependencies.react-scriptsstring
devDependencies{ @types/react: string = "^18.0.0"; @types/react-dom: string = "^18.0.0"; typescript: string = "^4.0.0" }
[email protected]/reactstring
[email protected]/react-domstring
devDependencies.typescriptstring
entrystring
environmentstring
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.codestring
files./index.tsx{ code: string }
files./index.tsx.codestring
files./public/index.html{ code: string }
files./public/index.html.codestring
files./styles.css{ code: string }
files./styles.css.codestring
files.tsconfig.json{ code: string }
files.tsconfig.json.codestring
mainstring

Defined in

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


SOLID_TEMPLATE

Const SOLID_TEMPLATE: Object

Type declaration

NameType
dependencies{ solid-js: string = "1.3.15" }
dependencies.solid-jsstring
entrystring
environmentstring
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.codestring
files./index.html{ code: string }
files./index.html.codestring
files./index.tsx{ code: string }
files./index.tsx.codestring
files./styles.css{ code: string }
files./styles.css.codestring
mainstring

Defined in

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


SVELTE_TEMPLATE

Const SVELTE_TEMPLATE: Object

Type declaration

NameType
dependencies{ svelte: string = "^3.0.0" }
dependencies.sveltestring
entrystring
environmentstring
files{ /App.svelte: { code: string } ; /index.js: { code: string } ; /public/index.html: { code: string } }
files./App.svelte{ code: string }
files./App.svelte.codestring
files./index.js{ code: string }
files./index.js.codestring
files./public/index.html{ code: string }
files./public/index.html.codestring
mainstring

Defined in

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


VANILLA_TEMPLATE

Const VANILLA_TEMPLATE: Object

Type declaration

NameType
dependencies{}
entrystring
environmentstring
files{ /index.html: { code: string } ; /src/index.js: { code: string } ; /src/styles.css: { code: string } }
files./index.html{ code: string }
files./index.html.codestring
files./src/index.js{ code: string }
files./src/index.js.codestring
files./src/styles.css{ code: string }
files./src/styles.css.codestring
mainstring

Defined in

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


VANILLA_TYPESCRIPT_TEMPLATE

Const VANILLA_TYPESCRIPT_TEMPLATE: Object

Type declaration

NameType
dependencies{}
devDependencies{ typescript: string = "^4.0.0" }
devDependencies.typescriptstring
entrystring
environmentstring
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.codestring
files./src/index.ts{ code: string }
files./src/index.ts.codestring
files./src/styles.css{ code: string }
files./src/styles.css.codestring
files.tsconfig.json{ code: string }
files.tsconfig.json.codestring
mainstring

Defined in

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


VUE_TEMPLATE

Const VUE_TEMPLATE: Object

Type declaration

NameType
dependencies{ @vue/cli-plugin-babel: string = "4.1.1"; vue: string = "^2.6.11" }
[email protected]/cli-plugin-babelstring
dependencies.vuestring
entrystring
environmentstring
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.codestring
files./src/App.vue{ code: string }
files./src/App.vue.codestring
files./src/main.js{ code: string }
files./src/main.js.codestring
mainstring

Defined in

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


VUE_TEMPLATE_3

Const VUE_TEMPLATE_3: Object

Type declaration

NameType
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-babelstring
dependencies.core-jsstring
dependencies.vuestring
entrystring
environmentstring
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.codestring
files./src/App.vue{ code: string }
files./src/App.vue.codestring
files./src/main.js{ code: string }
files./src/main.js.codestring
mainstring

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:55


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