Skip to main content

Interface: SandpackProps

Properties​

customSetup​

• Optional customSetup: SandpackSetup

Pass custom properties to set your own Sandpack environment.

Since each template uses the same type to define the files, you can overwrite the contents of any of the template files.

Defined in​

sandpack-react/src/types.ts:65

files​

• Optional files: SandpackFile | Record<string, string>

It accepts an object, where each key is the relative path of that file in the sandbox folder structure. Files passed in through the files prop override those in the template structure.

Since each template uses the same type to define the files, you can overwrite the contents of any of the template files.

Example:

{
 "/App.js": "export default () => 'foo'"
}

Defined in​

sandpack-react/src/types.ts:50

options​

• Optional options: SandpackOptions

Pass custom properties to customize the interface and the behavior of the sandbox, such as initialization mode, recompile mode, files resolver, etc.

Defined in​

sandpack-react/src/types.ts:79

template​

• Optional template: SandpackPredefinedTemplate

Set of presets to easily initialize sandboxes. Each template contains its files, environment and dependencies, and you can overwrite it using customSetup or dependencies.

Defined in​

sandpack-react/src/types.ts:57

theme​

• Optional theme: SandpackThemeProp

The theme specifies the color set of the components, syntax highlight, and typography. Use this prop in order to match the design aspect of your website.

Set as auto to turn it color scheme sensitive

Defined in​

sandpack-react/src/types.ts:73