Module: _internal

Interfaces

• API
• AppConfig
• ContentConfig
• EditorConfig
• EditorPosition
• FormatterConfig
• TestResult
• Types
• UserConfig

Type Aliases

APICommands

Ƭ APICommands: "setBroadcastToken" | "showVersion"

Defined in

models.ts:280

---

AppLanguage

Ƭ AppLanguage: "auto" | "ar" | "de" | "en" | "es" | "fr" | "hi" | "it" | "ja" | "pt" | "ru" | "ur" | "zh-CN"

Defined in

models.ts:1684

---

CDN

Ƭ CDN: "jspm" | "skypack" | "jsdelivr" | "fastly.jsdelivr" | "gcore.jsdelivr" | "testingcf.jsdelivr" | "jsdelivr.b-cdn" | "jsdelivr.gh" | "fastly.jsdelivr.gh" | "gcore.jsdelivr.gh" | "testingcf.jsdelivr.gh" | "jsdelivr.b-cdn.gh" | "jsdelivr.esm" | "fastly.jsdelivr.esm" | "gcore.jsdelivr.esm" | "testingcf.jsdelivr.esm" | "jsdelivr.b-cdn.esm" | "esm.run" | "esm.sh" | "esbuild" | "bundle.run" | "unpkg" | "npmcdn" | "statically"

Defined in

models.ts:1765

---

CodejarTheme

Ƭ CodejarTheme: "a11y-dark" | "atom-dark" | "base16-ateliersulphurpool-light" | "cb" | "coldark-cold" | "coldark-dark" | "coy" | "coy-without-shadows" | "darcula" | "dark" | "dracula" | "duotone-dark" | "duotone-earth" | "duotone-forest" | "duotone-light" | "duotone-sea" | "duotone-space" | "funky" | "ghcolors" | "gruvbox-dark" | "gruvbox-light" | "holi-theme" | "hopscotch" | "laserwave" | "lucario" | "material-dark" | "material-light" | "material-oceanic" | "monochrome" | "monochrome-dark" | "night-owl" | "nord" | "okaidia" | "one-dark" | "one-light" | "pojoaque" | "shades-of-purple" | "solarized-dark-atom" | "solarized-light" | "synthwave84" | "tomorrow" | "twilight" | "vs" | "vsc-dark-plus" | "xonokai" | "z-touchs"

Defined in

models.ts:1598

---

CodemirrorTheme

Ƭ CodemirrorTheme: "amy" | "aura" | "ayu-light" | "barf" | "basic-light" | "basic-dark" | "bespin" | "birds-of-paradise" | "boys-and-girls" | "clouds" | "cm-light" | "cobalt" | "cool-glow" | "dracula" | "espresso" | "github-dark" | "github-light" | "gruvbox-dark" | "gruvbox-light" | "material-dark" | "material-light" | "monochrome" | "monochrome-dark" | "noctis-lilac" | "nord" | "one-dark" | "rose-pine-dawn" | "smoothy" | "solarized-light" | "solarized-dark" | "tokyo-night" | "tokyo-night-day" | "tokyo-night-storm" | "tomorrow"

Defined in

models.ts:1562

---

CssPresetId

Ƭ CssPresetId: "" | "normalize.css" | "reset-css"

Defined in

models.ts:1199

---

EditorId

Ƭ EditorId: "markup" | "style" | "script"

Defined in

models.ts:1099

---

EditorTheme

Ƭ EditorTheme: MonacoTheme | CodemirrorTheme | CodejarTheme | `${MonacoTheme}@${Theme}` | `${CodemirrorTheme}@${Theme}` | `${CodejarTheme}@${Theme}` | `monaco:${MonacoTheme}` | `codemirror:${CodemirrorTheme}` | `codejar:${CodejarTheme}` | `monaco:${MonacoTheme}@${Theme}` | `codemirror:${CodemirrorTheme}@${Theme}` | `codejar:${CodejarTheme}@${Theme}`

Defined in

models.ts:1646

---

MonacoTheme

Ƭ MonacoTheme: "active4d" | "all-hallows-eve" | "amy" | "birds-of-paradise" | "blackboard" | "brilliance-black" | "brilliance-dull" | "chrome-devtools" | "clouds-midnight" | "clouds" | "cobalt" | "cobalt2" | "custom-vs-light" | "custom-vs-dark" | "dawn" | "dracula" | "dreamweaver" | "eiffel" | "espresso-libre" | "github" | "github-dark" | "github-light" | "hc-black" | "hc-light" | "idle" | "idlefingers" | "iplastic" | "katzenmilch" | "krtheme" | "kuroir" | "lazy" | "magicwb-amiga" | "merbivore-soft" | "merbivore" | "monochrome" | "monochrome-dark" | "monokai" | "monokai-bright" | "monoindustrial" | "night-owl" | "nord" | "oceanic-next" | "pastels-on-dark" | "slush-and-poppies" | "solarized-dark" | "solarized-light" | "spacecadet" | "sunburst" | "textmate-mac-classic" | "tomorrow" | "tomorrow-night" | "tomorrow-night-blue" | "tomorrow-night-bright" | "tomorrow-night-eighties" | "twilight" | "upstream-sunburst" | "vibrant-ink" | "vs" | "vs-dark" | "xcode-default" | "zenburnesque"

