WebSandbox

A frontend code sandbox component that compiles and previews React or HTML code in the page.

Examples

React Code Preview

When template is set to react, the following dependencies will be automatically added to the imports parameter. When a specific React version is needed, you can override the corresponding keys:

{
  "react": "https://esm.sh/react",
  "react/": "https://esm.sh/react/",
  "react-dom": "https://esm.sh/react-dom",
  "react-dom/": "https://esm.sh/react-dom/"
}

HTML Code Preview

Error Handling

API

Props

Attribute	Type	Default Value	Description
value	`Dict[str, Union[str, SandboxFileData]]`	None	Files collection passed to the Sandbox. When `template` is `react`, `['index.tsx', 'index.jsx', 'index.ts', 'index.js']` are the default entry files. When `template` is `html`, `['index.html']` is the default entry file. You can also manually specify the entry file by setting the `is_entry` property.
template	`Literal['react', 'html']`	'react'	Template type for Sandbox rendering.
show_render_error	`bool`	True	Whether to show rendering error messages.
show_compile_error	`bool`	True	Whether to show compilation failure styles.
compile_error_render	`str \| None`	None	Custom compilation failure style, passed as a JavaScript function string.
imports	`Dict[str, str]`	None	Corresponds to the imports field in importmap, see MDN, used for adding online frontend dependencies. When `template` is `react`, React-related dependencies are automatically added as shown in the example above.
height	`str \| float \| int`	400	Height of the component. If a number is passed, it's specified in pixels; if a string is passed, it's specified in CSS units.

Events

Event	Description
`pro.WebSandbox.compile_success(fn, ···)`	Triggered when Sandbox compilation succeeds.
`pro.WebSandbox.compile_error(fn, ···)`	Triggered when Sandbox compilation fails.
`pro.WebSandbox.render_error(fn, ···)`	Triggered when Sandbox rendering throws an error.

Slots

SLOTS=['compileErrorRender']

Types

class SandboxFileData(TypedDict):
    code: str
    is_entry: Optional[bool]