gitea/livecode-static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
livecode-static/docs/api/index.html
yangxin 583644a855 更改origin打包
2025-06-12 09:37:26 +08:00

167 lines
75 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

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

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

<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/index" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>LiveCodes | LiveCodes</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://livecodes.io/docs/api/><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 | LiveCodes"><meta data-rh=true name=description content="A Code Playground That Just Works!"><meta data-rh=true property=og:description content="A Code Playground That Just Works!"><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/api/><link data-rh=true rel=alternate href=https://livecodes.io/docs/api/ hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/api/ hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.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><link rel=preload as=image href=https://dev.livecodes.io/docs/img/livecodes-logo.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/cloudflare-pages.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/jsdelivr.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/esm.sh.png><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/unpkg.png><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/codeium.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/bundlejs.jpg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/dpaste.png><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/github.png><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/netlify.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/sonarcloud.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/codacy.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/bundlewatch.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/browserstack.svg><link rel=preload as=image href=https://dev.livecodes.io/docs/img/credits/lokalise.png><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a class="navbar__item navbar__link" href=/docs/overview>Docs</a><a class="navbar__item navbar__link" href=/docs/sdk>SDK</a><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=/docs/../stories target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Storybook<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div><div class="navbar__items navbar__items--right"><a href=/docs/../ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">𝕏<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><main class="docMainContainer_TBSr docMainContainerEnhanced_lQrH"><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>LiveCodes</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>A Code Playground That Just Works!</p>
<p align=center><img width=300 src=https://dev.livecodes.io/docs/img/livecodes-logo.svg></p>
<p>A <a href=https://livecodes.io/docs/features/ target=_blank rel="noopener noreferrer">feature-rich</a>, open-source, <strong>client-side</strong> code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and <a href=https://livecodes.io/docs/languages/ target=_blank rel="noopener noreferrer">90+ languages/frameworks</a>.</p>
<p><a href=https://status.livecodes.io target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/upptime/master/api/live-codes/uptime.json" alt="LiveCodes: uptime status" class=img_ev3q></a>
<a href=https://livecodes.io target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/github/v/release/live-codes/livecodes?label=app" alt="LiveCodes: app version" class=img_ev3q></a>
<a href=https://www.npmjs.com/package/livecodes target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src=https://img.shields.io/npm/v/livecodes alt="LiveCodes: npm version" class=img_ev3q></a>
<a href=https://www.npmjs.com/package/livecodes target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src=https://img.shields.io/npm/dm/livecodes alt="LiveCodes: npm downloads" class=img_ev3q></a>
<a href=https://www.jsdelivr.com/package/npm/livecodes target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded" alt="LiveCodes: jsdelivr downloads" class=img_ev3q></a>
<a href=https://livecodes.io/docs/languages/ target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src=https://img.shields.io/badge/languages-96-blue alt="LiveCodes: languages" class=img_ev3q></a>
<a href=https://livecodes.io/docs/ target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white" alt="LiveCodes: docs" class=img_ev3q></a>
<a href=https://livecodes.io/docs/llms.txt target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white" alt="LiveCodes: llms.txt" class=img_ev3q></a>
<a href=https://livecodes.io/docs/llms-full.txt target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white" alt="LiveCodes: llms-full.txt" class=img_ev3q></a>
<a href="https://www.codacy.com/gh/live-codes/livecodes/dashboard?utm_source=github.com&utm_medium=referral&utm_content=live-codes/livecodes&utm_campaign=Badge_Grade" target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src=https://app.codacy.com/project/badge/Grade/3d39f15618e048db9d13c2a0e8002b33 alt="Codacy Badge" class=img_ev3q></a>
<a href=https://app.lokalise.com/public/34958094667a72e9454592.95108106/ target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/translated.json" alt="Lokalise: translated" class=img_ev3q></a>
<a href=https://app.lokalise.com/public/34958094667a72e9454592.95108106/ target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/languages.json" alt="Lokalise: UI languages" class=img_ev3q></a>
<a href=https://github.com/live-codes/livecodes/blob/develop/LICENSE target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src=https://img.shields.io/github/license/live-codes/livecodes alt="license - MIT" class=img_ev3q></a>
<a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/github/stars/live-codes/livecodes?style=flat&logo=github" alt="LiveCodes: GitHub repo" class=img_ev3q></a>
<a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/github/forks/live-codes/livecodes?style=flat&logo=github" alt="LiveCodes: GitHub repo" class=img_ev3q></a>
<a href=https://x.com/livecodes_io target=_blank rel="noopener noreferrer"><img decoding=async loading=lazy src="https://img.shields.io/badge/Follow%20@livecodes__io-575757?logo=x" alt="Follow us on X (formerly Twitter)" class=img_ev3q></a></p>
<p><a href=https://livecodes.io target=_blank rel="noopener noreferrer">Try it now on livecodes.io</a></p>
<p><a href=https://livecodes.io/docs target=_blank rel="noopener noreferrer">Documentations</a></p>
<p><a href=https://livecodes.io/docs/why target=_blank rel="noopener noreferrer">What makes LiveCodes different?</a></p>
<p><img decoding=async loading=lazy src=https://dev.livecodes.io/docs/img/screenshots/livecodes-overview.jpg alt="LiveCodes list of languages screenshot" class=img_ev3q></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=a-code-playground-that-just-works>A Code Playground That Just Works!<a href=#a-code-playground-that-just-works class=hash-link aria-label="Direct link to A Code Playground That Just Works!" title="Direct link to A Code Playground That Just Works!">​</a></h2>
<ul>
<li>No servers to configure (or pay for!)</li>
<li>No databases to maintain (or pay for!)</li>
<li>No installs</li>
<li>No configuration files</li>
<li>No build steps</li>
<li>No subscription fees (free and open-source)</li>
<li>No account required *</li>
<li>No limits for usage (unlimited private projects)</li>
<li>90+ languages/frameworks/processors</li>
<li>Large set of features and integrations</li>
<li>Import code from a wide variety of sources</li>
<li>Use modules from npm, deno.land/x, jsr, GitHub, and others</li>
<li>Easily embed it in your web pages</li>
<li>It runs in the browser (client-side)</li>
</ul>
<sub>* GitHub account is required only for features that use <a href=https://livecodes.io/docs/features/github-integration target=_blank rel=noopener>GitHub Integration</a>.</sub>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=quick-start>Quick Start<a href=#quick-start class=hash-link aria-label="Direct link to Quick Start" title="Direct link to Quick Start">​</a></h3>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=standalone-app>Standalone App<a href=#standalone-app class=hash-link aria-label="Direct link to Standalone App" title="Direct link to Standalone App">​</a></h4>
<ol>
<li>Go to <a href=https://livecodes.io target=_blank rel="noopener noreferrer">livecodes.io</a></li>
</ol>
<p>... and enjoy all the <a href=https://livecodes.io/docs/features/ target=_blank rel="noopener noreferrer">features</a>!</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=embedded-playground>Embedded Playground<a href=#embedded-playground class=hash-link aria-label="Direct link to Embedded Playground" title="Direct link to Embedded Playground">​</a></h4>
<p>Add this code to your page:</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</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>&lt;/</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>&lt;</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'</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 literal-property property" style=color:#36acaa>params</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 literal-property property" style=color:#36acaa>markdown</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 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"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>css</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>'h1 {color: dodgerblue;}'</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 literal-property property" style=color:#36acaa>js</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 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 literal-property property" style=color:#36acaa>console</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 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 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>&lt;/</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>
<sup>Check documentations for <a href=https://livecodes.io/docs/features/embeds target=_blank rel=noopener>Embedded Playgrounds</a>.</sup>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=self-hosted>Self-hosted<a href=#self-hosted class=hash-link aria-label="Direct link to Self-hosted" title="Direct link to Self-hosted">​</a></h4>
<ol>
<li>
<p>Download a <a href=https://github.com/live-codes/livecodes/releases target=_blank rel="noopener noreferrer">release</a></p>
</li>
<li>
<p>Put it on a static file server (for free!) <sup><a href=https://pages.cloudflare.com/ target=_blank rel=noopener>1</a>, <a href=https://vercel.com/ target=_blank rel=noopener>2</a>, <a href=https://www.netlify.com/ target=_blank rel=noopener>3</a>, <a href=https://firebase.google.com/ target=_blank rel=noopener>4</a>, <a href=https://pages.github.com/ target=_blank rel=noopener>5</a></sup></p>
<sup>Check the guide for <a href=https://livecodes.io/docs/features/self-hosting target=_blank rel=noopener>self-hosting</a> (including the built-in setup to deploy to GitHub Pages).</sup>
</li>
</ol>
<p>... and it just works!</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=feature-summary>Feature Summary<a href=#feature-summary class=hash-link aria-label="Direct link to Feature Summary" title="Direct link to Feature Summary">​</a></h2>
<ul>
<li>A wide range of <a href=https://livecodes.io/docs/languages/ target=_blank rel="noopener noreferrer">language support</a> (90+ languages/frameworks/processors)</li>
<li><a href=https://livecodes.io/docs/features/editor-settings target=_blank rel="noopener noreferrer">Powerful Editor</a></li>
<li>Mobile-friendly</li>
<li><a href=https://livecodes.io/docs/features/external-resources target=_blank rel="noopener noreferrer">External resources/libraries</a></li>
<li><a href=https://livecodes.io/docs/features/module-resolution target=_blank rel="noopener noreferrer">Import modules</a> from npm, deno.land/x, jsr, GitHub and others</li>
<li><a href=https://livecodes.io/docs/features/code-prefill target=_blank rel="noopener noreferrer">Code Pre-fill</a></li>
<li><a href=https://livecodes.io/docs/features/import target=_blank rel="noopener noreferrer">Import</a>/<a href=https://livecodes.io/docs/features/export target=_blank rel="noopener noreferrer">Export</a> <a href=https://livecodes.io/docs/features/projects target=_blank rel="noopener noreferrer">projects</a></li>
<li><a href=https://livecodes.io/docs/features/share target=_blank rel="noopener noreferrer">Share</a></li>
<li><a href=https://livecodes.io/docs/features/embeds target=_blank rel="noopener noreferrer">Embed the playground</a> in any web page</li>
<li><a href=https://livecodes.io/docs/features/display-modes target=_blank rel="noopener noreferrer">Display modes</a></li>
<li><a href=https://livecodes.io/docs/features/deploy target=_blank rel="noopener noreferrer">Deploy</a></li>
<li><a href=https://livecodes.io/docs/features/templates target=_blank rel="noopener noreferrer">Starter Templates</a></li>
<li><a href=https://livecodes.io/docs/features/assets target=_blank rel="noopener noreferrer">Assets</a></li>
<li><a href=https://livecodes.io/docs/features/themes target=_blank rel="noopener noreferrer">Themes</a></li>
<li><a href=https://livecodes.io/docs/features/tools-pane target=_blank rel="noopener noreferrer">Dev Tools</a> (<a href=https://livecodes.io/docs/features/console target=_blank rel="noopener noreferrer">console</a>, <a href=https://livecodes.io/docs/features/compiled-code target=_blank rel="noopener noreferrer">compiled code viewer</a>, <a href=https://livecodes.io/docs/features/tests target=_blank rel="noopener noreferrer">test runner</a>)</li>
<li><a href=https://livecodes.io/docs/features/code-format target=_blank rel="noopener noreferrer">Code formatting</a></li>
<li><a href=https://livecodes.io/docs/features/intellisense target=_blank rel="noopener noreferrer">Intellisense</a></li>
<li><a href=https://livecodes.io/docs/features/ai target=_blank rel="noopener noreferrer">AI Code Assistant 🪄</a></li>
<li><a href=https://livecodes.io/docs/features/lite target=_blank rel="noopener noreferrer">Lite mode</a></li>
<li><a href=https://livecodes.io/docs/features/read-only target=_blank rel="noopener noreferrer">Read-only mode</a></li>
<li><a href=https://livecodes.io/docs/features/broadcast target=_blank rel="noopener noreferrer">Broadcast</a></li>
<li><a href=https://livecodes.io/docs/features/sync target=_blank rel="noopener noreferrer">Sync</a></li>
<li><a href=https://livecodes.io/docs/features/backup-restore target=_blank rel="noopener noreferrer">Backup/Restore</a></li>
<li><a href=https://livecodes.io/docs/why#client-side target=_blank rel="noopener noreferrer">Client-side!</a></li>
<li>Very <a href=https://livecodes.io/docs/configuration/ target=_blank rel="noopener noreferrer">configurable</a></li>
<li>Developer-friendly build-free environment</li>
<li>Powerful <a href=https://livecodes.io/docs/sdk/ target=_blank rel="noopener noreferrer">SDK</a> (available for <a href=https://livecodes.io/docs/sdk/js-ts target=_blank rel="noopener noreferrer">vanilla JavaScript, TypeScript</a>, <a href=https://livecodes.io/docs/sdk/react target=_blank rel="noopener noreferrer">React</a>, <a href=https://livecodes.io/docs/sdk/vue target=_blank rel="noopener noreferrer">Vue</a> and <a href=https://livecodes.io/docs/sdk/svelte target=_blank rel="noopener noreferrer">Svelte</a>)</li>
<li>Comprehensive <a href=https://livecodes.io/docs/ target=_blank rel="noopener noreferrer">Documentations</a></li>
<li>Focused on <a href=https://livecodes.io/docs/features/security target=_blank rel="noopener noreferrer">privacy and security</a></li>
<li>Free and <a href=https://livecodes.io/docs/license target=_blank rel="noopener noreferrer">Open-Source</a></li>
</ul>
<p>For details check the <a href=https://livecodes.io/docs/features/ target=_blank rel="noopener noreferrer">full list of features</a>.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=livecodes-sdk>LiveCodes SDK<a href=#livecodes-sdk class=hash-link aria-label="Direct link to LiveCodes SDK" title="Direct link to LiveCodes SDK">​</a></h2>
<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=https://livecodes.io/docs/sdk/#npm-package target=_blank rel="noopener noreferrer">npm package</a>, that is also available from <a href=https://livecodes.io/docs/sdk/#cdn target=_blank rel="noopener noreferrer">CDNs</a>. It can be used to create playgrounds with a wide variety of <a href=https://livecodes.io/docs/configuration/configuration-object.md target=_blank rel="noopener noreferrer">configurations</a> and <a href=https://livecodes.io/docs/sdk/js-ts.md#embed-options target=_blank rel="noopener noreferrer">embed options</a>. In addition, <a href=https://livecodes.io/docs/sdk/js-ts.md#sdk-methods target=_blank rel="noopener noreferrer">SDK methods</a> allow programmatic communication and control of the playgrounds during runtime.</p>
<h3 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></h3>
<div class="codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-text codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain">npm i 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>
<h3 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></h3>
<p>Example: (<a href="https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQDKAIgNJH4C22IANCPgQMYBOEADpNgHaIQjEAAtYAQ1yCAPDVhhxRViPHsC8gLwAdEAFUAKgDEAtAA4dRAPQA+LX1nzFfcXO0g0EWAHcu2dmAtWfjBYPjA3LwhcMBENfA9WWGNI6JEGIgg+KAhxaGM2XNgNAEYAOgAGCxthETAaaABBMDA1QWhxPgBzN1DA9oICNx1hBU6CRABtAF0mcVZIDABRXCg-QTZOHmEaVQBrAFcuRFB2rv3xTvgkWvrhILDQsBkVtAzcN3uFTNh2HWtpSwvawgAC+TAIYAAnnBjiBTp1zpdBKwBndgo9BKDwRxuE8ECcOgiLlcQAArcRocQbXFoh5hQQQGi+fxEYBKdgSEIABXakM67Gw+z4uCIIKIADMBTQiAByaDoWBBFgygDcWl+fHVdg4nNgPPEfIFQtwAAoZQBiT7ib7sGXpYBavhEJT8cUQToIVmO53OnbsA5cT0OjU+n3wxGwT0yv27XDYLx8O3e0MuulgKPmogACVg0Gg2CIAHU-NBcABCJMhn1g5M1qsebxRjkEfbQMCVuwggCUao1WJAEOhhDE8nGCGm2M2YDHE5AKIIXOb8kxTC4AsSAz8M5mc-2EOwNBI8kgXTHwDBIEZzOnxwvUK4hFvTBCELPcMJEcE98IOK2TE+GJIP2GBqBA-CCAAzBBIzYNg0BvqE4gAEZwFISC5NAwhzAsJL3AQcHwOCChgHuyL5uoUggiCQA" target=_blank rel="noopener noreferrer">open in LiveCodes</a>)</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports 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 literal-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 literal-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 literal-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 literal-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 punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>view</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'result'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>The <a href=https://livecodes.io/docs/sdk/js-ts.md target=_blank rel="noopener noreferrer">JavaScript SDK</a> is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently <a href=https://livecodes.io/docs/sdk/react.md target=_blank rel="noopener noreferrer">React</a> and <a href=https://livecodes.io/docs/sdk/vue.md target=_blank rel="noopener noreferrer">Vue</a>). The SDK can be used in <a href=https://livecodes.io/docs/sdk/svelte.md target=_blank rel="noopener noreferrer">Svelte</a> directly without wrappers. <a href=https://livecodes.io/docs/sdk/js-ts.md#typescript-types target=_blank rel="noopener noreferrer">TypeScript support</a> provides type-safety and a great developer experience.</p>
<p>React SDK example: (<a href="https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBKsAhgMZhEDKAIgNJH4C22IANCPgZQE4QADpGwA7RCC4gAFhVySAPK1hhyRSjPL8CqgLwAdEAFUAKgDEAtAA4jRAPQA+A2OWr1Y8isMg0EWADuQtj8YHaU4mCwYmA+ARC4YDJ6+H6UsJbxiTKcRBBiUBDk0JZ8xbB6AIwAdAAMdk7SMmCs0ACCYGA6ktDkYgDmPtHhvQQEPkbSav0EiADaALrcVJAYAKK4UCGSfIIi0qzaANYArkKIoL0DJ+T98EjNrdIRMdFgkiAAvtwEYACecAuICu-Rud0klDGz0ibw+3xAu2E7wQlz6oNu9xAACsCAAPaGvGKSCCsYKhIioDA4XhEABm-GwrCIAHJoOhYBFePZ+BRqMyANwGfguIUuF6-DTiWkQfpEPREYCisREIiHfinIQIBVKlUqkFg2Ba5lqo64bABMTMzg63UvKIxI0AYiIAAlYNBoNgiAB1ELQXAAQitNu+Ss+guFYnFNAACr0-v0GScxLg5UQABQASjljiIikpWDwhElYmlg2ALzLnyIfkCPh5BBO0DCIAcjgjLlguLJNHwtPITdj8cT2GTuA7EnhvwBhDkqlmCEWPwESIXS5AkIIMYbqg+3CEDPSYxCa6WG5Ov0ZtFUkAGC+A8JJPfv8P+QkIF1fhDA9+BaINkhvoQK77NwdqwkgXzcBgOgQOIkgAMwIVM2DYNAv7ROQABGcAKEgxTQNIKzshC4gEGh8A-GoYAXhCnq6AonyfEAA" target=_blank rel="noopener noreferrer">open in LiveCodes</a>)</p>
<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" style=color:#00009f>const</span><span class="token plain"> config </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token literal-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 literal-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 literal-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 punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> </span><span class="token function-variable function maybe-class-name" style=color:#d73a49>Playground</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>config</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#393A34>=</span><span class="token tag script language-javascript punctuation" style=color:#393A34>{</span><span class="token tag script language-javascript" style=color:#00009f>config</span><span class="token tag script language-javascript punctuation" style=color:#393A34>}</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>view</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>result</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 punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>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 maybe-class-name">Playground</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>Vue SDK example: (<a href="https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBqArrEQMoAiA0kfgLbYgA0I+BAxgE4QAHSNgB2iEOxAALWAENc4gDxNYYWUW5TZvAqoC8AHRABVACoAxALQAOI0QD0APgMjlq9SNkrDINBFgA7gLYvGB23KJgsCJgPgEQuGBSevh+3LCW8YlSbEQQIlAQstCWPMWwegCMAHQADHZOklJgTNAAgmBgOuLQsiIA5j7R4b0EBD5Gkmr9BIgA2gC6HLLckBgAorhQIeI8-EKSTNoA1mQCiKC9A2Sy-fBIza2SETHRYOIgAL4cBGAAnnALiArv0bndxNwxs9Im8Pt8QHtBO8EJc+qDbvdfBRoa8YkpEUIiLowGdnLwXEQ8kxgqEiKgMDguEQAGa8bBMIgAcmg6FgES49jQFE5AG4DOSROKKRpRL8ZSJmRB+kQ9ERgFKRJTKUdeKcBAg1RqtVqQWDYAbOTrjrhsAERJy2EbjfKojELQBiIgACVg0Gg2CIAHUQtBcABCB1OynfJ2fMUSxT2AlgMkuDWKKLU3pRVOaoiKelYPCEIgIF6KwZGctKux+QI+XiEMjQMIgBy5xOZgTZ2C5r4-f5wAgyVSzBCLH58JFjicgSEEAAKjeJHw4AjZ6TGIRnSznZF+7KoqkgAzHwHhEGpITAZ-h-wEhAud8IN6Bpox4nvhCnBw4L1dyISPCGA6BAojiAAzBBUzYNg0BniA0SyAARnAChIMU0CSCsayYi8BBwfAA6yCSY5zv6ugKJ8nxAA" target=_blank rel="noopener noreferrer">open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</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"> 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 literal-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 literal-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 literal-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 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 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>&lt;/</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>&lt;</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>&lt;</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>:config</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>config</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>view</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>result</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>&lt;/</span><span class="token tag" style=color:#00009f>template</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>In addition, the SDK allows creating links to playgrounds:</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> getPlaygroundUrl </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"> url </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>getPlaygroundUrl</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 literal-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 literal-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 literal-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 literal-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 punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token console class-name">console</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>log</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">url</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>See <a href=https://livecodes.io/docs/sdk/ target=_blank rel="noopener noreferrer">SDK docs</a> for more details.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=documentations>Documentations<a href=#documentations class=hash-link aria-label="Direct link to Documentations" title="Direct link to Documentations">​</a></h2>
<p>Comprehensive documentations for <a href=https://livecodes.io/docs/features/ target=_blank rel="noopener noreferrer">features</a>, <a href=https://livecodes.io/docs/getting-started target=_blank rel="noopener noreferrer">getting started</a>, <a href=https://livecodes.io/docs/configuration/ target=_blank rel="noopener noreferrer">configuration</a> and <a href=https://livecodes.io/docs/sdk/ target=_blank rel="noopener noreferrer">SDK</a> are available on:</p>
<p><a href=https://livecodes.io/docs/ target=_blank rel="noopener noreferrer">https://livecodes.io/docs/</a></p>
<p>The documentations include demos, code samples, screenshots, <a href=https://livecodes.io/stories target=_blank rel="noopener noreferrer">Storybook</a> and <a href=https://livecodes.io/docs/sdk/js-ts#typescript-types target=_blank rel="noopener noreferrer">TypeScript types</a>.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=updates>Updates<a href=#updates class=hash-link aria-label="Direct link to Updates" title="Direct link to Updates">​</a></h2>
<p>Keep up with the latest changes:</p>
<ul>
<li>Twitter/X: <a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer">@livecodes_io</a></li>
<li>Blog: <a href=https://blog.livecodes.io/ target=_blank rel="noopener noreferrer">blog.livecodes.io</a></li>
<li>Development build: <a href=https://dev.livecodes.io/ target=_blank rel="noopener noreferrer">dev.livecodes.io</a></li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=feedback>Feedback<a href=#feedback class=hash-link aria-label="Direct link to Feedback" title="Direct link to Feedback">​</a></h2>
<p>We welcome feedback!</p>
<p>Please start a new <a href=https://github.com/live-codes/livecodes/issues/new/choose target=_blank rel="noopener noreferrer">issue</a> or <a href=https://github.com/live-codes/livecodes/discussions/new target=_blank rel="noopener noreferrer">discussion</a>.</p>
<p>For security reports please refer to <a href=https://github.com/live-codes/livecodes/blob/develop/SECURITY.md target=_blank rel="noopener noreferrer">SECURITY.md</a>.</p>
<p>You may also reach out to us using the <a href=https://livecodes.io/docs/contact target=_blank rel="noopener noreferrer">contact form</a>.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=contribution>Contribution<a href=#contribution class=hash-link aria-label="Direct link to Contribution" title="Direct link to Contribution">​</a></h2>
<p>Contributions are welcome and highly appreciated.</p>
<p>A huge shout-out to our wonderful <a href=https://github.com/live-codes/livecodes/graphs/contributors target=_blank rel="noopener noreferrer">contributors</a>! Your hard work makes all the difference!</p>
<p>Please refer to the <a href=https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.md target=_blank rel="noopener noreferrer">contribution guide</a>.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=credits>Credits<a href=#credits class=hash-link aria-label="Direct link to Credits" title="Direct link to Credits">​</a></h2>
<p>LiveCodes uses services that are generously provided by:</p>
<p><a href=https://pages.cloudflare.com/ target=_blank title="Cloudflare Pages"><img alt="Cloudflare Pages" width=200 src=https://dev.livecodes.io/docs/img/credits/cloudflare-pages.svg></a><br><br></p>
<p><a href=https://www.jsdelivr.com/ target=_blank title=jsDelivr><img alt=jsDelivr width=200 src=https://dev.livecodes.io/docs/img/credits/jsdelivr.svg></a><br><br></p>
<p><a href=https://esm.sh/ target=_blank title=esm.sh><img alt=esm.sh width=200 src=https://dev.livecodes.io/docs/img/credits/esm.sh.png></a><br><br></p>
<p><a href=https://unpkg.com/ target=_blank title=unpkg><img alt=unpkg width=200 src=https://dev.livecodes.io/docs/img/credits/unpkg.png></a><br><br></p>
<p><a href=https://codeium.com/ target=_blank title=Codeium><img alt=Codeium width=200 src=https://dev.livecodes.io/docs/img/credits/codeium.svg></a><br><br></p>
<p><a href=https://bundlejs.com/ target=_blank title=bundlejs><img alt=bundlejs width=200 src=https://dev.livecodes.io/docs/img/credits/bundlejs.jpg></a><br><br></p>
<p><a href=https://dpaste.com/ target=_blank title=dpaste><img alt=dpaste width=200 src=https://dev.livecodes.io/docs/img/credits/dpaste.png></a><br><br></p>
<p><a href=https://github.com/ target=_blank title=GitHub><img alt=GitHub width=200 src=https://dev.livecodes.io/docs/img/credits/github.png></a><br><br></p>
<p><a href=https://netlify.com/ target=_blank title=Netlify><img alt=Netlify width=200 src=https://dev.livecodes.io/docs/img/credits/netlify.svg></a><br><br></p>
<p><a href=https://www.sonarsource.com/products/sonarcloud/ target=_blank title=SonarCloud><img alt=SonarCloud width=200 src=https://dev.livecodes.io/docs/img/credits/sonarcloud.svg></a><br><br></p>
<p><a href=https://www.codacy.com/ target=_blank title=Codacy><img alt=Codacy width=200 src=https://dev.livecodes.io/docs/img/credits/codacy.svg></a><br><br></p>
<p><a href=https://bundlewatch.io/ target=_blank title=BundleWatch><img alt=BundleWatch width=200 src=https://dev.livecodes.io/docs/img/credits/bundlewatch.svg></a><br><br></p>
<p><a href=https://www.browserstack.com/ target=_blank title=BrowserStack><img alt=BrowserStack width=200 src=https://dev.livecodes.io/docs/img/credits/browserstack.svg></a><br><br></p>
<p><a href=https://lokalise.com/ target=_blank title=Lokalise><img alt=Lokalise width=200 src=https://dev.livecodes.io/docs/img/credits/lokalise.png></a><br><br></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=third-party-packages>Third Party Packages<a href=#third-party-packages class=hash-link aria-label="Direct link to Third Party Packages" title="Direct link to Third Party Packages">​</a></h2>
<p>Packages used by LiveCodes and their licenses are <a href=https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.md target=_blank rel="noopener noreferrer">listed here</a>.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=license>License<a href=#license class=hash-link aria-label="Direct link to License" title="Direct link to License">​</a></h2>
<p><a href=https://github.com/live-codes/livecodes/blob/HEAD/LICENSE target=_blank rel="noopener noreferrer">MIT</a> License © <a href=https://github.com/hatemhosny target=_blank rel="noopener noreferrer">Hatem Hosny</a></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=sponsor>Sponsor<a href=#sponsor class=hash-link aria-label="Direct link to Sponsor" title="Direct link to Sponsor">​</a></h2>
<p>LiveCodes is free and open-source. The app does not contain ads or require subscription. It allows unlimited usage without any restrictions.</p>
<p>By sponsoring LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community.</p>
<p>Please consider <a href=https://livecodes.io/docs/sponsor target=_blank rel="noopener noreferrer">becoming a sponsor</a>.</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/index.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#a-code-playground-that-just-works class="table-of-contents__link toc-highlight">A Code Playground That Just Works!</a><ul><li><a href=#quick-start class="table-of-contents__link toc-highlight">Quick Start</a></ul><li><a href=#feature-summary class="table-of-contents__link toc-highlight">Feature Summary</a><li><a href=#livecodes-sdk class="table-of-contents__link toc-highlight">LiveCodes SDK</a><ul><li><a href=#installation class="table-of-contents__link toc-highlight">Installation</a><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a></ul><li><a href=#documentations class="table-of-contents__link toc-highlight">Documentations</a><li><a href=#updates class="table-of-contents__link toc-highlight">Updates</a><li><a href=#feedback class="table-of-contents__link toc-highlight">Feedback</a><li><a href=#contribution class="table-of-contents__link toc-highlight">Contribution</a><li><a href=#credits class="table-of-contents__link toc-highlight">Credits</a><li><a href=#third-party-packages class="table-of-contents__link toc-highlight">Third Party Packages</a><li><a href=#license class="table-of-contents__link toc-highlight">License</a><li><a href=#sponsor class="table-of-contents__link toc-highlight">Sponsor</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>
Reference in New Issue View Git Blame Copy Permalink