58 lines
97 KiB
HTML
58 lines
97 KiB
HTML
<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-sdk/index" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>LiveCodes SDK | 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/sdk/><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="LiveCodes SDK | LiveCodes"><meta data-rh=true name=description content="The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds."><meta data-rh=true property=og:description content="The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds."><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/sdk/><link data-rh=true rel=alternate href=https://livecodes.io/docs/sdk/ hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/sdk/ hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.a40c3f9c.js defer></script><script src=/docs/assets/js/main.af5c4c8b.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"light",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/docs/img/livecodes-logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/overview>Docs</a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/sdk>SDK</a><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=/docs/../stories target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Storybook<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div><div class="navbar__items navbar__items--right"><a href=/docs/../ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">𝕏<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" href=/docs/overview>Docs</a></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/why>Why Another Playground?</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/getting-started>Getting Started</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/features/>Features</a><button aria-label="Expand sidebar category 'Features'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/configuration/>Configuration</a><button aria-label="Expand sidebar category 'Configuration'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current=page tabindex=0 href=/docs/sdk/>SDK</a><button aria-label="Collapse sidebar category 'SDK'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/js-ts>JS/TS SDK</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/react>React SDK</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/vue>Vue SDK</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/svelte>Svelte</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sdk/headless>Headless Mode</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/advanced/>Advanced</a><button aria-label="Expand sidebar category 'Advanced'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/languages/>Languages</a><button aria-label="Expand sidebar category 'Languages'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/bookmarklet>Bookmarklet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gh-action>GitHub Action ⚡</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/markdown-to-livecodes>Markdown to LiveCodes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contribution>Contribution</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/credits>Credits</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/license>License</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sponsor>Sponsor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contact>Contact</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/about>About us</a></ul></ul></nav><button type=button title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width=20 height=20 aria-hidden=true class=collapseSidebarButtonIcon_kv0_><g fill=#7a7a7a><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"/><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"/></g></svg></button></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/docs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/overview><span itemprop=name>Docs</span></a><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>SDK</span><meta itemprop=position content=2></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>LiveCodes SDK</h1><div class="custom-content custom-content-header content_lMOZ undefined"><div data-ea-publisher=livecodesio data-ea-type=image class=horizontal data-ea-manual=true></div></div></header>
|
||
<!-- -->
|
||
<p>The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.</p>
|
||
<p>The SDK is provided as a light-weight (<a href=https://bundlephobia.com/package/livecodes target=_blank rel="noopener noreferrer">less than 5kb gzipped</a>), zero-dependencies <a href=#npm-package>npm package</a>, that is also available from <a href=#cdn>CDNs</a>. It can be used to create playgrounds with a wide variety of <a href=/docs/configuration/configuration-object>configurations</a> and <a href=/docs/sdk/js-ts#embed-options>embed options</a>. In addition, <a href=/docs/sdk/js-ts#sdk-methods>SDK methods</a> allow programmatic communication and control of the playgrounds during runtime.</p>
|
||
<p>The <a href=/docs/sdk/js-ts>JavaScript SDK</a> is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently <a href=/docs/sdk/react>React</a> and <a href=/docs/sdk/vue>Vue</a>). The SDK can be used in <a href=/docs/sdk/svelte>Svelte</a> directly without wrappers. <a href=/docs/sdk/js-ts#typescript-types>TypeScript support</a> provides type-safety and a great developer experience.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=sdk-demo>SDK Demo<a href=#sdk-demo class=hash-link aria-label="Direct link to SDK Demo" title="Direct link to SDK Demo"></a></h2>
|
||
<p>This is an example of an editable embedded playground using the SDK.</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"markdown"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"# Hello World!"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"javascript"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"Hello, from JS!\");"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"active"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"open"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"markdown"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"# Hello World!"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"javascript"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"Hello, from JS!\");"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"active"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"open"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"markdown"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"# Hello World!"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"javascript"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"Hello, from JS!\");"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"active"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"open"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"markup"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"markdown"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"# Hello World!"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"script"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"javascript"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console.log(\"Hello, from JS!\");"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"tools"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"active"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"status"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"open"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"markup"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"markdown"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"# Hello World!"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"script"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"javascript"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console.log(\"Hello, from JS!\");"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"tools"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"active"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"status"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"open"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=installation>Installation<a href=#installation class=hash-link aria-label="Direct link to Installation" title="Direct link to Installation"></a></h2>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=npm-package>NPM Package<a href=#npm-package class=hash-link aria-label="Direct link to NPM Package" title="Direct link to NPM Package"></a></h3>
|
||
<p>This is a single npm package for the SDK which supports JavaScript/TypeScript, React, Vue and Svelte.
|
||
Install the library from npm:</p>
|
||
<div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Yarn<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">pnpm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Bun</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token function" style=color:#d73a49>npm</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>install</span><span class="token plain"> livecodes</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token function" style=color:#d73a49>yarn</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>add</span><span class="token plain"> livecodes</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token function" style=color:#d73a49>pnpm</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>add</span><span class="token plain"> livecodes</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain">bun </span><span class="token function" style=color:#d73a49>add</span><span class="token plain"> livecodes</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div>
|
||
<p>then it can be used like that:</p>
|
||
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockTitle_Ktv7>index.js</div><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token comment" style=color:#999988;font-style:italic>// embed options</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=cdn>CDN<a href=#cdn class=hash-link aria-label="Direct link to CDN" title="Direct link to CDN"></a></h3>
|
||
<p>Alternatively, it can just be loaded from a CDN.</p>
|
||
<p>ESM:</p>
|
||
<!-- -->
|
||
<!-- -->
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockTitle_Ktv7>index.html</div><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>container</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>module</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'https://cdn.jsdelivr.net/npm/livecodes@0.11.1'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#container'</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// embed options</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<p>UMD:</p>
|
||
<!-- -->
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockTitle_Ktv7>index.html</div><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>id</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>container</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>https://cdn.jsdelivr.net/npm/livecodes@0.11.1/livecodes.umd.js</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// the UMD version provides the global object `livecodes`</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> livecodes</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript method function property-access" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript string" style=color:#e3116c>'#container'</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style=color:#999988;font-style:italic>// embed options</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
|
||
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_BuS1><p>In the full <a href=/docs/getting-started#standalone-app>standalone app</a>, the JavaScript SDK is accessible via the global variable <code>livecodes</code>, which can be interacted with in the browser console.</div></div>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=usage>Usage<a href=#usage class=hash-link aria-label="Direct link to Usage" title="Direct link to Usage"></a></h2>
|
||
<p>The SDK is currently provided in the following variations:</p>
|
||
<ul>
|
||
<li>
|
||
<p><a href=/docs/sdk/js-ts>JavaScript/TypeScript</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href=/docs/sdk/react>React</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href=/docs/sdk/vue>Vue</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href=/docs/sdk/svelte>Svelte</a></p>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=headless-mode>Headless Mode<a href=#headless-mode class=hash-link aria-label="Direct link to Headless Mode" title="Direct link to Headless Mode"></a></h2>
|
||
<p>The SDK also has a <a href=/docs/sdk/headless>headless mode</a>. In this mode, no visible output is displayed in the embedding web page. However, all <a href=/docs/sdk/js-ts#sdk-methods>SDK methods</a> are accessible. This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=sdk-playground>SDK Playground!<a href=#sdk-playground class=hash-link aria-label="Direct link to SDK Playground!" title="Direct link to SDK Playground!"></a></h2>
|
||
<p>A demo page that shows the usage of the SDK can be <a href=https://live-codes.github.io/livecodes-examples/sdk-demo.html target=_blank rel="noopener noreferrer">found here</a> (<a href=https://github.com/live-codes/livecodes-examples/blob/gh-pages/sdk-demo.html target=_blank rel="noopener noreferrer">source</a>).</p>
|
||
<p>Or edit the SDK playground in LiveCodes. How meta! :)</p>
|
||
<div class="container_Egsj undefined" style=height:80vh data-height=80vh></div>
|
||
<p>P.S. You may want to use the "Full Screen" button!</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/sdk/index.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/configuration/query-params><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Query Parameters</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/sdk/js-ts><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>JS/TS SDK</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#sdk-demo class="table-of-contents__link toc-highlight">SDK Demo</a><li><a href=#installation class="table-of-contents__link toc-highlight">Installation</a><ul><li><a href=#npm-package class="table-of-contents__link toc-highlight">NPM Package</a><li><a href=#cdn class="table-of-contents__link toc-highlight">CDN</a></ul><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a><li><a href=#headless-mode class="table-of-contents__link toc-highlight">Headless Mode</a><li><a href=#sdk-playground class="table-of-contents__link toc-highlight">SDK Playground!</a></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> |