Interface: SandpackPreset

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


dependencies?Record<string, string>The dependencies that will be added to the sandbox, just like in package.json.
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?stringThe initial content of the editable snippet.
labelstring | ElementThe label of the preset, displayed in the sandpack button dropdown.
metastringThe meta string that will be used to identify the preset from the fenced code block. e.g. "live react"
namestringThe name of the preset - use this to reference the preset from the defaultPreset field.
sandpackTemplateundefined | "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".
sandpackThemeundefined | SandpackThemePropThe sandpack theme that will be used to create the sandbox. e.g. "light", "dark".
snippetFileNamestringThe name of the file that will be created in the sandbox. e.g. "/App.js".
snippetLanguage?stringThe language used in the editable snippet. e.g. "jsx", "tsx", etc.