Sandpack Demo Component

Sandpack Demo Component

The SandpackDemo component allows you to create interactive code sandboxes with Polotno pre-configured. It's perfect for demonstrating code examples in your documentation.

Basic Usage

Here's a basic Polotno editor:

Custom Dependencies

You can add custom dependencies beyond the default ones:

Custom Code Example

You can provide custom files to show specific examples:

Component Props

The SandpackDemo component accepts the following props:

dependencies

• Type: Record<string, string>
• Default: {}
• Description: Custom dependencies to include alongside the default ones (polotno, react, react-dom, react-scripts)

files

• Type: Record<string, string>
• Default: {}
• Description: Custom files to include in the sandbox. If not provided, uses a default App.js with basic Polotno setup

options

• Type: object
• Default: {}
• Description: Custom options for the Sandpack instance (showNavigator, showTabs, etc.)

height

• Type: number | string
• Default: 400
• Description: Height of the sandbox editor

theme

• Type: 'light' | 'dark' | 'auto'
• Default: 'light'
• Description: Theme for the sandbox

Advanced Example