gitea/livecode-static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
livecode-static/docs/api/internal/interfaces/API/index.html
yangxin 1214258379 打包好的livecode,版本v-46
2025-06-11 22:23:49 +08:00

200 lines
90 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/internal/interfaces/API" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Interface: API | 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/api/internal/interfaces/API><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="Interface: API | LiveCodes"><meta data-rh=true name=description content="Extended by"><meta data-rh=true property=og:description content="Extended by"><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/api/internal/interfaces/API><link data-rh=true rel=alternate href=https://livecodes.io/docs/api/internal/interfaces/API hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/api/internal/interfaces/API 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.e1bd469b.js defer></script><script src=/docs/assets/js/main.72616d8f.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 class="navbar__item navbar__link" 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><main class="docMainContainer_TBSr docMainContainerEnhanced_lQrH"><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><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>Interface: API</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>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=extended-by>Extended by<a href=#extended-by class=hash-link aria-label="Direct link to Extended by" title="Direct link to Extended by">​</a></h2>
<ul>
<li><a href=/docs/api/interfaces/Playground><code>Playground</code></a></li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=properties>Properties<a href=#properties class=hash-link aria-label="Direct link to Properties" title="Direct link to Properties">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=destroy>destroy()<a href=#destroy class=hash-link aria-label="Direct link to destroy()" title="Direct link to destroy()">​</a></h3>
<blockquote>
<p><strong>destroy</strong>: () => <code>Promise</code>&lt;<code>void</code>></p>
</blockquote>
<p>Destroys the playground instance, and removes event listeners.</p>
<p>Further call to any SDK methods throws an error.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns>Returns<a href=#returns class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<code>void</code>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example>Example<a href=#example class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</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 plain">playground</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>await</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>destroy</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 comment" style=color:#999988;font-style:italic>// playground destroyed</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>// any further SDK call throws an error</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in>Defined in<a href=#defined-in class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L211 target=_blank rel="noopener noreferrer">models.ts:211</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=exec>exec()<a href=#exec class=hash-link aria-label="Direct link to exec()" title="Direct link to exec()">​</a></h3>
<blockquote>
<p><strong>exec</strong>: (<code>command</code>, ...<code>args</code>) => <code>Promise</code>&lt;<code>object</code> | <code>object</code>></p>
</blockquote>
<p>Executes custom commands, including: <code>"setBroadcastToken"</code> and <code>"showVersion"</code>.</p>
<p>See <a href=https://livecodes.io/docs/sdk/js-ts#exec target=_blank rel="noopener noreferrer">docs</a> for details.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=parameters>Parameters<a href=#parameters class=hash-link aria-label="Direct link to Parameters" title="Direct link to Parameters">​</a></h4>
<p>• <strong>command</strong>: <a href=/docs/api/internal/type-aliases/APICommands><code>APICommands</code></a></p>
<p>• ...<strong>args</strong>: <code>any</code>[]</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-1>Returns<a href=#returns-1 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<code>object</code> | <code>object</code>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-1>Defined in<a href=#defined-in-1 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L194 target=_blank rel="noopener noreferrer">models.ts:194</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=format>format()<a href=#format class=hash-link aria-label="Direct link to format()" title="Direct link to format()">​</a></h3>
<blockquote>
<p><strong>format</strong>: (<code>allEditors</code>?) => <code>Promise</code>&lt;<code>void</code>></p>
</blockquote>
<p>Formats the code.</p>
<p>By default, the code in all editors (markup, style and script) is formatted.
To format only the active editor, the value <code>false</code> should be passed as an argument.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=parameters-1>Parameters<a href=#parameters-1 class=hash-link aria-label="Direct link to Parameters" title="Direct link to Parameters">​</a></h4>
<p>• <strong>allEditors?</strong>: <code>boolean</code></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-2>Returns<a href=#returns-2 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<code>void</code>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-1>Example<a href=#example-1 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</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 plain">playground</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>await</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>format</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 comment" style=color:#999988;font-style:italic>// code in editors is formatted</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-2>Defined in<a href=#defined-in-2 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L31 target=_blank rel="noopener noreferrer">models.ts:31</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=getcode>getCode()<a href=#getcode class=hash-link aria-label="Direct link to getCode()" title="Direct link to getCode()">​</a></h3>
<blockquote>
<p><strong>getCode</strong>: () => <code>Promise</code>&lt;<a href=/docs/api/interfaces/Code><code>Code</code></a>></p>
</blockquote>
<p>Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.</p>
<p>See <a href=https://livecodes.io/docs/api/interfaces/Code target=_blank rel="noopener noreferrer">Code</a> for the structure of the returned object.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-3>Returns<a href=#returns-3 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<a href=/docs/api/interfaces/Code><code>Code</code></a>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-2>Example<a href=#example-2 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</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 plain">playground</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"> code </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"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>getCode</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>// source code, language and compiled code for the script editor</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"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> content</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> language</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> compiled </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"> code</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">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" 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>// result page HTML</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"> result </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> code</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">result</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-3>Defined in<a href=#defined-in-3 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L105 target=_blank rel="noopener noreferrer">models.ts:105</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=getconfig>getConfig()<a href=#getconfig class=hash-link aria-label="Direct link to getConfig()" title="Direct link to getConfig()">​</a></h3>
<blockquote>
<p><strong>getConfig</strong>: (<code>contentOnly</code>?) => <code>Promise</code>&lt;<a href=/docs/api/interfaces/Config><code>Config</code></a>></p>
</blockquote>
<p>Gets a <a href=https://livecodes.io/docs/configuration/configuration-object target=_blank rel="noopener noreferrer">configuration object</a> representing the playground state.</p>
<p>This can be used to restore state if passed as an <a href=https://livecodes.io/docs/sdk/js-ts#embed-options target=_blank rel="noopener noreferrer">EmbedOptions</a> property when <a href=https://livecodes.io/docs/sdk/js-ts/#createplayground target=_blank rel="noopener noreferrer">creating playgrounds</a>,
or can be manipulated and loaded in run-time using <a href=https://livecodes.io/docs/sdk/js-ts#setconfig target=_blank rel="noopener noreferrer"><code>setConfig</code></a> method.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=parameters-2>Parameters<a href=#parameters-2 class=hash-link aria-label="Direct link to Parameters" title="Direct link to Parameters">​</a></h4>
<p>• <strong>contentOnly?</strong>: <code>boolean</code></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-4>Returns<a href=#returns-4 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<a href=/docs/api/interfaces/Config><code>Config</code></a>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-3>Example<a href=#example-3 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</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 plain">playground</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"> config </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"> 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 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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-4>Defined in<a href=#defined-in-4 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L64 target=_blank rel="noopener noreferrer">models.ts:64</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=getshareurl>getShareUrl()<a href=#getshareurl class=hash-link aria-label="Direct link to getShareUrl()" title="Direct link to getShareUrl()">​</a></h3>
<blockquote>
<p><strong>getShareUrl</strong>: (<code>shortUrl</code>?) => <code>Promise</code>&lt;<code>string</code>></p>
</blockquote>
<p>Gets a <a href=https://livecodes.io/docs/features/share target=_blank rel="noopener noreferrer">share url</a> for the current project.</p>
<p>By default, the url has a long query string representing the compressed encoded config object.
If the argument <code>shortUrl</code> was set to <code>true</code>, a short url is generated.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=parameters-3>Parameters<a href=#parameters-3 class=hash-link aria-label="Direct link to Parameters" title="Direct link to Parameters">​</a></h4>
<p>• <strong>shortUrl?</strong>: <code>boolean</code></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-5>Returns<a href=#returns-5 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<code>string</code>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-4>Example<a href=#example-4 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</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 plain">playground</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"> longUrl </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"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>getShareUrl</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 keyword" style=color:#00009f>const</span><span class="token plain"> shortUrl </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"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>getShareUrl</span><span class="token punctuation" style=color:#393A34>(</span><span class="token boolean" style=color:#36acaa>true</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-5>Defined in<a href=#defined-in-5 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L48 target=_blank rel="noopener noreferrer">models.ts:48</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=onchange><del>onChange()</del><a href=#onchange class=hash-link aria-label="Direct link to onchange" title="Direct link to onchange">​</a></h3>
<blockquote>
<p><strong>onChange</strong>: (<code>fn</code>) => <code>object</code></p>
</blockquote>
<p>Runs a callback function when code changes.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=parameters-4>Parameters<a href=#parameters-4 class=hash-link aria-label="Direct link to Parameters" title="Direct link to Parameters">​</a></h4>
<p>• <strong>fn</strong></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-6>Returns<a href=#returns-6 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>object</code></p>
<h5 class="anchor anchorWithStickyNavbar_LWe7" id=remove><del>remove()</del><a href=#remove class=hash-link aria-label="Direct link to remove" title="Direct link to remove">​</a></h5>
<blockquote>
<p><strong>remove</strong>: () => <code>void</code></p>
</blockquote>
<h6 class="anchor anchorWithStickyNavbar_LWe7" id=returns-7>Returns<a href=#returns-7 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h6>
<p><code>void</code></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=deprecated>Deprecated<a href=#deprecated class=hash-link aria-label="Direct link to Deprecated" title="Direct link to Deprecated">​</a></h4>
<p>Use <a href=https://livecodes.io/docs/sdk/js-ts#watch target=_blank rel="noopener noreferrer"><code>watch</code></a> method instead.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-6>Defined in<a href=#defined-in-6 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L142 target=_blank rel="noopener noreferrer">models.ts:142</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=run>run()<a href=#run class=hash-link aria-label="Direct link to run()" title="Direct link to run()">​</a></h3>
<blockquote>
<p><strong>run</strong>: () => <code>Promise</code>&lt;<code>void</code>></p>
</blockquote>
<p>Runs the <a href=https://livecodes.io/docs/features/result target=_blank rel="noopener noreferrer">result page</a> (after any required compilation for code).</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-8>Returns<a href=#returns-8 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<code>void</code>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-5>Example<a href=#example-5 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</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 plain">playground</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>await</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>run</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 comment" style=color:#999988;font-style:italic>// new result page is displayed</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-7>Defined in<a href=#defined-in-7 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L14 target=_blank rel="noopener noreferrer">models.ts:14</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=runtests>runTests()<a href=#runtests class=hash-link aria-label="Direct link to runTests()" title="Direct link to runTests()">​</a></h3>
<blockquote>
<p><strong>runTests</strong>: () => <code>Promise</code>&lt;<code>object</code>></p>
</blockquote>
<p>Runs project <a href=https://livecodes.io/docs/features/tests target=_blank rel="noopener noreferrer">tests</a> (if present) and gets test results.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-9>Returns<a href=#returns-9 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<code>object</code>></p>
<h5 class="anchor anchorWithStickyNavbar_LWe7" id=results>results<a href=#results class=hash-link aria-label="Direct link to results" title="Direct link to results">​</a></h5>
<blockquote>
<p><strong>results</strong>: <a href=/docs/api/internal/interfaces/TestResult><code>TestResult</code></a>[]</p>
</blockquote>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-6>Example<a href=#example-6 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</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 plain">playground</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"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> results </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 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>runTests</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-8>Defined in<a href=#defined-in-8 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L135 target=_blank rel="noopener noreferrer">models.ts:135</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=setconfig>setConfig()<a href=#setconfig class=hash-link aria-label="Direct link to setConfig()" title="Direct link to setConfig()">​</a></h3>
<blockquote>
<p><strong>setConfig</strong>: (<code>config</code>) => <code>Promise</code>&lt;<a href=/docs/api/interfaces/Config><code>Config</code></a>></p>
</blockquote>
<p>Loads a new project using the passed configuration object.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=parameters-5>Parameters<a href=#parameters-5 class=hash-link aria-label="Direct link to Parameters" title="Direct link to Parameters">​</a></h4>
<p>• <strong>config</strong>: <code>Partial</code>&lt;<a href=/docs/api/interfaces/Config><code>Config</code></a>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-10>Returns<a href=#returns-10 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<a href=/docs/api/interfaces/Config><code>Config</code></a>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-7>Example<a href=#example-7 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</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 plain">playground</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"> 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"> markup</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"> language</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"html"</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"> content</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"Hello World!"</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 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" style=color:#00009f>const</span><span class="token plain"> newConfig </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"> 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 plain">config</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 project loaded</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-9>Defined in<a href=#defined-in-9 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L84 target=_blank rel="noopener noreferrer">models.ts:84</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=show>show()<a href=#show class=hash-link aria-label="Direct link to show()" title="Direct link to show()">​</a></h3>
<blockquote>
<p><strong>show</strong>: (<code>panel</code>, <code>options</code>?) => <code>Promise</code>&lt;<code>void</code>></p>
</blockquote>
<p>Shows the selected panel.</p>
<p>See <a href=https://livecodes.io/docs/sdk/js-ts#show target=_blank rel="noopener noreferrer">docs</a> for details.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=parameters-6>Parameters<a href=#parameters-6 class=hash-link aria-label="Direct link to Parameters" title="Direct link to Parameters">​</a></h4>
<p>• <strong>panel</strong>: <code>"result"</code> | <a href=/docs/api/internal/type-aliases/EditorId><code>EditorId</code></a> | <code>"console"</code> | <code>"compiled"</code> | <code>"tests"</code> | <code>"editor"</code> | <code>"toggle-result"</code></p>
<p>• <strong>options?</strong></p>
<p>• <strong>options.column?</strong>: <code>number</code></p>
<p>• <strong>options.full?</strong>: <code>boolean</code></p>
<p>• <strong>options.line?</strong>: <code>number</code></p>
<p>• <strong>options.zoom?</strong>: <code>1</code> | <code>0.5</code> | <code>0.25</code></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=returns-11>Returns<a href=#returns-11 class=hash-link aria-label="Direct link to Returns" title="Direct link to Returns">​</a></h4>
<p><code>Promise</code>&lt;<code>void</code>></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-8>Example<a href=#example-8 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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>await</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>show</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>"style"</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" 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>show</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>"toggle-result"</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" 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>show</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>"result"</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"> full</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><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 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>show</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>"script"</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" 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>show</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>"result"</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"> zoom</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>0.5</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 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>await</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>show</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 punctuation" style=color:#393A34>{</span><span class="token plain"> full</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-10>Defined in<a href=#defined-in-10 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L119 target=_blank rel="noopener noreferrer">models.ts:119</a></p>
<hr>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=watch>watch<a href=#watch class=hash-link aria-label="Direct link to watch" title="Direct link to watch">​</a></h3>
<blockquote>
<p><strong>watch</strong>: <a href=/docs/api/internal/type-aliases/WatchLoad><code>WatchLoad</code></a> & <a href=/docs/api/internal/type-aliases/WatchReady><code>WatchReady</code></a> & <a href=/docs/api/internal/type-aliases/WatchCode><code>WatchCode</code></a> & <a href=/docs/api/internal/type-aliases/WatchConsole><code>WatchConsole</code></a> & <a href=/docs/api/internal/type-aliases/WatchTests><code>WatchTests</code></a> & <a href=/docs/api/internal/type-aliases/WatchDestroy><code>WatchDestroy</code></a></p>
</blockquote>
<p>Allows to watch for various playground events.
It takes 2 arguments: event name and a callback function that will be called on every event.</p>
<p>event name can be one of: <code>"load" | "ready" | "code" | "console" | "tests" | "destroy"</code></p>
<p>In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results).</p>
<p>The watch method returns an object with a single method (<code>remove</code>), which when called will remove the callback from watching further events.</p>
<p>See <a href=https://livecodes.io/docs/sdk/js-ts#watch target=_blank rel="noopener noreferrer">docs</a> for details.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=example-9>Example<a href=#example-9 class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
<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 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 punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>then</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">playground</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"> codeWatcher </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>watch</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>"code"</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 punctuation" style=color:#393A34>{</span><span class="token plain"> code</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 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 comment" style=color:#999988;font-style:italic>// this will run on every code change</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 string" style=color:#e3116c>"code:"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> code</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 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 string" style=color:#e3116c>"config:"</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 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 keyword" style=color:#00009f>const</span><span class="token plain"> consoleWatcher </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>watch</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 punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> method</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> args </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 comment" style=color:#999988;font-style:italic>// this will run on every console output</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 plain">method</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">args</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 keyword" style=color:#00009f>const</span><span class="token plain"> testsWatcher </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> playground</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>watch</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>"tests"</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 punctuation" style=color:#393A34>{</span><span class="token plain"> results </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 comment" style=color:#999988;font-style:italic>// this will run when tests run</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> results</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>forEach</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">testResult</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 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 string" style=color:#e3116c>"status:"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> testResult</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">status</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 comment" style=color:#999988;font-style:italic>// "pass", "fail" or "skip"</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 plain">testResult</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">errors</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 comment" style=color:#999988;font-style:italic>// array of errors as strings</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 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>// then later</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> codeWatcher</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>remove</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"> consoleWatcher</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>remove</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"> testsWatcher</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>remove</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 comment" style=color:#999988;font-style:italic>// events are no longer watched</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><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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=defined-in-11>Defined in<a href=#defined-in-11 class=hash-link aria-label="Direct link to Defined in" title="Direct link to Defined in">​</a></h4>
<p><a href=https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L187 target=_blank rel="noopener noreferrer">models.ts:187</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/api/internal/interfaces/API.md 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"></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=#extended-by class="table-of-contents__link toc-highlight">Extended by</a><li><a href=#properties class="table-of-contents__link toc-highlight">Properties</a><ul><li><a href=#destroy class="table-of-contents__link toc-highlight">destroy()</a><li><a href=#exec class="table-of-contents__link toc-highlight">exec()</a><li><a href=#format class="table-of-contents__link toc-highlight">format()</a><li><a href=#getcode class="table-of-contents__link toc-highlight">getCode()</a><li><a href=#getconfig class="table-of-contents__link toc-highlight">getConfig()</a><li><a href=#getshareurl class="table-of-contents__link toc-highlight">getShareUrl()</a><li><a href=#onchange class="table-of-contents__link toc-highlight"><del>onChange()</del></a><li><a href=#run class="table-of-contents__link toc-highlight">run()</a><li><a href=#runtests class="table-of-contents__link toc-highlight">runTests()</a><li><a href=#setconfig class="table-of-contents__link toc-highlight">setConfig()</a><li><a href=#show class="table-of-contents__link toc-highlight">show()</a><li><a href=#watch class="table-of-contents__link toc-highlight">watch</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>
Reference in New Issue View Git Blame Copy Permalink