Interface: SandpackPreset

Defines a single preset that can be used to create a Sandpack sandbox.

Table of contents

Properties

Properties

dependencies

Optional dependencies: Record<string, string>

The dependencies that will be added to the sandbox, just like in package.json.


files

Optional files: Record<string, string>

The files that will be added to the sandbox (read-only). The key is the name of the file, and the value is the contents of the file.


initialSnippetContent

Optional initialSnippetContent: string

The initial content of the editable snippet.


label

label: string | Element

The label of the preset, displayed in the sandpack button dropdown.


meta

meta: string

The meta string that will be used to identify the preset from the fenced code block. e.g. "live react"


name

name: string

The name of the preset - use this to reference the preset from the defaultPreset field.


sandpackTemplate

sandpackTemplate: undefined | "node" | "static" | "angular" | "react" | "react-ts" | "solid" | "svelte" | "test-ts" | "vanilla-ts" | "vanilla" | "vue" | "vue-ts" | "nextjs" | "vite" | "vite-react" | "vite-react-ts" | "vite-preact" | "vite-preact-ts" | "vite-vue" | "vite-vue-ts" | "vite-svelte" | "vite-svelte-ts" | "astro"

The sandpack template that will be used to create the sandbox. e.g. "react", "react-ts", "vanilla".


sandpackTheme

sandpackTheme: undefined | "auto" | "light" | "dark" | DeepPartial<SandpackTheme>

The sandpack theme that will be used to create the sandbox. e.g. "light", "dark".


snippetFileName

snippetFileName: string

The name of the file that will be created in the sandbox. e.g. "/App.js".


snippetLanguage

Optional snippetLanguage: string

The language used in the editable snippet. e.g. "jsx", "tsx", etc.