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

• SandpackLogLevel

Classes

• SandpackClient

Interfaces

• BaseProtocolMessage
• BaseSandpackMessage
• BundlerState
• ClientOptions
• ErrorStackFrame
• Module
• ModuleSource
• NpmRegistry
• ProtocolErrorMessage
• ProtocolRequestMessage
• ProtocolResultMessage
• SandboxInfo
• SandpackBundlerFile
• SandpackError
• SandpackErrorMessage
• Test
• TranspiledModule

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

Name	Type
msg	SandpackMessage
clientId?	string

Returns

void

Defined in

types.ts:98

---

Listen

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

Type declaration

▸ (listener, clientId?): UnsubscribeFunction

Parameters

Name	Type
listener	ListenerFunction
clientId?	string

Returns

UnsubscribeFunction

Defined in

types.ts:94

---

ListenerFunction

Ƭ ListenerFunction: (msg: SandpackMessage) => void

Type declaration

▸ (msg): void

Parameters

Name	Type
msg	SandpackMessage

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

Name	Type
files	SandpackBundlerFiles
dependencies?	Dependencies
devDependencies?	Dependencies
entry?	string

Returns

SandpackBundlerFiles

Defined in

utils.ts:29

---

createPackageJSON

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

Parameters

Name	Type	Default value
dependencies	Dependencies	{}
devDependencies	Dependencies	{}
entry	string	"/index.js"

Returns

string

Defined in

utils.ts:12

---

extractErrorDetails

▸ extractErrorDetails(msg): SandpackError

Parameters

Name	Type
msg	SandpackErrorMessage

Returns

SandpackError

Defined in

utils.ts:89

---

normalizePath

▸ normalizePath<R>(path): R

Type parameters

Name	Type
R	extends unknown

Parameters

Name	Type
path	R

Returns

R

Defined in

utils.ts:183