"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8434"],{6263:function(e,n,s){s.r(n),s.d(n,{default:()=>p,frontMatter:()=>t,metadata:()=>i,assets:()=>l,toc:()=>a,contentTitle:()=>c});var i=JSON.parse('{"id":"configuration/configuration-object","title":"Configuration Object","description":"LiveCodes is very flexible and provides a wide range of configuration options.","source":"@site/docs/configuration/configuration-object.mdx","sourceDirName":"configuration","slug":"/configuration/configuration-object","permalink":"/docs/configuration/configuration-object","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/configuration/configuration-object.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Configuration","permalink":"/docs/configuration/"},"next":{"title":"Query Parameters","permalink":"/docs/configuration/query-params"}}'),r=s("5893"),d=s("65"),o=s("3365");let t={},c="Configuration Object",l={},a=[{value:"Usage",id:"usage",level:2},{value:"TypeScript Types",id:"typescript-types",level:2},{value:"Default Config",id:"default-config",level:2},{value:"Project Content",id:"project-content",level:2},{value:"<code>title</code>",id:"title",level:3},{value:"<code>description</code>",id:"description",level:3},{value:"<code>head</code>",id:"head",level:3},{value:"<code>htmlAttrs</code>",id:"htmlattrs",level:3},{value:"<code>tags</code>",id:"tags",level:3},{value:"<code>activeEditor</code>",id:"activeeditor",level:3},{value:"<code>languages</code>",id:"languages",level:3},{value:"<code>markup</code>",id:"markup",level:3},{value:"<code>style</code>",id:"style",level:3},{value:"<code>script</code>",id:"script",level:3},{value:"<code>stylesheets</code>",id:"stylesheets",level:3},{value:"<code>scripts</code>",id:"scripts",level:3},{value:"<code>cssPreset</code>",id:"csspreset",level:3},{value:"<code>processors</code>",id:"processors",level:3},{value:"<code>customSettings</code>",id:"customsettings",level:3},{value:"<code>imports</code>",id:"imports",level:3},{value:"<code>types</code>",id:"types",level:3},{value:"<code>tests</code>",id:"tests",level:3},{value:"<code>version</code>",id:"version",level:3},{value:"App Settings",id:"app-settings",level:2},{value:"<code>readonly</code>",id:"readonly",level:3},{value:"<code>allowLangChange</code>",id:"allowlangchange",level:3},{value:"<code>view</code>",id:"view",level:3},{value:"<code>mode</code>",id:"mode",level:3},{value:"<code>tools</code>",id:"tools",level:3},{value:"<code>zoom</code>",id:"zoom",level:3},{value:"User Settings",id:"user-settings",level:2},{value:"<code>enableAI</code>",id:"enableai",level:3},{value:"<code>autoupdate</code>",id:"autoupdate",level:3},{value:"<code>autosave</code>",id:"autosave",level:3},{value:"<code>autotest</code>",id:"autotest",level:3},{value:"<code>delay</code>",id:"delay",level:3},{value:"<code>formatOnsave</code>",id:"formatonsave",level:3},{value:"<code>layout</code>",id:"layout",level:3},{value:"<code>theme</code>",id:"theme",level:3},{value:"<code>themeColor</code>",id:"themecolor",level:3},{value:"<code>editorTheme</code>",id:"editortheme",level:3},{value:"<code>appLanguage</code>",id:"applanguage",level:3},{value:"<code>recoverUnsaved</code>",id:"recoverunsaved",level:3},{value:"<code>welcome</code>",id:"welcome",level:3},{value:"<code>showSpacing</code>",id:"showspacing",level:3},{value:"<code>editor</code>",id:"editor",level:3},{value:"<code>fontFamily</code>",id:"fontfamily",level:3},{value:"<code>fontSize</code>",id:"fontsize",level:3},{value:"<code>useTabs</code>",id:"usetabs",level:3},{value:"<code>tabSize</code>",id:"tabsize",level:3},{value:"<code>lineNumbers</code>",id:"linenumbers",level:3},{value:"<code>wordWrap</code>",id:"wordwrap",level:3},{value:"<code>closeBrackets</code>",id:"closebrackets",level:3},{value:"<code>foldRegions</code>",id:"foldregions",level:3},{value:"<code>emmet</code>",id:"emmet",level:3},{value:"<code>editorMode</code>",id:"editormode",level:3},{value:"<code>semicolons</code>",id:"semicolons",level:3},{value:"<code>singleQuote</code>",id:"singlequote",level:3},{value:"<code>trailingComma</code>",id:"trailingcomma",level:3}];function h(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,d.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"configuration-object",children:"Configuration Object"})}),"\n","\n",(0,r.jsx)(n.p,{children:"LiveCodes is very flexible and provides a wide range of configuration options.\nA JavaScript object is used for configuration and keeping state."}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(n.p,{children:["The configuration object can be used while initializing a new playground using the ",(0,r.jsx)(n.a,{href:"/docs/sdk/",children:"SDK"}),"."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { createPlayground } from 'livecodes';\n\n(async () => {\n  const playground = await createPlayground('#container', {\n    config: {\n      // config options here\n    },\n  });\n\n  // the object can be retrieved using the method `getConfig`\n  console.log(await playground.getConfig());\n\n  // and can be later changed using the method `setConfig`\n  await playground.setConfig({\n    // new config options\n  });\n})();\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Alternatively, the URL ",(0,r.jsx)(n.a,{href:"/docs/configuration/query-params",children:"query parameter"})," ",(0,r.jsx)(n.code,{children:"config"})," can provide a URL to a JSON representation of the configuration object to be used while initializing the app."]}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"https://livecodes.io/?config=https://my-custom-server.com/config.json\n"})}),"\n",(0,r.jsx)(n.h2,{id:"typescript-types",children:"TypeScript Types"}),"\n",(0,r.jsxs)(n.p,{children:["TypeScript types are ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:"documented here"})," and can be imported from the library."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import type { Config } from 'livecodes';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"default-config",children:"Default Config"}),"\n",(0,r.jsxs)(n.p,{children:["Default config is ",(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/default-config.ts",children:"defined here"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"project-content",children:"Project Content"}),"\n",(0,r.jsxs)(n.p,{children:["These are properties that define the content of the current ",(0,r.jsx)(n.a,{href:"/docs/features/projects",children:"project"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"title",children:(0,r.jsx)(n.code,{children:"title"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#title",children:(0,r.jsx)(n.code,{children:"string"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'"Untitled Project"'})]}),"\n",(0,r.jsxs)(n.p,{children:["Project title. This is used as ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," title and title meta tag. Also used in ",(0,r.jsx)(n.a,{href:"/docs/features/projects",children:"project"})," search. This can be set in the UI from the title input (above result page) or from Project menu \u2192 Project Info."]}),"\n",(0,r.jsx)(n.h3,{id:"description",children:(0,r.jsx)(n.code,{children:"description"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#description",children:(0,r.jsx)(n.code,{children:"string"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'""'})]}),"\n",(0,r.jsxs)(n.p,{children:["Project description. Used in ",(0,r.jsx)(n.a,{href:"/docs/features/projects",children:"project"})," search and result page description meta tag. This can be set in the UI from Project menu \u2192 Project Info."]}),"\n",(0,r.jsx)(n.h3,{id:"head",children:(0,r.jsx)(n.code,{children:"head"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#head",children:(0,r.jsx)(n.code,{children:"string"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'\'<meta charset="UTF-8" />\\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />\''})]}),"\n",(0,r.jsxs)(n.p,{children:["Content added to the ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," ",(0,r.jsx)(n.code,{children:"<head>"})," element. This can be set in the UI from Project menu \u2192 Project Info."]}),"\n",(0,r.jsx)(n.h3,{id:"htmlattrs",children:(0,r.jsx)(n.code,{children:"htmlAttrs"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#htmlattrs",children:(0,r.jsx)(n.code,{children:"string | Record<string, string>"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'\'lang="en" class=""\''})]}),"\n",(0,r.jsxs)(n.p,{children:["Attributes added to the ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," ",(0,r.jsx)(n.code,{children:"<html>"})," element. It can be an object or a string."]}),"\n",(0,r.jsxs)(n.p,{children:["Example: ",(0,r.jsx)(n.code,{children:'{ lang: "en", class: "dark" }'})," or ",(0,r.jsx)(n.code,{children:'\'lang="en" class="dark"\''}),",\nbecome ",(0,r.jsx)(n.code,{children:'<html lang="en" class="dark">'}),"."]}),"\n",(0,r.jsx)(n.p,{children:"This can be set in the UI from Project menu \u2192 Project Info."}),"\n",(0,r.jsx)(n.h3,{id:"tags",children:(0,r.jsx)(n.code,{children:"tags"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#tags",children:(0,r.jsx)(n.code,{children:"string[]"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"[]"})]}),"\n",(0,r.jsxs)(n.p,{children:["Project tags. Used in ",(0,r.jsx)(n.a,{href:"/docs/features/projects",children:"project"})," filter and search. This can be set in the UI from Project menu \u2192 Project Info."]}),"\n",(0,r.jsx)(n.h3,{id:"activeeditor",children:(0,r.jsx)(n.code,{children:"activeEditor"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#activeeditor",children:(0,r.jsx)(n.code,{children:'"markup" | "style" | "script" | undefined'})})]}),"\n",(0,r.jsx)(n.p,{children:'Default: Last used editor for user, otherwise "markup"'}),"\n",(0,r.jsx)(n.p,{children:"Selects the active editor to show."}),"\n",(0,r.jsx)(n.h3,{id:"languages",children:(0,r.jsx)(n.code,{children:"languages"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#languages",children:(0,r.jsx)(n.code,{children:"Language[] | undefined"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: all supported languages in full app and only current editor languages in ",(0,r.jsx)(n.a,{href:"/docs/features/embeds",children:"embeds"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["List of enabled languages. Languages that are not already loaded in the editors (",(0,r.jsx)(n.a,{href:"#markup",children:"markup"}),", ",(0,r.jsx)(n.a,{href:"#style",children:"style"})," and ",(0,r.jsx)(n.a,{href:"#script",children:"script"}),") can be selected from a drop down menu at the editor title."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Change Language",src:s(4945).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(n.h3,{id:"markup",children:(0,r.jsx)(n.code,{children:"markup"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#markup",children:(0,r.jsx)(n.code,{children:"Editor"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'{ language: "html", content: "" }'})]}),"\n",(0,r.jsx)(n.p,{children:"An object that configures the language and content of the markup editor. This can include the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"language"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:"Language"}),"\nDefault: ",(0,r.jsx)(n.code,{children:'"html"'})," in markup editor, ",(0,r.jsx)(n.code,{children:'"css"'})," in style editor and ",(0,r.jsx)(n.code,{children:'"javascript"'})," in script editor.\nThis can be a language name, extension or alias (as defined in ",(0,r.jsx)(n.a,{href:"/docs/languages/",children:"language documentations"}),").\n(e.g. ",(0,r.jsx)(n.code,{children:'"markdown"'}),", ",(0,r.jsx)(n.code,{children:'"md"'}),")"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"content"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#content",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:'""'}),"\nThe initial content of the code editor."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"contentUrl"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#contenturl",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nA URL to load ",(0,r.jsx)(n.code,{children:"content"})," from. It has to be a valid URL that is CORS-enabled.\nThe URL is only fetched if ",(0,r.jsx)(n.code,{children:"content"})," property had no value."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"hiddenContent"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#hiddencontent",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nHidden content that gets evaluated without being visible in the code editor.\nThis can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"hiddenContentUrl"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#hiddencontenturl",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nA URL to load ",(0,r.jsx)(n.code,{children:"hiddenContent"})," from. It has to be a valid URL that is CORS-enabled.\nThe URL is only fetched if ",(0,r.jsx)(n.code,{children:"hiddenContent"})," property had no value."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"foldedLines"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#foldedlines",children:(0,r.jsx)(n.code,{children:"Array<{ from: number; to: number }> | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nLines that get folded when the editor loads. The code can be unfolded by clicking on arrow beside the line.\nThis can be useful for less relevant code in embedded playgrounds."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"title"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#title",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:'""'}),'\nIf set, this is used as the title of the editor in the UI, overriding the default title set to the language name (e.g. "Python" can be used instead of "Py (Wasm)").']}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"hideTitle"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#hidetitle",children:(0,r.jsx)(n.code,{children:"boolean | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:'""'}),"\nIf ",(0,r.jsx)(n.code,{children:"true"}),", the title of the code editor is hidden, however its code is still evaluated.\nThis can be useful in embedded playgrounds (e.g. for hiding unnecessary code)."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"order"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#order",children:(0,r.jsx)(n.code,{children:"number | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"0"}),"\nThe order of the editor in the UI."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"selector"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#selector",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nA CSS selector to load ",(0,r.jsx)(n.code,{children:"content"})," from ",(0,r.jsx)(n.a,{href:"/docs/features/import#import-code-from-dom",children:"DOM import"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"position"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#position",children:(0,r.jsx)(n.code,{children:"{lineNumber: number, column?: number} | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nThe initial position of the cursor in the code editor.\nExample: ",(0,r.jsx)(n.code,{children:"{lineNumber: 5, column: 10}"})]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"style",children:(0,r.jsx)(n.code,{children:"style"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#style",children:(0,r.jsx)(n.code,{children:"Editor"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'{ language: "css", content: "" }'})]}),"\n",(0,r.jsxs)(n.p,{children:["An object that configures the language and content of the style editor. See ",(0,r.jsx)(n.a,{href:"#markup",children:"markup"})," for more details."]}),"\n",(0,r.jsx)(n.h3,{id:"script",children:(0,r.jsx)(n.code,{children:"script"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#script",children:(0,r.jsx)(n.code,{children:"Editor"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'{ language: "javascript", content: "" }'})]}),"\n",(0,r.jsxs)(n.p,{children:["An object that configures the language and content of the script editor. See ",(0,r.jsx)(n.a,{href:"#markup",children:"markup"})," for more details."]}),"\n",(0,r.jsx)(n.h3,{id:"stylesheets",children:(0,r.jsx)(n.code,{children:"stylesheets"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#stylesheets",children:(0,r.jsx)(n.code,{children:"string[]"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"[]"})]}),"\n",(0,r.jsxs)(n.p,{children:["List of URLs for ",(0,r.jsx)(n.a,{href:"/docs/features/external-resources",children:"external stylesheets"})," to add to the ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"scripts",children:(0,r.jsx)(n.code,{children:"scripts"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#scripts",children:(0,r.jsx)(n.code,{children:"string[]"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"[]"})]}),"\n",(0,r.jsxs)(n.p,{children:["List of URLs for ",(0,r.jsx)(n.a,{href:"/docs/features/external-resources",children:"external scripts"})," to add to the ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"csspreset",children:(0,r.jsx)(n.code,{children:"cssPreset"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#csspreset",children:(0,r.jsx)(n.code,{children:'"" | "normalize.css" | "reset-css"'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'""'})]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/features/external-resources#css-presets",children:"CSS Preset"})," to use."]}),"\n",(0,r.jsx)(n.h3,{id:"processors",children:(0,r.jsx)(n.code,{children:"processors"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/Processor",children:(0,r.jsx)(n.code,{children:"Processor[]"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"[]"})]}),"\n",(0,r.jsxs)(n.p,{children:["List of enabled ",(0,r.jsx)(n.a,{href:"/docs/features/css#css-processors",children:"CSS processors"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"customsettings",children:(0,r.jsx)(n.code,{children:"customSettings"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#customsettings",children:(0,r.jsx)(n.code,{children:"CustomSettings"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"{}"})]}),"\n",(0,r.jsxs)(n.p,{children:["Defines ",(0,r.jsx)(n.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," for the current project."]}),"\n",(0,r.jsx)(n.h3,{id:"imports",children:(0,r.jsx)(n.code,{children:"imports"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#imports",children:(0,r.jsx)(n.code,{children:"[key: string]: string"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"{}"})]}),"\n",(0,r.jsxs)(n.p,{children:["Allows specifying custom ",(0,r.jsx)(n.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," for ",(0,r.jsx)(n.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"module imports"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"For example, adding this JavaScript code:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"import moment from 'moment';\nimport { partition } from 'lodash';\n"})}),"\n",(0,r.jsx)(n.p,{children:"would add this import map in the result page:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<script type="importmap">\n  {\n    "imports": {\n      "moment": "https://esm.sh/moment",\n      "lodash": "https://esm.sh/lodash"\n    }\n  }\n<\/script>\n'})}),"\n",(0,r.jsxs)(n.p,{children:["However, if ",(0,r.jsx)(n.code,{children:"imports"})," is specified as follows:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",children:'{\n  "imports": {\n    "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"\n  }\n}\n'})}),"\n",(0,r.jsx)(n.p,{children:"The import map becomes like this:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<script type="importmap">\n  {\n    "imports": {\n      "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js",\n      "lodash": "https://esm.sh/lodash"\n    }\n  }\n<\/script>\n'})}),"\n",(0,r.jsxs)(n.admonition,{title:"Note",type:"info",children:[(0,r.jsxs)(n.p,{children:["Currently, multiple import maps are not yet supported. ",(0,r.jsx)(n.a,{href:"https://crbug.com/927119",children:"https://crbug.com/927119"})]}),(0,r.jsxs)(n.p,{children:["When bare module imports are encountered, LiveCodes adds an import map to the result page. If you need to add custom import map or override the automatically generated one, you need to add them to ",(0,r.jsx)(n.code,{children:"imports"})," config property or ",(0,r.jsx)(n.code,{children:"imports"})," ",(0,r.jsx)(n.a,{href:"#customsettings",children:"customSettings"})," property."]})]}),"\n",(0,r.jsx)(n.h3,{id:"types",children:(0,r.jsx)(n.code,{children:"types"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.code,{children:"[key: string]: string | { autoload?: boolean ; declareAsModule?: boolean ; url: string }"})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"{}"})]}),"\n",(0,r.jsxs)(n.p,{children:["Allows providing custom ",(0,r.jsx)(n.a,{href:"https://www.typescriptlang.org/docs/handbook/2/type-declarations.html",children:"TypeScript type declarations"})," for better ",(0,r.jsx)(n.a,{href:"/docs/features/intellisense",children:"editor intellisense"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"It is an object where each key represents module name and value represents the types.\nThis can be a URL to a type declaration file. For example, if this is the type declaration file:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="https://my-custom-domain/my-type-declarations.d.ts"',children:"declare module 'my-demo-lib' {\n  export class Greeter {\n    morning(): string;\n    evening(): string;\n  }\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:"It can be used like that:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",children:'{\n  "types": {\n    "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts"\n  }\n}\n'})}),"\n",(0,r.jsx)(n.p,{children:"Alternatively, the value for module name can be an object with the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"url"}),": ",(0,r.jsx)(n.code,{children:"string"})," (required). The URL to type declaration file."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"autoload"}),": ",(0,r.jsx)(n.code,{children:"boolean"})," (optional). By default, the types are only loaded when the module is imported in code. If ",(0,r.jsx)(n.code,{children:"autoload"})," property is set to ",(0,r.jsx)(n.code,{children:"true"}),", the types are loaded regardless if the module was imported."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"declareAsModule"}),": ",(0,r.jsx)(n.code,{children:"boolean"})," (optional). Declares the types as module with the supplied module name."]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",children:'{\n  "types": {\n    "my-demo-lib": {\n      "url": "https://my-custom-domain/types.d.ts",\n      "autoload": true,\n      "declareAsModule": true\n    }\n  }\n}\n'})}),"\n",(0,r.jsx)(n.h3,{id:"tests",children:(0,r.jsx)(n.code,{children:"tests"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.code,{children:"undefined"})," | ",(0,r.jsx)(n.code,{children:"Partial<Editor>"})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"{ language: 'typescript', content: '' }"})]}),"\n",(0,r.jsxs)(n.p,{children:["Configures the ",(0,r.jsx)(n.a,{href:"/docs/features/tests#supported-languages",children:"language"})," and content of ",(0,r.jsx)(n.a,{href:"/docs/features/tests",children:"tests"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"version",children:(0,r.jsx)(n.code,{children:"version"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.code,{children:"Readonly"})," ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#description",children:(0,r.jsx)(n.code,{children:"string"})})]}),"\n",(0,r.jsx)(n.p,{children:"Default: Current LiveCodes Version."}),"\n",(0,r.jsxs)(n.p,{children:["This is a read-only property which specifies the current LiveCodes version. It can be shown using the SDK ",(0,r.jsx)(n.a,{href:"/docs/sdk/js-ts#exec",children:(0,r.jsx)(n.code,{children:"exec"})})," method."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// in browser console of full app (e.g. https://livecodes.io)\nawait livecodes.exec('showVersion');\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Version specified in ",(0,r.jsx)(n.a,{href:"/docs/features/export",children:"exported"})," projects allows automatically upgrading the project configuration when imported by an app with a newer version."]}),"\n",(0,r.jsx)(n.h2,{id:"app-settings",children:"App Settings"}),"\n",(0,r.jsx)(n.p,{children:"These are properties that define how the app behaves."}),"\n",(0,r.jsx)(n.h3,{id:"readonly",children:(0,r.jsx)(n.code,{children:"readonly"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#readonly",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", editors are loaded in read-only mode, where the user is not allowed to change the code."]}),"\n",(0,r.jsxs)(n.p,{children:["By default, when ",(0,r.jsx)(n.code,{children:"readonly"})," is set to ",(0,r.jsx)(n.code,{children:"true"}),", the light-weight code editor ",(0,r.jsx)(n.a,{href:"/docs/features/editor-settings#code-editor",children:"CodeJar"})," is used. If you wish to use another editor, set the ",(0,r.jsx)(n.a,{href:"#editor",children:"editor"})," property."]}),"\n",(0,r.jsx)(n.h3,{id:"allowlangchange",children:(0,r.jsx)(n.code,{children:"allowLangChange"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#allowlangchange",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"false"}),", the UI will not show the menu that allows changing editor language."]}),"\n",(0,r.jsx)(n.h3,{id:"view",children:(0,r.jsx)(n.code,{children:"view"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#view",children:(0,r.jsx)(n.code,{children:'"split" | "editor" | "result"'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'"split"'})]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"/docs/features/default-view",children:"default view"})," for the playground."]}),"\n",(0,r.jsx)(n.h3,{id:"mode",children:(0,r.jsx)(n.code,{children:"mode"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#mode",children:(0,r.jsx)(n.code,{children:'"full" | "focus" | "simple" | "lite" | "result" | "editor" | "codeblock"'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'"full"'})]}),"\n",(0,r.jsxs)(n.p,{children:["Sets the ",(0,r.jsx)(n.a,{href:"/docs/features/display-modes",children:"display mode"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"tools",children:(0,r.jsx)(n.code,{children:"tools"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#tools",children:(0,r.jsx)(n.code,{children:"Partial<{ enabled: Array<'console' | 'compiled' | 'tests'> | 'all'; active: 'console' | 'compiled' | 'tests' | ''; status: 'closed' | 'open' | 'full' | 'none' | ''; }>"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"{ enabled: 'all', active: '', status: '' }"})]}),"\n",(0,r.jsxs)(n.p,{children:["Sets enabled and active tools and status of ",(0,r.jsx)(n.a,{href:"/docs/features/tools-pane",children:"tools pane"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",children:'{\n  "tools": {\n    "enabled": ["console", "compiled"],\n    "active": "console",\n    "status": "open"\n  }\n}\n'})}),"\n",(0,r.jsx)(o.Z,{config:{script:{language:"javascript",content:"console.log('Hello World!');"},activeEditor:"script",tools:{enabled:["console","compiled"],active:"console",status:"open"}}}),"\n",(0,r.jsx)(n.h3,{id:"zoom",children:(0,r.jsx)(n.code,{children:"zoom"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#zoom",children:(0,r.jsx)(n.code,{children:"1 | 0.5 | 0.25"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"1"})]}),"\n",(0,r.jsxs)(n.p,{children:["Sets result page ",(0,r.jsx)(n.a,{href:"/docs/features/result#result-page-zoom",children:"zoom level"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"user-settings",children:"User Settings"}),"\n",(0,r.jsxs)(n.p,{children:["These are properties that define the ",(0,r.jsx)(n.a,{href:"/docs/features/user-settings",children:"user settings"}),", including ",(0,r.jsx)(n.a,{href:"/docs/features/editor-settings",children:"editor settings"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"enableai",children:(0,r.jsx)(n.code,{children:"enableAI"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#enableai",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", ",(0,r.jsx)(n.a,{href:"/docs/features/ai",children:"AI code assistant"})," is enabled."]}),"\n",(0,r.jsx)(n.h3,{id:"autoupdate",children:(0,r.jsx)(n.code,{children:"autoupdate"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#autoupdate",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the result page is automatically updated on code change, after time ",(0,r.jsx)(n.a,{href:"#delay",children:"delay"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"autosave",children:(0,r.jsx)(n.code,{children:"autosave"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#autosave",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the project is automatically saved on code change, after time ",(0,r.jsx)(n.a,{href:"#delay",children:"delay"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"autotest",children:(0,r.jsx)(n.code,{children:"autotest"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#autotest",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the project is watched for code changes which trigger tests to auto-run."]}),"\n",(0,r.jsx)(n.h3,{id:"delay",children:(0,r.jsx)(n.code,{children:"delay"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#delay",children:(0,r.jsx)(n.code,{children:"number"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"1500"})]}),"\n",(0,r.jsxs)(n.p,{children:["Time delay (in milliseconds) following code change, after which the result page is updated (if ",(0,r.jsx)(n.a,{href:"#autoupdate",children:(0,r.jsx)(n.code,{children:"autoupdate"})})," is ",(0,r.jsx)(n.code,{children:"true"}),") and/or the project is saved (if ",(0,r.jsx)(n.a,{href:"#autosave",children:(0,r.jsx)(n.code,{children:"autosave"})})," is ",(0,r.jsx)(n.code,{children:"true"}),")."]}),"\n",(0,r.jsx)(n.h3,{id:"formatonsave",children:(0,r.jsx)(n.code,{children:"formatOnsave"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#formatonsave",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the code is automatically ",(0,r.jsx)(n.a,{href:"/docs/features/code-format",children:"formatted"})," on saving the project."]}),"\n",(0,r.jsx)(n.h3,{id:"layout",children:(0,r.jsx)(n.code,{children:"layout"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#layout",children:(0,r.jsx)(n.code,{children:'"horizontal"| "vertical" | "responsive"  | undefined'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'"responsive"'})]}),"\n",(0,r.jsxs)(n.p,{children:["Sets the app layout to horizontal or vertical. If set to ",(0,r.jsx)(n.code,{children:'"responsive"'})," (the default) or ",(0,r.jsx)(n.code,{children:"undefined"}),", the layout is vertical in small screens when the playground height is larger than its width, otherwise horizontal."]}),"\n",(0,r.jsx)(n.h3,{id:"theme",children:(0,r.jsx)(n.code,{children:"theme"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#theme",children:(0,r.jsx)(n.code,{children:'"light" | "dark"'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'"dark"'})]}),"\n",(0,r.jsxs)(n.p,{children:["Sets the app ",(0,r.jsx)(n.a,{href:"/docs/features/themes",children:"theme"})," to light/dark mode."]}),"\n",(0,r.jsx)(n.h3,{id:"themecolor",children:(0,r.jsx)(n.code,{children:"themeColor"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#themecolor",children:(0,r.jsx)(n.code,{children:"string | undefined"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'"hsl(214, 40%, 50%)"'})]}),"\n",(0,r.jsxs)(n.p,{children:["A string representing a ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:"CSS color value"}),", used to set the app ",(0,r.jsx)(n.a,{href:"/docs/features/themes",children:"theme color"}),". It can be any valid CSS color value, such as ",(0,r.jsx)(n.code,{children:'"#4DB39E"'}),", ",(0,r.jsx)(n.code,{children:'"rgb(245, 225, 49)"'}),", ",(0,r.jsx)(n.code,{children:'"hsl(324, 40%, 50%)"'})," and ",(0,r.jsx)(n.code,{children:'"lightblue"'}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"editortheme",children:(0,r.jsx)(n.code,{children:"editorTheme"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#editortheme",children:(0,r.jsx)(n.code,{children:"EditorTheme[] | string | undefined"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsx)(n.p,{children:"Sets the code editor themes."}),"\n",(0,r.jsx)(n.admonition,{title:"Note",type:"info",children:(0,r.jsxs)(n.p,{children:["You can preview and set editor themes in the ",(0,r.jsx)(n.a,{href:"pathname:///../?screen=editor-settings",children:"editor settings screen"}),"."]})}),"\n",(0,r.jsxs)(n.p,{children:["Three ",(0,r.jsx)(n.a,{href:"#editor",children:"code editors"})," are supported in LiveCodes: ",(0,r.jsx)(n.strong,{children:"Monaco"})," (the default on desktop), ",(0,r.jsx)(n.strong,{children:"CodeMirror"})," (the default on mobile) and ",(0,r.jsx)(n.strong,{children:"CodeJar"})," (the default in ",(0,r.jsx)(n.a,{href:"/docs/features/display-modes#codeblock",children:"codeblocks"}),", in ",(0,r.jsx)(n.a,{href:"/docs/features/lite",children:"lite mode"})," and in ",(0,r.jsx)(n.a,{href:"#readonly",children:"readonly"})," playgrounds). Each editor has its own set of themes, represented by the types: ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/MonacoTheme",children:(0,r.jsx)(n.code,{children:"MonacoTheme"})}),", ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CodemirrorTheme",children:(0,r.jsx)(n.code,{children:"CodemirrorTheme"})})," and ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CodejarTheme",children:(0,r.jsx)(n.code,{children:"CodejarTheme"})}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"editorTheme"})," property can be used to set the editor theme for each editor and on light/dark modes. It can be set to an array of ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorTheme",children:(0,r.jsx)(n.code,{children:"EditorTheme"})})," items or a string of comma-separated items."]}),"\n",(0,r.jsx)(n.p,{children:"Each item can be composed of:"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:" editor:"})," ",(0,r.jsx)(n.code,{children:"theme-name"})," ",(0,r.jsx)(n.code,{children:"@app-theme"})]}),"\n",(0,r.jsx)(n.p,{children:"Where:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"editor"})," is the name of the editor (",(0,r.jsx)(n.code,{children:'"monaco" | "codemirror" | "codejar"'}),"). [Optional]"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"theme-name"})," is the name of the theme (e.g. ",(0,r.jsx)(n.code,{children:'"monokai"'}),"). [Required]\nValid theme names can be found here:","\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Monaco: ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/MonacoTheme",children:(0,r.jsx)(n.code,{children:"MonacoTheme"})})]}),"\n",(0,r.jsxs)(n.li,{children:["CodeMirror: ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CodemirrorTheme",children:(0,r.jsx)(n.code,{children:"CodemirrorTheme"})})]}),"\n",(0,r.jsxs)(n.li,{children:["CodeJar: ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CodejarTheme",children:(0,r.jsx)(n.code,{children:"CodejarTheme"})}),"."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"app-theme"})," is the name of the app theme (",(0,r.jsx)(n.code,{children:'"dark" | "light"'}),"). [Optional]"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Examples:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:'"vs"'})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:'"monaco:twilight, codemirror:one-dark"'})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:'["vs@light"]'})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:'["vs@light", "vs-dark@dark"]'})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:'["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]'})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Each ",(0,r.jsx)(n.code,{children:"EditorTheme"})," item requires a theme name. The theme name can optionally be preceded with the editor name separated by a colon to specify the editor (e.g. ",(0,r.jsx)(n.code,{children:'"monaco:monokai"'}),'). It can also optionally be followed by the app theme separated by "@" (e.g. ',(0,r.jsx)(n.code,{children:'"monokai@dark"'}),")."]}),"\n",(0,r.jsxs)(n.p,{children:["Multiple ",(0,r.jsx)(n.code,{children:"EditorTheme"})," items can be supplied (as array items or in the comma-separated string) to specify the theme for each editor and in dark and light modes. The order matters. The first valid item in the array or string for the current editor (",(0,r.jsx)(n.code,{children:"monaco"}),", ",(0,r.jsx)(n.code,{children:"codemirror"})," or ",(0,r.jsx)(n.code,{children:"codejar"}),") and app theme (",(0,r.jsx)(n.code,{children:"light"})," or ",(0,r.jsx)(n.code,{children:"dark"}),") will be used. If no items match the current editor and app theme, the default theme for the editor and app theme will be used."]}),"\n",(0,r.jsx)(n.h3,{id:"applanguage",children:(0,r.jsx)(n.code,{children:"appLanguage"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#applanguage",children:(0,r.jsx)(n.code,{children:"AppLanguage | undefined"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsxs)(n.p,{children:["Spoken language code that sets the app UI language (e.g. ",(0,r.jsx)(n.code,{children:'"ar"'}),", ",(0,r.jsx)(n.code,{children:'"zh-CN"'}),"). Used in translations for internationalization. If ",(0,r.jsx)(n.code,{children:"undefined"})," (the default), the language is automatically detected based on the user's browser settings and falls back to English, if detection fails or the language is not supported."]}),"\n",(0,r.jsx)(n.h3,{id:"recoverunsaved",children:(0,r.jsx)(n.code,{children:"recoverUnsaved"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#recoverunsaved",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsxs)(n.p,{children:["Enables ",(0,r.jsx)(n.a,{href:"/docs/features/recover",children:"recovering last unsaved project"})," when the app is reopened."]}),"\n",(0,r.jsx)(n.h3,{id:"welcome",children:(0,r.jsx)(n.code,{children:"welcome"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#welcome",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", the ",(0,r.jsx)(n.a,{href:"/docs/features/welcome",children:"welcome screen"})," is displayed when the app loads."]}),"\n",(0,r.jsx)(n.h3,{id:"showspacing",children:(0,r.jsx)(n.code,{children:"showSpacing"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#showspacing",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["Enables ",(0,r.jsx)(n.a,{href:"/docs/features/result#show-spacings",children:"showing element spacing"})," in the result page."]}),"\n",(0,r.jsx)(n.h3,{id:"editor",children:(0,r.jsx)(n.code,{children:"editor"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#editor",children:(0,r.jsx)(n.code,{children:'"monaco" | "codemirror" | "codejar" | "auto" | undefined'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsxs)(n.p,{children:["Selects the ",(0,r.jsx)(n.a,{href:"/docs/features/editor-settings#code-editor",children:"code editor"})," to use."]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"undefined"})," (the default):",(0,r.jsx)("br",{}),"\nMonaco editor is used on desktop,",(0,r.jsx)("br",{}),"\nCodeMirror is used on mobile and in ",(0,r.jsx)(n.code,{children:"simple"})," mode,",(0,r.jsx)("br",{}),"\nwhile CodeJar is used in ",(0,r.jsxs)(n.a,{href:"/docs/features/display-modes#codeblock",children:[(0,r.jsx)(n.code,{children:"codeblock"})," mode"]}),", in ",(0,r.jsxs)(n.a,{href:"/docs/features/lite",children:[(0,r.jsx)(n.code,{children:"lite"})," mode"]})," and in ",(0,r.jsx)(n.a,{href:"#readonly",children:(0,r.jsx)(n.code,{children:"readonly"})})," playgrounds."]}),"\n",(0,r.jsxs)(n.p,{children:["If set to ",(0,r.jsx)(n.code,{children:"auto"}),", Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings."]}),"\n",(0,r.jsx)(n.h3,{id:"fontfamily",children:(0,r.jsx)(n.code,{children:"fontFamily"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#fontfamily",children:(0,r.jsx)(n.code,{children:"string | undefined"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsxs)(n.p,{children:["Sets the ",(0,r.jsx)(n.a,{href:"/docs/features/editor-settings",children:"code editor"})," font family."]}),"\n",(0,r.jsx)(n.h3,{id:"fontsize",children:(0,r.jsx)(n.code,{children:"fontSize"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#fontfamily",children:(0,r.jsx)(n.code,{children:"number | undefined"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsxs)(n.p,{children:["Sets the ",(0,r.jsx)(n.a,{href:"/docs/features/editor-settings",children:"code editor"})," font size."]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"undefined"})," (the default), the font size is set to 14 for the full app and 12 for ",(0,r.jsx)(n.a,{href:"/docs/features/embeds",children:"embeds"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"usetabs",children:(0,r.jsx)(n.code,{children:"useTabs"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#usetabs",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["If ",(0,r.jsx)(n.code,{children:"true"}),", lines are indented with tabs instead of spaces. Also used in ",(0,r.jsx)(n.a,{href:"/docs/features/code-format",children:"code formatting"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"tabsize",children:(0,r.jsx)(n.code,{children:"tabSize"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#tabsize",children:(0,r.jsx)(n.code,{children:"number"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"2"})]}),"\n",(0,r.jsxs)(n.p,{children:["The number of spaces per indentation-level. Also used in ",(0,r.jsx)(n.a,{href:"/docs/features/code-format",children:"code formatting"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"linenumbers",children:(0,r.jsx)(n.code,{children:"lineNumbers"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#linenumbers",children:(0,r.jsx)(n.code,{children:'boolean | "relative"'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsxs)(n.p,{children:["Show line numbers in ",(0,r.jsx)(n.a,{href:"/docs/features/editor-settings",children:"code editor"}),".\nIf set to ",(0,r.jsx)(n.code,{children:'"relative"'}),", line numbers are shown relative to the current line. This can be useful with ",(0,r.jsx)(n.a,{href:"#editormode",children:"vim mode"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"wordwrap",children:(0,r.jsx)(n.code,{children:"wordWrap"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#wordwrap",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsx)(n.p,{children:"Enables word-wrap for long lines."}),"\n",(0,r.jsx)(n.h3,{id:"closebrackets",children:(0,r.jsx)(n.code,{children:"closeBrackets"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#closebrackets",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsx)(n.p,{children:"Use auto-complete to close brackets and quotes."}),"\n",(0,r.jsx)(n.h3,{id:"foldregions",children:(0,r.jsx)(n.code,{children:"foldRegions"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#foldregions",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["When set to ",(0,r.jsx)(n.code,{children:"true"}),", regions marked by ",(0,r.jsx)(n.code,{children:"#region"})," and ",(0,r.jsx)(n.code,{children:"#endregion"})," comments are folded when the project is loaded."]}),"\n",(0,r.jsx)(n.h3,{id:"emmet",children:(0,r.jsx)(n.code,{children:"emmet"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#emmet",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsxs)(n.p,{children:["Enables ",(0,r.jsx)(n.a,{href:"/docs/features/editor-settings#emmet",children:"Emmet"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"editormode",children:(0,r.jsx)(n.code,{children:"editorMode"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#editormode",children:(0,r.jsx)(n.code,{children:'"vim" | "emacs" | undefined'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n",(0,r.jsxs)(n.p,{children:["Sets ",(0,r.jsx)(n.a,{href:"/docs/features/editor-settings#editor-modes",children:"editor mode"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"semicolons",children:(0,r.jsx)(n.code,{children:"semicolons"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#semicolons",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsxs)(n.p,{children:["Configures Prettier ",(0,r.jsx)(n.a,{href:"/docs/features/code-format",children:"code formatter"})," to use ",(0,r.jsx)(n.a,{href:"https://prettier.io/docs/en/options.html#semicolons",children:"semi-colons"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"singlequote",children:(0,r.jsx)(n.code,{children:"singleQuote"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#singlequote",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"false"})]}),"\n",(0,r.jsxs)(n.p,{children:["Configures Prettier ",(0,r.jsx)(n.a,{href:"/docs/features/code-format",children:"code formatter"})," to use ",(0,r.jsx)(n.a,{href:"https://prettier.io/docs/en/options.html#quotes",children:"single quotes instead of double quotes"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"trailingcomma",children:(0,r.jsx)(n.code,{children:"trailingComma"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#trailingcomma",children:(0,r.jsx)(n.code,{children:"boolean"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n",(0,r.jsxs)(n.p,{children:["Configures Prettier ",(0,r.jsx)(n.a,{href:"/docs/features/code-format",children:"code formatter"})," to use ",(0,r.jsx)(n.a,{href:"https://prettier.io/docs/en/options.html#trailing-commas",children:"trailing commas"}),"."]})]})}function p(e={}){let{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},4945:function(e,n,s){s.d(n,{Z:function(){return i}});let i=s.p+"assets/images/languages-3-2c8a7784b440c557ef4bf1f7da60e5a3.jpg"},3365:function(e,n,s){s.d(n,{Z:()=>x});var i=s("5893"),r=s("4200"),d=s("7294"),o=s("8294");function t(e){let n=(0,d.useRef)(null),[s,r]=(0,d.useState)(e.className||""),[t,c]=(0,d.useState)(e.style||{}),[l,a]=(0,d.useState)(e.height),[h,p]=(0,d.useState)(),[j,f]=(0,d.useState)(JSON.stringify(e.config||"")),[u,x]=(0,d.useState)("");return(0,d.useEffect)(()=>{if(!n.current)return;let{className:s,style:i,height:d,sdkReady:t,config:l,...m}=e;if(r(s||""),c(i||{}),a(d),h&&u===JSON.stringify(m)){if(j===JSON.stringify(l))return;f(JSON.stringify(l)),"string"==typeof l?fetch(l).then(e=>e.json()).then(e=>{h?.setConfig(e)}):l&&h.setConfig(l)}else x(JSON.stringify(m)),h?.destroy(),(0,o.T)(n.current,{config:l,...m}).then(e=>{p(e),"function"==typeof t&&t(e)})},[e]),(0,d.useEffect)(()=>()=>{h?.destroy()},[]),(0,i.jsx)("div",{ref:n,className:s,style:t,"data-height":l})}var c=s("1858"),l=s("3262"),a=s("1705"),h=s("7645"),p=s("8168"),j=s("8228"),f=s("5050");function u(e){let[n,s]=(0,d.useState)(e.js),[r,o]=(0,d.useState)(e.ts),[t,c]=(0,d.useState)(e.react),[u,x]=(0,d.useState)(e.vue),[m,g]=(0,d.useState)(e.svelte),y="3.7rem",[v,b]=(0,d.useState)(!0),[w,C]=(0,d.useState)(y),T=(0,d.useRef)(null),S=()=>{setTimeout(()=>{C(`calc(${T.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{C(`calc(${T.current.offsetHeight}px + ${y})`)},255)};return(0,d.useEffect)(()=>{if(l.Z.canUseDOM){let e=function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===n?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(n,"js")),o(e(r,"ts")),c(e(t,"jsx")),x(e(u,"html")),g(e(m,"html"))}},[]),(0,i.jsxs)("details",{className:`alert alert--info ${f.Z.details} ${j.Z.details}`,"data-collapsed":v,style:{height:v?y:w,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,i.jsx)("summary",{onClick:()=>{b(!v),S()},children:"show code"}),(0,i.jsx)("div",{ref:T,style:{display:"block",overflow:"hidden"},children:(0,i.jsx)("div",{className:f.Z.collapsibleContent,children:(0,i.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,i.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:S},children:(0,i.jsx)(a.Z,{language:"js",children:n})}),(0,i.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:S},children:(0,i.jsx)(a.Z,{language:"ts",children:r})}),(0,i.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:S},children:(0,i.jsx)(a.Z,{language:"jsx",children:t})}),(0,i.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:S},children:(0,i.jsx)(a.Z,{language:"html",children:u})}),(0,i.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:S},children:(0,i.jsx)(a.Z,{language:"html",children:m})})]})})})]})}function x(e){let{className:n,style:s,showCode:d,height:o,...l}=e,{colorMode:a}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),p=`
import { createPlayground } from 'livecodes';

const options = ${h(l)};
createPlayground('#container', options);

`.trimStart(),j=`
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = ${h(l)};
createPlayground('#container', options);

`.trimStart(),f=`
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = ${h(l)};
  return (<LiveCodes {...options}></LiveCodes>);
}

`.trimStart(),x=`
<script setup>
import LiveCodes from "livecodes/vue";

const options = ${h(l)};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

`,m=`
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state(${h(l)});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

`.trimStart();return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:c.G,...e,config:{theme:a,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,i.jsx)(u,{js:p,ts:j,react:f,vue:x,svelte:m})]})}},8294:function(e,n,s){s.d(n,{T:function(){return r},r:function(){return d}});var i=s(7728);async function r(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(n=e,e=null);let{config:s={},headless:i,loading:r="lazy",view:o}=n,t=i||"headless"===o,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(t&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(t)T(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let a=new URL(d(n)),h=a.origin;a.searchParams.set("embed","true"),a.searchParams.set("loading",t?"eager":r),a.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&a.searchParams.set("config","sdk");let p=n.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{a.searchParams.set(e,encodeURIComponent(String(p[e])))});let j=!1,f="Cannot call API methods after calling `destroy()`.",u=await new Promise(e=>{if(!c)return;let n=c.dataset.height||c.style.height;if(n&&!t){let e=isNaN(Number(n))?n:n+"px";c.style.height=e}"false"===c.dataset.defaultStyles||t||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let i="livecodes",d=c.querySelector(`iframe.${i}`),o=d||document.createElement("iframe");o.classList.add(i),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),t?T(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(n){n.source===o.contentWindow&&n.origin===h&&n.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(n.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(n){n.source===o.contentWindow&&n.origin===h&&n.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=a.href,d||c.appendChild(o)}),x=new Promise(e=>{addEventListener("message",function n(s){s.source===u.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",n),e(),x.settled=!0)})}),m=()=>j?Promise.reject(f):new Promise(async e=>{x.settled&&e(),u.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),g=(e,n)=>new Promise(async(s,i)=>{if(j)return i(f);await m();let r=S();addEventListener("message",function n(d){if(d.source===u.contentWindow&&d.origin===h&&d.data?.type==="livecodes-api-response"&&d.data?.id===r&&d.data.method===e){removeEventListener("message",n);let e=d.data.payload;e?.error?i(e.error):s(e)}}),u.contentWindow?.postMessage({method:e,id:r,args:n},h)}),y={},v=["load","ready","code","console","tests","destroy"],b=(e,n)=>{if(j)throw Error(f);return v.includes(e)?(g("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(n),{remove:()=>{y[e]=y[e]?.filter(e=>e!==n),y[e]?.length===0&&g("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},w=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let n=w(e.data?.type??"");if(e.source!==u.contentWindow||e.origin!==h||!n||!y[n])return;let s=e.data?.payload;y[n]?.forEach(e=>{e(s)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),u?.remove?.(),j=!0};function T(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,n)=>{e.forEach(async e=>{e.isIntersecting&&(await m(),n.unobserve(c))})},{rootMargin:"150px"}).observe(c);let S=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>m(),run:()=>g("run"),format:e=>g("format",[e]),getShareUrl:e=>g("getShareUrl",[e]),getConfig:e=>g("getConfig",[e]),setConfig:e=>g("setConfig",[e]),getCode:()=>g("getCode"),show:(e,n)=>g("show",[e,n]),runTests:()=>g("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var n=arguments.length,s=Array(n>1?n-1:0),i=1;i<n;i++)s[i-1]=arguments[i];return g("exec",[e,...s])},destroy:()=>x.settled?g("destroy").then(C):j?Promise.reject(f):(C(),Promise.resolve())}}function d(){let e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:d={},headless:o,import:t,lite:c,view:l,...a}=n;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(a).forEach(n=>{let[s,i]=n;void 0!==i&&e.searchParams.set(s,String(i))});let p="headless"===n.view||o;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof d&&null==d.mode?d.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof d&&null==d.view&&"headless"!==l?d.view=l:e.searchParams.set("view",l)),"string"==typeof d)try{new URL(d),e.searchParams.set("config",encodeURIComponent(d))}catch{throw Error('"config" is not a valid URL or configuration object.')}else d&&"object"==typeof d&&Object.keys(d).length>0&&(d.title&&"Untitled Project"!==d.title&&e.searchParams.set("title",d.title),d.description&&d.description.length>0&&e.searchParams.set("description",d.description),h.set("config","code/"+(0,i.compressToEncodedURIComponent)(JSON.stringify(d))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,i.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(n=>{e.searchParams.set(n,encodeURIComponent(String(r[n])))})}return t&&e.searchParams.set("x",encodeURIComponent(t)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,n,s){s.d(n,{Z:function(){return t},a:function(){return o}});var i=s(7294);let r={},d=i.createContext(r);function o(e){let n=i.useContext(d);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function t(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),i.createElement(d.Provider,{value:n},e.children)}}}]);