Overview
- Sandpack React
- <Sandpack /> component initializes
- Manages React integration & UI state
- Sandpack Clinet
- loadSandpackClient() selects appropriate client type (VM/Runtime/Static/Node)
- Creates sandbox context from files, template, and dependencies
- Bundler
- Processes sandbox setup
- Handles code bundling
- Returns updates to client
sequenceDiagram
autonumber
participant R as Sandpack-react
participant C as Sandpack-client
Note left of R: <Sandpack />
Note right of C: loadSandpackClient(...)
Note right of C: Depending on the template/env<br/>loadSandpackClient will return a<br />vm, runtime, static or node client
Note right of C: sandpack-client/clients/index.ts
R->>+C: Get sandbox context
Note over R,C: Based on files, template, and deps, <br/> will be create a SandpackContextInfo.
Note right of R: getSandpackStateFromProps(...)
C->>-R: New client instance
Note left of R: new SandpackClient()
create participant B as Bundler
C->>+B: Dispatch sandbox setup
B->>+C: Messages with updates
Note left of R: Once it's done, show <br/>iframe with preview
C->>-R: Done
C->>+R: Dispatch sandbox setup