Defined in

models.ts:1499

---

Processor

Ƭ Processor: "postcss" | "postcssImportUrl" | "tailwindcss" | "windicss" | "unocss" | "tokencss" | "lightningcss" | "autoprefixer" | "postcssPresetEnv" | "cssmodules" | "purgecss" | "cssnano"

Defined in

models.ts:1157

---

TemplateName

Ƭ TemplateName: "blank" | "javascript" | "typescript" | "react" | "react-native" | "vue2" | "vue" | "angular" | "preact" | "svelte" | "solid" | "lit" | "stencil" | "mdx" | "astro" | "riot" | "malina" | "jquery" | "backbone" | "knockout" | "jest" | "jest-react" | "bootstrap" | "tailwindcss" | "d3" | "phaser" | "coffeescript" | "livescript" | "civet" | "clio" | "imba" | "rescript" | "reason" | "ocaml" | "python" | "pyodide" | "python-wasm" | "r" | "ruby" | "ruby-wasm" | "go" | "php" | "php-wasm" | "cpp" | "clang" | "cpp-wasm" | "perl" | "lua" | "lua-wasm" | "teal" | "fennel" | "julia" | "scheme" | "commonlisp" | "clojurescript" | "gleam" | "tcl" | "markdown" | "assemblyscript" | "wat" | "sql" | "postgresql" | "prolog" | "blockly" | "diagrams"

Defined in

models.ts:1304

---

Theme

Ƭ Theme: "light" | "dark"

Defined in

models.ts:1830

---

ToolsPaneStatus

Ƭ ToolsPaneStatus: "closed" | "open" | "full" | "none" | ""

Defined in

models.ts:1380

---

WatchCode

Ƭ WatchCode: (event: "code", fn: (data: { code: Code ; config: Config }) => void) => { remove: () => void }

Called when the playground "content" is changed (see getCode and getConfig).

This includes changes in:

• Code (in editors)
• Editor languages
• CSS processors
• External resources
• Project info (e.g. allows adding content in page head and attributes to <html> element)
• Custom settings (e.g. allows changing import maps)
• Project title
• Test code

Type declaration

▸ (event, fn): Object

Parameters

Name	Type
event	"code"
fn	(data: { code: Code ; config: Config }) => void

Returns

Object

Name	Type
remove	() => void

Defined in

models.ts:247

---

WatchConsole

Ƭ WatchConsole: (event: "console", fn: (data: { args: any[] ; method: string }) => void) => { remove: () => void }

Type declaration

▸ (event, fn): Object

Parameters

Name	Type
event	"console"
fn	(data: { args: any[] ; method: string }) => void

Returns

Object

Name	Type
remove	() => void

Defined in

models.ts:252

---

WatchDestroy

Ƭ WatchDestroy: (event: "destroy", fn: () => void) => { remove: () => void }

Type declaration

▸ (event, fn): Object

Parameters

Name	Type
event	"destroy"
fn	() => void

Returns

Object

Name	Type
remove	() => void

Defined in

models.ts:262

---

WatchLoad

Ƭ WatchLoad: (event: "load", fn: () => void) => { remove: () => void }

Called when the playground first loads.

Type declaration

▸ (event, fn): Object

Parameters

Name	Type
event	"load"
fn	() => void

Returns

Object

Name	Type
remove	() => void

Defined in

models.ts:224

---

WatchReady

Ƭ WatchReady: (event: "ready", fn: (data: { config: Config }) => void) => { remove: () => void }

Called when a new project is loaded (including when imported) and the playground is ready to run.

Type declaration

▸ (event, fn): Object

Parameters

Name	Type
event	"ready"
fn	(data: { config: Config }) => void

Returns

Object

Name	Type
remove	() => void

Defined in

models.ts:229

---

WatchTests

Ƭ WatchTests: (event: "tests", fn: (data: { error?: string ; results: TestResult[] }) => void) => { remove: () => void }

Type declaration

▸ (event, fn): Object

Parameters

Name	Type
event	"tests"
fn	(data: { error?: string ; results: TestResult[] }) => void

Returns

Object

Name	Type
remove	() => void

Defined in

models.ts:257