385 lines
152 KiB
HTML
385 lines
152 KiB
HTML
<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-configuration/configuration-object" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Configuration Object | LiveCodes</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://livecodes.io/docs/configuration/configuration-object><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docusaurus_version content=current><meta data-rh=true name=docusaurus_tag content=docs-default-current><meta data-rh=true name=docsearch:version content=current><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current><meta data-rh=true property=og:title content="Configuration Object | LiveCodes"><meta data-rh=true name=description content="LiveCodes is very flexible and provides a wide range of configuration options."><meta data-rh=true property=og:description content="LiveCodes is very flexible and provides a wide range of configuration options."><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/configuration/configuration-object><link data-rh=true rel=alternate href=https://livecodes.io/docs/configuration/configuration-object hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/configuration/configuration-object hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.a40c3f9c.js defer></script><script src=/docs/assets/js/main.af5c4c8b.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"light",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/docs/img/livecodes-logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/overview>Docs</a><a class="navbar__item navbar__link" href=/docs/sdk>SDK</a><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=/docs/../stories target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Storybook<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div><div class="navbar__items navbar__items--right"><a href=/docs/../ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">𝕏<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" href=/docs/overview>Docs</a></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/why>Why Another Playground?</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/getting-started>Getting Started</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/features/>Features</a><button aria-label="Expand sidebar category 'Features'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--active" tabindex=0 href=/docs/configuration/>Configuration</a><button aria-label="Collapse sidebar category 'Configuration'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/configuration/configuration-object>Configuration Object</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/configuration/query-params>Query Parameters</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/sdk/>SDK</a><button aria-label="Expand sidebar category 'SDK'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/advanced/>Advanced</a><button aria-label="Expand sidebar category 'Advanced'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/languages/>Languages</a><button aria-label="Expand sidebar category 'Languages'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/bookmarklet>Bookmarklet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gh-action>GitHub Action ⚡</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/markdown-to-livecodes>Markdown to LiveCodes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contribution>Contribution</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/credits>Credits</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/license>License</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sponsor>Sponsor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contact>Contact</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/about>About us</a></ul></ul></nav><button type=button title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width=20 height=20 aria-hidden=true class=collapseSidebarButtonIcon_kv0_><g fill=#7a7a7a><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"/><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"/></g></svg></button></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/docs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/overview><span itemprop=name>Docs</span></a><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/configuration/><span itemprop=name>Configuration</span></a><meta itemprop=position content=2><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>Configuration Object</span><meta itemprop=position content=3></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Configuration Object</h1><div class="custom-content custom-content-header content_lMOZ undefined"><div data-ea-publisher=livecodesio data-ea-type=image class=horizontal data-ea-manual=true></div></div></header>
|
||
<!-- -->
|
||
<p>LiveCodes is very flexible and provides a wide range of configuration options.
|
||
A JavaScript object is used for configuration and keeping state.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=usage>Usage<a href=#usage class=hash-link aria-label="Direct link to Usage" title="Direct link to Usage"></a></h2>
|
||
<p>The configuration object can be used while initializing a new playground using the <a href=/docs/sdk/>SDK</a>.</p>
|
||
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>(</span><span class="token keyword" style=color:#00009f>async</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> playground </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>await</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> config</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token comment" style=color:#999988;font-style:italic>// config options here</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token comment" style=color:#999988;font-style:italic>// the object can be retrieved using the method `getConfig`</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>log</span><span class="token punctuation" style=color:#393A34>(</span><span class="token keyword" style=color:#00009f>await</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>getConfig</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token comment" style=color:#999988;font-style:italic>// and can be later changed using the method `setConfig`</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>await</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>setConfig</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token comment" style=color:#999988;font-style:italic>// new config options</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<p>Alternatively, the URL <a href=/docs/configuration/query-params>query parameter</a> <code>config</code> can provide a URL to a JSON representation of the configuration object to be used while initializing the app.</p>
|
||
<p>Example:</p>
|
||
<div class="codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-text codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain">https://livecodes.io/?config=https://my-custom-server.com/config.json</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=typescript-types>TypeScript Types<a href=#typescript-types class=hash-link aria-label="Direct link to TypeScript Types" title="Direct link to TypeScript Types"></a></h2>
|
||
<p>TypeScript types are <a href=/docs/api/interfaces/Config>documented here</a> and can be imported from the library.</p>
|
||
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> Config </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=default-config>Default Config<a href=#default-config class=hash-link aria-label="Direct link to Default Config" title="Direct link to Default Config"></a></h2>
|
||
<p>Default config is <a href=https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/default-config.ts target=_blank rel="noopener noreferrer">defined here</a>.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=project-content>Project Content<a href=#project-content class=hash-link aria-label="Direct link to Project Content" title="Direct link to Project Content"></a></h2>
|
||
<p>These are properties that define the content of the current <a href=/docs/features/projects>project</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=title><code>title</code><a href=#title class=hash-link aria-label="Direct link to title" title="Direct link to title"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#title><code>string</code></a></p>
|
||
<p>Default: <code>"Untitled Project"</code></p>
|
||
<p>Project title. This is used as <a href=/docs/features/result>result page</a> title and title meta tag. Also used in <a href=/docs/features/projects>project</a> search. This can be set in the UI from the title input (above result page) or from Project menu → Project Info.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=description><code>description</code><a href=#description class=hash-link aria-label="Direct link to description" title="Direct link to description"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#description><code>string</code></a></p>
|
||
<p>Default: <code>""</code></p>
|
||
<p>Project description. Used in <a href=/docs/features/projects>project</a> search and result page description meta tag. This can be set in the UI from Project menu → Project Info.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=head><code>head</code><a href=#head class=hash-link aria-label="Direct link to head" title="Direct link to head"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#head><code>string</code></a></p>
|
||
<p>Default: <code>'<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />'</code></p>
|
||
<p>Content added to the <a href=/docs/features/result>result page</a> <code><head></code> element. This can be set in the UI from Project menu → Project Info.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=htmlattrs><code>htmlAttrs</code><a href=#htmlattrs class=hash-link aria-label="Direct link to htmlattrs" title="Direct link to htmlattrs"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#htmlattrs><code>string | Record<string, string></code></a></p>
|
||
<p>Default: <code>'lang="en" class=""'</code></p>
|
||
<p>Attributes added to the <a href=/docs/features/result>result page</a> <code><html></code> element. It can be an object or a string.</p>
|
||
<p>Example: <code>{ lang: "en", class: "dark" }</code> or <code>'lang="en" class="dark"'</code>,
|
||
become <code><html lang="en" class="dark"></code>.</p>
|
||
<p>This can be set in the UI from Project menu → Project Info.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=tags><code>tags</code><a href=#tags class=hash-link aria-label="Direct link to tags" title="Direct link to tags"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#tags><code>string[]</code></a></p>
|
||
<p>Default: <code>[]</code></p>
|
||
<p>Project tags. Used in <a href=/docs/features/projects>project</a> filter and search. This can be set in the UI from Project menu → Project Info.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=activeeditor><code>activeEditor</code><a href=#activeeditor class=hash-link aria-label="Direct link to activeeditor" title="Direct link to activeeditor"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#activeeditor><code>"markup" | "style" | "script" | undefined</code></a></p>
|
||
<p>Default: Last used editor for user, otherwise "markup"</p>
|
||
<p>Selects the active editor to show.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=languages><code>languages</code><a href=#languages class=hash-link aria-label="Direct link to languages" title="Direct link to languages"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#languages><code>Language[] | undefined</code></a></p>
|
||
<p>Default: all supported languages in full app and only current editor languages in <a href=/docs/features/embeds>embeds</a>.</p>
|
||
<p>List of enabled languages. Languages that are not already loaded in the editors (<a href=#markup>markup</a>, <a href=#style>style</a> and <a href=#script>script</a>) can be selected from a drop down menu at the editor title.</p>
|
||
<p><img decoding=async loading=lazy alt="Change Language" src=/docs/assets/images/languages-3-2c8a7784b440c557ef4bf1f7da60e5a3.jpg width=2240 height=1400 class=img_ev3q></p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=markup><code>markup</code><a href=#markup class=hash-link aria-label="Direct link to markup" title="Direct link to markup"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#markup><code>Editor</code></a></p>
|
||
<p>Default: <code>{ language: "html", content: "" }</code></p>
|
||
<p>An object that configures the language and content of the markup editor. This can include the following properties:</p>
|
||
<ul>
|
||
<li>
|
||
<p><code>language</code>:
|
||
Type: <a href=/docs/api/type-aliases/Language>Language</a>
|
||
Default: <code>"html"</code> in markup editor, <code>"css"</code> in style editor and <code>"javascript"</code> in script editor.
|
||
This can be a language name, extension or alias (as defined in <a href=/docs/languages/>language documentations</a>).
|
||
(e.g. <code>"markdown"</code>, <code>"md"</code>)</p>
|
||
</li>
|
||
<li>
|
||
<p><code>content</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#content><code>string | undefined</code></a>
|
||
Default: <code>""</code>
|
||
The initial content of the code editor.</p>
|
||
</li>
|
||
<li>
|
||
<p><code>contentUrl</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#contenturl><code>string | undefined</code></a>
|
||
Default: <code>undefined</code>
|
||
A URL to load <code>content</code> from. It has to be a valid URL that is CORS-enabled.
|
||
The URL is only fetched if <code>content</code> property had no value.</p>
|
||
</li>
|
||
<li>
|
||
<p><code>hiddenContent</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#hiddencontent><code>string | undefined</code></a>
|
||
Default: <code>undefined</code>
|
||
Hidden content that gets evaluated without being visible in the code editor.
|
||
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)</p>
|
||
</li>
|
||
<li>
|
||
<p><code>hiddenContentUrl</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#hiddencontenturl><code>string | undefined</code></a>
|
||
Default: <code>undefined</code>
|
||
A URL to load <code>hiddenContent</code> from. It has to be a valid URL that is CORS-enabled.
|
||
The URL is only fetched if <code>hiddenContent</code> property had no value.</p>
|
||
</li>
|
||
<li>
|
||
<p><code>foldedLines</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#foldedlines><code>Array<{ from: number; to: number }> | undefined</code></a>
|
||
Default: <code>undefined</code>
|
||
Lines that get folded when the editor loads. The code can be unfolded by clicking on arrow beside the line.
|
||
This can be useful for less relevant code in embedded playgrounds.</p>
|
||
</li>
|
||
<li>
|
||
<p><code>title</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#title><code>string | undefined</code></a>
|
||
Default: <code>""</code>
|
||
If 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)").</p>
|
||
</li>
|
||
<li>
|
||
<p><code>hideTitle</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#hidetitle><code>boolean | undefined</code></a>
|
||
Default: <code>""</code>
|
||
If <code>true</code>, the title of the code editor is hidden, however its code is still evaluated.
|
||
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).</p>
|
||
</li>
|
||
<li>
|
||
<p><code>order</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#order><code>number | undefined</code></a>
|
||
Default: <code>0</code>
|
||
The order of the editor in the UI.</p>
|
||
</li>
|
||
<li>
|
||
<p><code>selector</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#selector><code>string | undefined</code></a>
|
||
Default: <code>undefined</code>
|
||
A CSS selector to load <code>content</code> from <a href=/docs/features/import#import-code-from-dom>DOM import</a>.</p>
|
||
</li>
|
||
<li>
|
||
<p><code>position</code>:
|
||
Type: <a href=/docs/api/interfaces/Config#position><code>{lineNumber: number, column?: number} | undefined</code></a>
|
||
Default: <code>undefined</code>
|
||
The initial position of the cursor in the code editor.
|
||
Example: <code>{lineNumber: 5, column: 10}</code></p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=style><code>style</code><a href=#style class=hash-link aria-label="Direct link to style" title="Direct link to style"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#style><code>Editor</code></a></p>
|
||
<p>Default: <code>{ language: "css", content: "" }</code></p>
|
||
<p>An object that configures the language and content of the style editor. See <a href=#markup>markup</a> for more details.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=script><code>script</code><a href=#script class=hash-link aria-label="Direct link to script" title="Direct link to script"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#script><code>Editor</code></a></p>
|
||
<p>Default: <code>{ language: "javascript", content: "" }</code></p>
|
||
<p>An object that configures the language and content of the script editor. See <a href=#markup>markup</a> for more details.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=stylesheets><code>stylesheets</code><a href=#stylesheets class=hash-link aria-label="Direct link to stylesheets" title="Direct link to stylesheets"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#stylesheets><code>string[]</code></a></p>
|
||
<p>Default: <code>[]</code></p>
|
||
<p>List of URLs for <a href=/docs/features/external-resources>external stylesheets</a> to add to the <a href=/docs/features/result>result page</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=scripts><code>scripts</code><a href=#scripts class=hash-link aria-label="Direct link to scripts" title="Direct link to scripts"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#scripts><code>string[]</code></a></p>
|
||
<p>Default: <code>[]</code></p>
|
||
<p>List of URLs for <a href=/docs/features/external-resources>external scripts</a> to add to the <a href=/docs/features/result>result page</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=csspreset><code>cssPreset</code><a href=#csspreset class=hash-link aria-label="Direct link to csspreset" title="Direct link to csspreset"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#csspreset><code>"" | "normalize.css" | "reset-css"</code></a></p>
|
||
<p>Default: <code>""</code></p>
|
||
<p><a href=/docs/features/external-resources#css-presets>CSS Preset</a> to use.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=processors><code>processors</code><a href=#processors class=hash-link aria-label="Direct link to processors" title="Direct link to processors"></a></h3>
|
||
<p>Type: <a href=/docs/api/internal/type-aliases/Processor><code>Processor[]</code></a></p>
|
||
<p>Default: <code>[]</code></p>
|
||
<p>List of enabled <a href=/docs/features/css#css-processors>CSS processors</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=customsettings><code>customSettings</code><a href=#customsettings class=hash-link aria-label="Direct link to customsettings" title="Direct link to customsettings"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#customsettings><code>CustomSettings</code></a></p>
|
||
<p>Default: <code>{}</code></p>
|
||
<p>Defines <a href=/docs/advanced/custom-settings>custom settings</a> for the current project.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=imports><code>imports</code><a href=#imports class=hash-link aria-label="Direct link to imports" title="Direct link to imports"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#imports><code>[key: string]: string</code></a></p>
|
||
<p>Default: <code>{}</code></p>
|
||
<p>Allows specifying custom <a href=https://github.com/WICG/import-maps target=_blank rel="noopener noreferrer">import maps</a> for <a href=/docs/features/module-resolution#custom-module-resolution>module imports</a>.</p>
|
||
<p>For example, adding this JavaScript code:</p>
|
||
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports">moment</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'moment'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> partition </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'lodash'</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<p>would add this import map in the result page:</p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>importmap</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"imports"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"moment"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"https://esm.sh/moment"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"lodash"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"https://esm.sh/lodash"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<p>However, if <code>imports</code> is specified as follows:</p>
|
||
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-json codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"imports"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"moment"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<p>The import map becomes like this:</p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>importmap</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"imports"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"moment"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"lodash"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"https://esm.sh/lodash"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>Note</div><div class=admonitionContent_BuS1><p>Currently, multiple import maps are not yet supported. <a href=https://crbug.com/927119 target=_blank rel="noopener noreferrer">https://crbug.com/927119</a><p>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 <code>imports</code> config property or <code>imports</code> <a href=#customsettings>customSettings</a> property.</div></div>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=types><code>types</code><a href=#types class=hash-link aria-label="Direct link to types" title="Direct link to types"></a></h3>
|
||
<p>Type: <code>[key: string]: string | { autoload?: boolean ; declareAsModule?: boolean ; url: string }</code></p>
|
||
<p>Default: <code>{}</code></p>
|
||
<p>Allows providing custom <a href=https://www.typescriptlang.org/docs/handbook/2/type-declarations.html target=_blank rel="noopener noreferrer">TypeScript type declarations</a> for better <a href=/docs/features/intellisense>editor intellisense</a>.</p>
|
||
<p>It is an object where each key represents module name and value represents the types.
|
||
This can be a URL to a type declaration file. For example, if this is the type declaration file:</p>
|
||
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockTitle_Ktv7>https://my-custom-domain/my-type-declarations.d.ts</div><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>declare</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>module</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'my-demo-lib'</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>class</span><span class="token plain"> </span><span class="token class-name">Greeter</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token function" style=color:#d73a49>morning</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token function" style=color:#d73a49>evening</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<p>It can be used like that:</p>
|
||
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-json codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"types"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"my-demo-lib"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"https://my-custom-domain/my-type-declarations.d.ts"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<p>Alternatively, the value for module name can be an object with the following properties:</p>
|
||
<ul>
|
||
<li><code>url</code>: <code>string</code> (required). The URL to type declaration file.</li>
|
||
<li><code>autoload</code>: <code>boolean</code> (optional). By default, the types are only loaded when the module is imported in code. If <code>autoload</code> property is set to <code>true</code>, the types are loaded regardless if the module was imported.</li>
|
||
<li><code>declareAsModule</code>: <code>boolean</code> (optional). Declares the types as module with the supplied module name.</li>
|
||
</ul>
|
||
<p>Example:</p>
|
||
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-json codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"types"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"my-demo-lib"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"url"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"https://my-custom-domain/types.d.ts"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"autoload"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token boolean" style=color:#36acaa>true</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"declareAsModule"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token boolean" style=color:#36acaa>true</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=tests><code>tests</code><a href=#tests class=hash-link aria-label="Direct link to tests" title="Direct link to tests"></a></h3>
|
||
<p>Type: <code>undefined</code> | <code>Partial<Editor></code></p>
|
||
<p>Default: <code>{ language: 'typescript', content: '' }</code></p>
|
||
<p>Configures the <a href=/docs/features/tests#supported-languages>language</a> and content of <a href=/docs/features/tests>tests</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=version><code>version</code><a href=#version class=hash-link aria-label="Direct link to version" title="Direct link to version"></a></h3>
|
||
<p>Type: <code>Readonly</code> <a href=/docs/api/interfaces/Config#description><code>string</code></a></p>
|
||
<p>Default: Current LiveCodes Version.</p>
|
||
<p>This is a read-only property which specifies the current LiveCodes version. It can be shown using the SDK <a href=/docs/sdk/js-ts#exec><code>exec</code></a> method.</p>
|
||
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic>// in browser console of full app (e.g. https://livecodes.io)</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword control-flow" style=color:#00009f>await</span><span class="token plain"> livecodes</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>exec</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'showVersion'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<p>Version specified in <a href=/docs/features/export>exported</a> projects allows automatically upgrading the project configuration when imported by an app with a newer version.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=app-settings>App Settings<a href=#app-settings class=hash-link aria-label="Direct link to App Settings" title="Direct link to App Settings"></a></h2>
|
||
<p>These are properties that define how the app behaves.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=readonly><code>readonly</code><a href=#readonly class=hash-link aria-label="Direct link to readonly" title="Direct link to readonly"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#readonly><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>If <code>true</code>, editors are loaded in read-only mode, where the user is not allowed to change the code.</p>
|
||
<p>By default, when <code>readonly</code> is set to <code>true</code>, the light-weight code editor <a href=/docs/features/editor-settings#code-editor>CodeJar</a> is used. If you wish to use another editor, set the <a href=#editor>editor</a> property.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=allowlangchange><code>allowLangChange</code><a href=#allowlangchange class=hash-link aria-label="Direct link to allowlangchange" title="Direct link to allowlangchange"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#allowlangchange><code>boolean</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>If <code>false</code>, the UI will not show the menu that allows changing editor language.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=view><code>view</code><a href=#view class=hash-link aria-label="Direct link to view" title="Direct link to view"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#view><code>"split" | "editor" | "result"</code></a></p>
|
||
<p>Default: <code>"split"</code></p>
|
||
<p>The <a href=/docs/features/default-view>default view</a> for the playground.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=mode><code>mode</code><a href=#mode class=hash-link aria-label="Direct link to mode" title="Direct link to mode"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#mode><code>"full" | "focus" | "simple" | "lite" | "result" | "editor" | "codeblock"</code></a></p>
|
||
<p>Default: <code>"full"</code></p>
|
||
<p>Sets the <a href=/docs/features/display-modes>display mode</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=tools><code>tools</code><a href=#tools class=hash-link aria-label="Direct link to tools" title="Direct link to tools"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#tools><code>Partial<{ enabled: Array<'console' | 'compiled' | 'tests'> | 'all'; active: 'console' | 'compiled' | 'tests' | ''; status: 'closed' | 'open' | 'full' | 'none' | ''; }></code></a></p>
|
||
<p>Default: <code>{ enabled: 'all', active: '', status: '' }</code></p>
|
||
<p>Sets enabled and active tools and status of <a href=/docs/features/tools-pane>tools pane</a>.</p>
|
||
<p>Example:</p>
|
||
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-json codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"enabled"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"compiled"</span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"active"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"open"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"javascript"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log('Hello World!');"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"enabled"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string" style=color:#e3116c>"compiled"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"active"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"open"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"javascript"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log('Hello World!');"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"enabled"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string" style=color:#e3116c>"compiled"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"active"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"open"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"javascript"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log('Hello World!');"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"enabled"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string" style=color:#e3116c>"compiled"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"active"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"open"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"script"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"javascript"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console.log('Hello World!');"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"activeEditor"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"script"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"tools"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"enabled"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"compiled"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"active"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"status"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"open"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"script"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"javascript"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console.log('Hello World!');"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"activeEditor"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"script"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"tools"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"enabled"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"compiled"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"active"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"status"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"open"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=zoom><code>zoom</code><a href=#zoom class=hash-link aria-label="Direct link to zoom" title="Direct link to zoom"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#zoom><code>1 | 0.5 | 0.25</code></a></p>
|
||
<p>Default: <code>1</code></p>
|
||
<p>Sets result page <a href=/docs/features/result#result-page-zoom>zoom level</a>.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=user-settings>User Settings<a href=#user-settings class=hash-link aria-label="Direct link to User Settings" title="Direct link to User Settings"></a></h2>
|
||
<p>These are properties that define the <a href=/docs/features/user-settings>user settings</a>, including <a href=/docs/features/editor-settings>editor settings</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=enableai><code>enableAI</code><a href=#enableai class=hash-link aria-label="Direct link to enableai" title="Direct link to enableai"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#enableai><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>If <code>true</code>, <a href=/docs/features/ai>AI code assistant</a> is enabled.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=autoupdate><code>autoupdate</code><a href=#autoupdate class=hash-link aria-label="Direct link to autoupdate" title="Direct link to autoupdate"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#autoupdate><code>boolean</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>If <code>true</code>, the result page is automatically updated on code change, after time <a href=#delay>delay</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=autosave><code>autosave</code><a href=#autosave class=hash-link aria-label="Direct link to autosave" title="Direct link to autosave"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#autosave><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>If <code>true</code>, the project is automatically saved on code change, after time <a href=#delay>delay</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=autotest><code>autotest</code><a href=#autotest class=hash-link aria-label="Direct link to autotest" title="Direct link to autotest"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#autotest><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>If <code>true</code>, the project is watched for code changes which trigger tests to auto-run.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=delay><code>delay</code><a href=#delay class=hash-link aria-label="Direct link to delay" title="Direct link to delay"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#delay><code>number</code></a></p>
|
||
<p>Default: <code>1500</code></p>
|
||
<p>Time delay (in milliseconds) following code change, after which the result page is updated (if <a href=#autoupdate><code>autoupdate</code></a> is <code>true</code>) and/or the project is saved (if <a href=#autosave><code>autosave</code></a> is <code>true</code>).</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=formatonsave><code>formatOnsave</code><a href=#formatonsave class=hash-link aria-label="Direct link to formatonsave" title="Direct link to formatonsave"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#formatonsave><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>If <code>true</code>, the code is automatically <a href=/docs/features/code-format>formatted</a> on saving the project.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=layout><code>layout</code><a href=#layout class=hash-link aria-label="Direct link to layout" title="Direct link to layout"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#layout><code>"horizontal"| "vertical" | "responsive" | undefined</code></a></p>
|
||
<p>Default: <code>"responsive"</code></p>
|
||
<p>Sets the app layout to horizontal or vertical. If set to <code>"responsive"</code> (the default) or <code>undefined</code>, the layout is vertical in small screens when the playground height is larger than its width, otherwise horizontal.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=theme><code>theme</code><a href=#theme class=hash-link aria-label="Direct link to theme" title="Direct link to theme"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#theme><code>"light" | "dark"</code></a></p>
|
||
<p>Default: <code>"dark"</code></p>
|
||
<p>Sets the app <a href=/docs/features/themes>theme</a> to light/dark mode.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=themecolor><code>themeColor</code><a href=#themecolor class=hash-link aria-label="Direct link to themecolor" title="Direct link to themecolor"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#themecolor><code>string | undefined</code></a></p>
|
||
<p>Default: <code>"hsl(214, 40%, 50%)"</code></p>
|
||
<p>A string representing a <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/color_value target=_blank rel="noopener noreferrer">CSS color value</a>, used to set the app <a href=/docs/features/themes>theme color</a>. It can be any valid CSS color value, such as <code>"#4DB39E"</code>, <code>"rgb(245, 225, 49)"</code>, <code>"hsl(324, 40%, 50%)"</code> and <code>"lightblue"</code>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=editortheme><code>editorTheme</code><a href=#editortheme class=hash-link aria-label="Direct link to editortheme" title="Direct link to editortheme"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#editortheme><code>EditorTheme[] | string | undefined</code></a></p>
|
||
<p>Default: <code>undefined</code></p>
|
||
<p>Sets the code editor themes.</p>
|
||
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>Note</div><div class=admonitionContent_BuS1><p>You can preview and set editor themes in the <a href="/docs/../?screen=editor-settings" target=_blank rel="noopener noreferrer">editor settings screen</a>.</div></div>
|
||
<p>Three <a href=#editor>code editors</a> are supported in LiveCodes: <strong>Monaco</strong> (the default on desktop), <strong>CodeMirror</strong> (the default on mobile) and <strong>CodeJar</strong> (the default in <a href=/docs/features/display-modes#codeblock>codeblocks</a>, in <a href=/docs/features/lite>lite mode</a> and in <a href=#readonly>readonly</a> playgrounds). Each editor has its own set of themes, represented by the types: <a href=/docs/api/internal/type-aliases/MonacoTheme><code>MonacoTheme</code></a>, <a href=/docs/api/internal/type-aliases/CodemirrorTheme><code>CodemirrorTheme</code></a> and <a href=/docs/api/internal/type-aliases/CodejarTheme><code>CodejarTheme</code></a>.</p>
|
||
<p>The <code>editorTheme</code> 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 <a href=/docs/api/internal/type-aliases/EditorTheme><code>EditorTheme</code></a> items or a string of comma-separated items.</p>
|
||
<p>Each item can be composed of:</p>
|
||
<p><code> editor:</code> <code>theme-name</code> <code>@app-theme</code></p>
|
||
<p>Where:</p>
|
||
<ul>
|
||
<li><code>editor</code> is the name of the editor (<code>"monaco" | "codemirror" | "codejar"</code>). [Optional]</li>
|
||
<li><code>theme-name</code> is the name of the theme (e.g. <code>"monokai"</code>). [Required]
|
||
Valid theme names can be found here:<!-- -->
|
||
<ul>
|
||
<li>Monaco: <a href=/docs/api/internal/type-aliases/MonacoTheme><code>MonacoTheme</code></a></li>
|
||
<li>CodeMirror: <a href=/docs/api/internal/type-aliases/CodemirrorTheme><code>CodemirrorTheme</code></a></li>
|
||
<li>CodeJar: <a href=/docs/api/internal/type-aliases/CodejarTheme><code>CodejarTheme</code></a>.</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>app-theme</code> is the name of the app theme (<code>"dark" | "light"</code>). [Optional]</li>
|
||
</ul>
|
||
<p>Examples:</p>
|
||
<ul>
|
||
<li><code>"vs"</code></li>
|
||
<li><code>"monaco:twilight, codemirror:one-dark"</code></li>
|
||
<li><code>["vs@light"]</code></li>
|
||
<li><code>["vs@light", "vs-dark@dark"]</code></li>
|
||
<li><code>["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]</code></li>
|
||
</ul>
|
||
<p>Each <code>EditorTheme</code> 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. <code>"monaco:monokai"</code>). It can also optionally be followed by the app theme separated by "@" (e.g. <code>"monokai@dark"</code>).</p>
|
||
<p>Multiple <code>EditorTheme</code> 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 (<code>monaco</code>, <code>codemirror</code> or <code>codejar</code>) and app theme (<code>light</code> or <code>dark</code>) 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.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=applanguage><code>appLanguage</code><a href=#applanguage class=hash-link aria-label="Direct link to applanguage" title="Direct link to applanguage"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#applanguage><code>AppLanguage | undefined</code></a></p>
|
||
<p>Default: <code>undefined</code></p>
|
||
<p>Spoken language code that sets the app UI language (e.g. <code>"ar"</code>, <code>"zh-CN"</code>). Used in translations for internationalization. If <code>undefined</code> (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.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=recoverunsaved><code>recoverUnsaved</code><a href=#recoverunsaved class=hash-link aria-label="Direct link to recoverunsaved" title="Direct link to recoverunsaved"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#recoverunsaved><code>boolean</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>Enables <a href=/docs/features/recover>recovering last unsaved project</a> when the app is reopened.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=welcome><code>welcome</code><a href=#welcome class=hash-link aria-label="Direct link to welcome" title="Direct link to welcome"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#welcome><code>boolean</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>If <code>true</code>, the <a href=/docs/features/welcome>welcome screen</a> is displayed when the app loads.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=showspacing><code>showSpacing</code><a href=#showspacing class=hash-link aria-label="Direct link to showspacing" title="Direct link to showspacing"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#showspacing><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>Enables <a href=/docs/features/result#show-spacings>showing element spacing</a> in the result page.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=editor><code>editor</code><a href=#editor class=hash-link aria-label="Direct link to editor" title="Direct link to editor"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#editor><code>"monaco" | "codemirror" | "codejar" | "auto" | undefined</code></a></p>
|
||
<p>Default: <code>undefined</code></p>
|
||
<p>Selects the <a href=/docs/features/editor-settings#code-editor>code editor</a> to use.</p>
|
||
<p>If <code>undefined</code> (the default):<br>
|
||
Monaco editor is used on desktop,<br>
|
||
CodeMirror is used on mobile and in <code>simple</code> mode,<br>
|
||
while CodeJar is used in <a href=/docs/features/display-modes#codeblock><code>codeblock</code> mode</a>, in <a href=/docs/features/lite><code>lite</code> mode</a> and in <a href=#readonly><code>readonly</code></a> playgrounds.</p>
|
||
<p>If set to <code>auto</code>, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=fontfamily><code>fontFamily</code><a href=#fontfamily class=hash-link aria-label="Direct link to fontfamily" title="Direct link to fontfamily"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#fontfamily><code>string | undefined</code></a></p>
|
||
<p>Default: <code>undefined</code></p>
|
||
<p>Sets the <a href=/docs/features/editor-settings>code editor</a> font family.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=fontsize><code>fontSize</code><a href=#fontsize class=hash-link aria-label="Direct link to fontsize" title="Direct link to fontsize"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#fontfamily><code>number | undefined</code></a></p>
|
||
<p>Default: <code>undefined</code></p>
|
||
<p>Sets the <a href=/docs/features/editor-settings>code editor</a> font size.</p>
|
||
<p>If <code>undefined</code> (the default), the font size is set to 14 for the full app and 12 for <a href=/docs/features/embeds>embeds</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=usetabs><code>useTabs</code><a href=#usetabs class=hash-link aria-label="Direct link to usetabs" title="Direct link to usetabs"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#usetabs><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>If <code>true</code>, lines are indented with tabs instead of spaces. Also used in <a href=/docs/features/code-format>code formatting</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=tabsize><code>tabSize</code><a href=#tabsize class=hash-link aria-label="Direct link to tabsize" title="Direct link to tabsize"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#tabsize><code>number</code></a></p>
|
||
<p>Default: <code>2</code></p>
|
||
<p>The number of spaces per indentation-level. Also used in <a href=/docs/features/code-format>code formatting</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=linenumbers><code>lineNumbers</code><a href=#linenumbers class=hash-link aria-label="Direct link to linenumbers" title="Direct link to linenumbers"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#linenumbers><code>boolean | "relative"</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>Show line numbers in <a href=/docs/features/editor-settings>code editor</a>.
|
||
If set to <code>"relative"</code>, line numbers are shown relative to the current line. This can be useful with <a href=#editormode>vim mode</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=wordwrap><code>wordWrap</code><a href=#wordwrap class=hash-link aria-label="Direct link to wordwrap" title="Direct link to wordwrap"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#wordwrap><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>Enables word-wrap for long lines.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=closebrackets><code>closeBrackets</code><a href=#closebrackets class=hash-link aria-label="Direct link to closebrackets" title="Direct link to closebrackets"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#closebrackets><code>boolean</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>Use auto-complete to close brackets and quotes.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=foldregions><code>foldRegions</code><a href=#foldregions class=hash-link aria-label="Direct link to foldregions" title="Direct link to foldregions"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#foldregions><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>When set to <code>true</code>, regions marked by <code>#region</code> and <code>#endregion</code> comments are folded when the project is loaded.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=emmet><code>emmet</code><a href=#emmet class=hash-link aria-label="Direct link to emmet" title="Direct link to emmet"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#emmet><code>boolean</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>Enables <a href=/docs/features/editor-settings#emmet>Emmet</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=editormode><code>editorMode</code><a href=#editormode class=hash-link aria-label="Direct link to editormode" title="Direct link to editormode"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#editormode><code>"vim" | "emacs" | undefined</code></a></p>
|
||
<p>Default: <code>undefined</code></p>
|
||
<p>Sets <a href=/docs/features/editor-settings#editor-modes>editor mode</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=semicolons><code>semicolons</code><a href=#semicolons class=hash-link aria-label="Direct link to semicolons" title="Direct link to semicolons"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#semicolons><code>boolean</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>Configures Prettier <a href=/docs/features/code-format>code formatter</a> to use <a href=https://prettier.io/docs/en/options.html#semicolons target=_blank rel="noopener noreferrer">semi-colons</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=singlequote><code>singleQuote</code><a href=#singlequote class=hash-link aria-label="Direct link to singlequote" title="Direct link to singlequote"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#singlequote><code>boolean</code></a></p>
|
||
<p>Default: <code>false</code></p>
|
||
<p>Configures Prettier <a href=/docs/features/code-format>code formatter</a> to use <a href=https://prettier.io/docs/en/options.html#quotes target=_blank rel="noopener noreferrer">single quotes instead of double quotes</a>.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=trailingcomma><code>trailingComma</code><a href=#trailingcomma class=hash-link aria-label="Direct link to trailingcomma" title="Direct link to trailingcomma"></a></h3>
|
||
<p>Type: <a href=/docs/api/interfaces/Config#trailingcomma><code>boolean</code></a></p>
|
||
<p>Default: <code>true</code></p>
|
||
<p>Configures Prettier <a href=/docs/features/code-format>code formatter</a> to use <a href=https://prettier.io/docs/en/options.html#trailing-commas target=_blank rel="noopener noreferrer">trailing commas</a>.</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/live-codes/livecodes/tree/develop/docs/docs/configuration/configuration-object.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/configuration/><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Configuration</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/configuration/query-params><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Query Parameters</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a><li><a href=#typescript-types class="table-of-contents__link toc-highlight">TypeScript Types</a><li><a href=#default-config class="table-of-contents__link toc-highlight">Default Config</a><li><a href=#project-content class="table-of-contents__link toc-highlight">Project Content</a><ul><li><a href=#title class="table-of-contents__link toc-highlight"><code>title</code></a><li><a href=#description class="table-of-contents__link toc-highlight"><code>description</code></a><li><a href=#head class="table-of-contents__link toc-highlight"><code>head</code></a><li><a href=#htmlattrs class="table-of-contents__link toc-highlight"><code>htmlAttrs</code></a><li><a href=#tags class="table-of-contents__link toc-highlight"><code>tags</code></a><li><a href=#activeeditor class="table-of-contents__link toc-highlight"><code>activeEditor</code></a><li><a href=#languages class="table-of-contents__link toc-highlight"><code>languages</code></a><li><a href=#markup class="table-of-contents__link toc-highlight"><code>markup</code></a><li><a href=#style class="table-of-contents__link toc-highlight"><code>style</code></a><li><a href=#script class="table-of-contents__link toc-highlight"><code>script</code></a><li><a href=#stylesheets class="table-of-contents__link toc-highlight"><code>stylesheets</code></a><li><a href=#scripts class="table-of-contents__link toc-highlight"><code>scripts</code></a><li><a href=#csspreset class="table-of-contents__link toc-highlight"><code>cssPreset</code></a><li><a href=#processors class="table-of-contents__link toc-highlight"><code>processors</code></a><li><a href=#customsettings class="table-of-contents__link toc-highlight"><code>customSettings</code></a><li><a href=#imports class="table-of-contents__link toc-highlight"><code>imports</code></a><li><a href=#types class="table-of-contents__link toc-highlight"><code>types</code></a><li><a href=#tests class="table-of-contents__link toc-highlight"><code>tests</code></a><li><a href=#version class="table-of-contents__link toc-highlight"><code>version</code></a></ul><li><a href=#app-settings class="table-of-contents__link toc-highlight">App Settings</a><ul><li><a href=#readonly class="table-of-contents__link toc-highlight"><code>readonly</code></a><li><a href=#allowlangchange class="table-of-contents__link toc-highlight"><code>allowLangChange</code></a><li><a href=#view class="table-of-contents__link toc-highlight"><code>view</code></a><li><a href=#mode class="table-of-contents__link toc-highlight"><code>mode</code></a><li><a href=#tools class="table-of-contents__link toc-highlight"><code>tools</code></a><li><a href=#zoom class="table-of-contents__link toc-highlight"><code>zoom</code></a></ul><li><a href=#user-settings class="table-of-contents__link toc-highlight">User Settings</a><ul><li><a href=#enableai class="table-of-contents__link toc-highlight"><code>enableAI</code></a><li><a href=#autoupdate class="table-of-contents__link toc-highlight"><code>autoupdate</code></a><li><a href=#autosave class="table-of-contents__link toc-highlight"><code>autosave</code></a><li><a href=#autotest class="table-of-contents__link toc-highlight"><code>autotest</code></a><li><a href=#delay class="table-of-contents__link toc-highlight"><code>delay</code></a><li><a href=#formatonsave class="table-of-contents__link toc-highlight"><code>formatOnsave</code></a><li><a href=#layout class="table-of-contents__link toc-highlight"><code>layout</code></a><li><a href=#theme class="table-of-contents__link toc-highlight"><code>theme</code></a><li><a href=#themecolor class="table-of-contents__link toc-highlight"><code>themeColor</code></a><li><a href=#editortheme class="table-of-contents__link toc-highlight"><code>editorTheme</code></a><li><a href=#applanguage class="table-of-contents__link toc-highlight"><code>appLanguage</code></a><li><a href=#recoverunsaved class="table-of-contents__link toc-highlight"><code>recoverUnsaved</code></a><li><a href=#welcome class="table-of-contents__link toc-highlight"><code>welcome</code></a><li><a href=#showspacing class="table-of-contents__link toc-highlight"><code>showSpacing</code></a><li><a href=#editor class="table-of-contents__link toc-highlight"><code>editor</code></a><li><a href=#fontfamily class="table-of-contents__link toc-highlight"><code>fontFamily</code></a><li><a href=#fontsize class="table-of-contents__link toc-highlight"><code>fontSize</code></a><li><a href=#usetabs class="table-of-contents__link toc-highlight"><code>useTabs</code></a><li><a href=#tabsize class="table-of-contents__link toc-highlight"><code>tabSize</code></a><li><a href=#linenumbers class="table-of-contents__link toc-highlight"><code>lineNumbers</code></a><li><a href=#wordwrap class="table-of-contents__link toc-highlight"><code>wordWrap</code></a><li><a href=#closebrackets class="table-of-contents__link toc-highlight"><code>closeBrackets</code></a><li><a href=#foldregions class="table-of-contents__link toc-highlight"><code>foldRegions</code></a><li><a href=#emmet class="table-of-contents__link toc-highlight"><code>emmet</code></a><li><a href=#editormode class="table-of-contents__link toc-highlight"><code>editorMode</code></a><li><a href=#semicolons class="table-of-contents__link toc-highlight"><code>semicolons</code></a><li><a href=#singlequote class="table-of-contents__link toc-highlight"><code>singleQuote</code></a><li><a href=#trailingcomma class="table-of-contents__link toc-highlight"><code>trailingComma</code></a></ul></ul><div class="custom-content custom-content-toc content_kfNa">
|
||
<div class=sponsors>
|
||
<div class=sponsors-title>Sponsors</div>
|
||
<ul>
|
||
|
||
<li><a href=https://livecodes.io/docs/sponsor title="Become a sponsor">Your Logo</a></li>
|
||
</ul>
|
||
</div>
|
||
</div></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class=footer__title>Docs</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/overview>Overview</a><li class=footer__item><a class=footer__link-item href=/docs/why>Why Another Playground?</a><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Getting Started</a><li class=footer__item><a class=footer__link-item href=/docs/features>Features</a><li class=footer__item><a class=footer__link-item href=/docs/languages>Languages</a><li class=footer__item><a class=footer__link-item href=/docs/sdk>SDK</a></ul></div><div class="col footer__col"><div class=footer__title>LiveCodes</div><ul class="footer__items clean-list"><li class=footer__item><a href=/docs/../ target=_blank rel="noopener noreferrer" class=footer__link-item>App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=/docs/../?new target=_blank rel="noopener noreferrer" class=footer__link-item>Starter Templates<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href="/docs/../?screen=import" target=_blank rel="noopener noreferrer" class=footer__link-item>Import...<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a class=footer__link-item href=/docs/features/ai>AI Code Assistant 🪄</a><li class=footer__item><a class=footer__link-item href=/docs/bookmarklet>Bookmarklet</a><li class=footer__item><span style="display: flex; gap: 0.5em; align-items: baseline;"><a href=/docs/llms.txt target=_blank class=footer__link-item>llms.txt</a>-<a href=/docs/llms-full.txt target=_blank class=footer__link-item>llms-full.txt</a></span></ul></div><div class="col footer__col"><div class=footer__title>Info</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/credits>Credits</a><li class=footer__item><a class=footer__link-item href=/docs/license>License</a><li class=footer__item><a class=footer__link-item href=/docs/sponsor>Sponsor 💚</a><li class=footer__item><a class=footer__link-item href=/docs/contact>Contact</a><li class=footer__item><a class=footer__link-item href=/docs/about>About us</a></ul></div><div class="col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class=footer__link-item>Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>𝕏 / Twitter<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://dev.to/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>Dev<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://www.npmjs.com/package/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>npm<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://status.livecodes.io target=_blank rel="noopener noreferrer" class="footer__link-item status-link"><span>Status</span><svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=footer__copyright><br> Released under the MIT License <br>
|
||
Copyright © 2025
|
||
<a href=https://github.com/hatemhosny target=_blank rel="noopener noreferrer">Hatem Hosny</a></div></div></div></footer></div> |