Skip to main content

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.

import { SandpackClient } from "@codesandbox/sandpack-client";

const client = new SandpackClient("#preview", {
  files: {
    "/index.js": {
      code: `console.log(require('uuid'))`,
    },
  },
  entry: "/index.js",
  dependencies: {
    uuid: "latest",
  },
});

Enumerations

Classes

Interfaces

Type aliases

ClientStatus

Ƭ ClientStatus: "initializing" | "installing-dependencies" | "transpiling" | "evaluating" | "running-tests" | "idle"

Defined in

types.ts:83


Dependencies

Ƭ Dependencies: Record<string, string>

Defined in

types.ts:25


Dispatch

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

Type declaration

▸ (msg, clientId?): void

Parameters
NameType
msgSandpackMessage
clientId?string
Returns

void

Defined in

types.ts:98


Listen

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

Type declaration

▸ (listener, clientId?): UnsubscribeFunction

Parameters
NameType
listenerListenerFunction
clientId?string
Returns

UnsubscribeFunction

Defined in

types.ts:94


ListenerFunction

Ƭ ListenerFunction: (msg: SandpackMessage) => void

Type declaration

▸ (msg): void

Parameters
NameType
msgSandpackMessage
Returns

void

Defined in

types.ts:91


Modules

Ƭ Modules: Record<string, { code: string ; path: string }>

Defined in

types.ts:17


ReactDevToolsMode

Ƭ ReactDevToolsMode: "latest" | "legacy"

Defined in

types.ts:27


SandboxTestMessage

Ƭ SandboxTestMessage: RunAllTests | RunTests | ClearJestErrors | { type: "test" } & InitializedTestsMessage | TestCountMessage | TotalTestStartMessage | TotalTestEndMessage | AddFileMessage | RemoveFileMessage | FileErrorMessage | DescribeStartMessage | DescribeEndMessage | AddTestMessage | TestStartMessage | TestEndMessage

Defined in

types.ts:198


SandpackBundlerFiles

Ƭ SandpackBundlerFiles: Record<string, SandpackBundlerFile>

Defined in

types.ts:10


SandpackMessage

Ƭ SandpackMessage: BaseSandpackMessage & { type: "initialized" } | { firstLoad?: boolean ; type: "start" } | { status: ClientStatus ; type: "status" } | { state: BundlerState ; type: "state" } | { type: "success" } | { action: "show-error" ; type: "action" } & SandpackErrorMessage | { action: "notification" ; notificationType: "error" ; title: string ; type: "action" } | { compilatonError: boolean ; type: "done" } | { back: boolean ; forward: boolean ; type: "urlchange" ; url: string } | { height: number ; type: "resize" } | { data: Record<string, Record<string, unknown>> ; type: "transpiler-context" } | { clearConsoleDisabled?: boolean ; customNpmRegistries?: NpmRegistry[] ; disableDependencyPreprocessing?: boolean ; externalResources: string[] ; hasFileResolver: boolean ; isInitializationCompile?: boolean ; logLevel?: SandpackLogLevel ; modules: Modules ; reactDevTools?: ReactDevToolsMode ; showErrorScreen: boolean ; showLoadingScreen: boolean ; showOpenInCodeSandbox: boolean ; skipEval: boolean ; template?: string | ITemplate ; type: "compile" ; version: number } | { type: "refresh" } | { type: "urlback" } | { type: "urlforward" } | { type: "get-transpiler-context" } | { type: "activate-react-devtools" } | { log: { data: string[] ; id: string ; method: SandpackMessageConsoleMethods }[] ; type: "console" } | SandboxTestMessage

Defined in

types.ts:291


SandpackMessageConsoleMethods

Ƭ SandpackMessageConsoleMethods: "log" | "debug" | "info" | "warn" | "error" | "table" | "clear" | "time" | "timeEnd" | "count" | "assert"

Defined in

types.ts:119


Template

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

Defined in

types.ts:383


TestError

Ƭ TestError: Error & { mappedErrors?: { _originalColumnNumber: number ; _originalFunctionName: string ; _originalLineNumber: number ; _originalScriptCode: { content: string ; highlight: boolean ; lineNumber: number }[] | null ; fileName: string }[] ; matcherResult?: boolean }

Defined in

types.ts:174


UnsubscribeFunction

Ƭ UnsubscribeFunction: () => void

Type declaration

▸ (): void

Returns

void

Defined in

types.ts:92

Functions

addPackageJSONIfNeeded

addPackageJSONIfNeeded(files, dependencies?, devDependencies?, entry?): SandpackBundlerFiles

Parameters

NameType
filesSandpackBundlerFiles
dependencies?Dependencies
devDependencies?Dependencies
entry?string

Returns

SandpackBundlerFiles

Defined in

utils.ts:29


createPackageJSON

createPackageJSON(dependencies?, devDependencies?, entry?): string

Parameters

NameTypeDefault value
dependenciesDependencies{}
devDependenciesDependencies{}
entrystring"/index.js"

Returns

string

Defined in

utils.ts:12


extractErrorDetails

extractErrorDetails(msg): SandpackError

Parameters

NameType
msgSandpackErrorMessage

Returns

SandpackError

Defined in

utils.ts:89


normalizePath

normalizePath<R>(path): R

Type parameters

NameType
Rextends unknown

Parameters

NameType
pathR

Returns

R

Defined in

utils.ts:183