3 lines
50 KiB
HTML
3 lines
50 KiB
HTML
<!doctype html><html lang=en dir=ltr class="plugin-pages plugin-id-default" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>LiveCodes</title><meta data-rh=true property=og:title content=LiveCodes><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/><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docusaurus_tag content=default><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docsearch:docusaurus_tag content=default><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/><link data-rh=true rel=alternate href=https://livecodes.io/docs/ hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/ hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><script data-rh=true>document.addEventListener("DOMContentLoaded",function(){void 0===window.docusaurus&&insertBanner()});function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container",n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/docs/</span> </p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,o="/"===s.substr(-1)?s:s+"/";e.innerHTML=o}</script><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=./img/arrow.svg><link rel=preload as=image href=./img/light-bulb.svg><link rel=preload as=image href=./img/clients.svg><link rel=preload as=image href=./img/integrations.svg><link rel=preload as=image href=./img/feather.svg><link rel=preload as=image href=./img/magic-wand.svg><link rel=preload as=image href=./img/responsive.svg><link rel=preload as=image href=./img/star.svg><link rel=preload as=image href=./img/add-frame.svg><link rel=preload as=image href=./img/code.svg><link rel=preload as=image href=./img/docs.svg><link rel=preload as=image href=./img/data-privacy.svg><link rel=preload as=image href=./img/oss.svg><link rel=preload as=image href=./img/screenshots/responsive.jpg><link rel=preload as=image href=./img/screenshots/languages-3.jpg><link rel=preload as=image href=./img/screenshots/export-1.jpg><link rel=preload as=image href=./img/screenshots/snippets-1.jpg><link rel=preload as=image href=./img/screenshots/templates-1.jpg><link rel=preload as=image href=./img/screenshots/templates-2.jpg><link rel=preload as=image href=./img/screenshots/welcome-1.jpg><link rel=preload as=image href=./img/screenshots/saved-projects-1.jpg><link rel=preload as=image href=./img/screenshots/resources.jpg><link rel=preload as=image href=./img/screenshots/css-processors.jpg><link rel=preload as=image href=./img/screenshots/intellisense-3.jpg><link rel=preload as=image href=./img/screenshots/ai-1.jpg><link rel=preload as=image href=./img/screenshots/console-1.jpg><link rel=preload as=image href=./img/screenshots/compiled-code-1.jpg><link rel=preload as=image href=./img/screenshots/import-2.jpg><link rel=preload as=image href=./img/screenshots/embed-1.jpg><link rel=preload as=image href=./img/screenshots/share-1.jpg><link rel=preload as=image href=./img/screenshots/deploy-1.jpg><link rel=preload as=image href=./img/screenshots/broadcast-1.jpg><link rel=preload as=image href=./img/screenshots/project-info.jpg><link rel=preload as=image href=./img/screenshots/assets-2.jpg><link rel=preload as=image href=./img/screenshots/snippets-list.jpg><link rel=preload as=image href=./img/screenshots/tests.jpg><link rel=preload as=image href=./img/screenshots/sync.jpg><link rel=preload as=image href=./img/screenshots/backup-restore-1.jpg><link rel=preload as=image href=./img/screenshots/editor-settings-1.jpg><link rel=preload as=image href=./img/screenshots/editor-settings-3.jpg><link rel=preload as=image href=./img/screenshots/themes-5.jpg><link rel=preload as=image href=./img/screenshots/i18n-1.jpg><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"><header class="hero heroBanner_qdFl"><div class=container><h1 class=hero__title>LiveCodes</h1><p class=hero__subtitle>A Code Playground That Just Works!<div class=buttons_AeoN><a href=/docs/../ target=_blank rel="noopener noreferrer" class="tryButton_B7Kd button button--secondary button--lg">Start Coding ⚡</a></div><div class=description_meEo>An open-source <strong>client-side</strong> playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and<!-- --> <a href=/docs/languages><strong>90+ languages/frameworks</strong></a>.</div><div class=eaHomepage_CKX0><div class=flat data-ea-publisher=livecodesio data-ea-type=text data-ea-manual=true></div></div></div></header><main><section class=features_xdhU><div class=container><div class=row><div class=sliders_tEds><div class=slider_ZiNZ><div class="">AsciiDoc</div><div class=current_jjur>HTML</div><div class=hidden_OdSS>Eta</div></div><span>+</span><div class=slider_ZiNZ><div class="">Stylus</div><div class=current_jjur>CSS</div><div class=hidden_OdSS>Windi CSS</div></div><span>+</span><div class=slider_ZiNZ><div class="">C++</div><div class=current_jjur>JS</div><div class=hidden_OdSS>Imba</div></div><div class=buttons_NJZT><a class="button button--outline button--primary button--lg">Looks Good 🚀</a><a class="button button--outline button--warning button--lg">Surprise me 🎁</a></div></div></div><div class="row center_LOKI"><div class="container_Egsj undefined" style="height:70vh;width:95%;box-shadow:0 0 20px var(--ifm-color-secondary-darkest)"></div><div class=margin-vert--md><p>Psst. This is an interactive playground!<img src=./img/arrow.svg alt=arrow-up style=height:2em;vertical-align:middle;margin-left:0.5em;margin-bottom:0.7em><br>Try editing the code above and see the changes reflected in the result page.</div></div><div class="row center_LOKI"><p>Want a similar playground for your website?</div><div style=max-width:35em;margin:auto><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><span class="token literal-property property" style=color:#36acaa>template</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"react"</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div class="row center_LOKI buttons_CYIY"><a class=" button button--info button--outline button--lg" href=/docs/getting-started>Get Started ✈️</a><a class="button button--primary button--outline button--lg" href=/docs/overview>Documentations 📖</a></div></div></section><section class="features_xdhU rowDark_XdIb"><div class="container padding-vert--lg"><div class="text--center padding-horiz--md"><h2 class=padding_OUuT>Code Playground That Just Works!</h2><div class="row center_LOKI"><div class="col col--6 left_Y8za"><ul><li>No servers to configure (or pay for!)<li>No databases to maintain (or pay for!)<li>No installs<li>No configuration files<li>No build steps<li>No subscription fees (free and <a href=/docs/license/>open-source</a>)<li>No account required *<li>No limits for usage (unlimited private projects)<li><a href=/docs/languages/>90+ languages/frameworks/processors</a><li>Large set of <a href=/docs/features/>features</a> and integrations<li><a href=/docs/features/import>Import</a> code from a wide variety of sources<li>Use modules from <a href=/docs/features/module-resolution>npm</a>,<!-- --> <a href=/docs/features/module-resolution#deno-modules>deno.land/x</a>,<!-- --> <a href=/docs/features/module-resolution#jsr-modules>jsr</a>,<!-- --> <a href=/docs/features/module-resolution#githubgitlabbitbucket>GitHub</a>, and others<li>Easily <a href=/docs/features/embeds>embed</a> it in your web pages<li>It runs in the browser (client-side)</ul></div><div class="col col--6 left_Y8za"><div><p><strong>Steps:</strong><ol class=steps_x5R3><li>Go to<!-- --> <a href=https://livecodes.io/ target=_blank>livecodes.io</a></ol>... and enjoy all the <a href=/docs/features/>features</a>!</div><hr><div><p>Do you want to <a href=/docs/features/embeds>embed</a> it in a web page?<p>Add this code to your page:<div class=border_yjIZ><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 codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token script language-javascript" style=display:inline-block></span></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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></span><br></span><span class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><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><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><hr><div><p>Ok, do you want to <a href=/docs/features/self-hosting>self-host</a> it?<ol class=steps_x5R3><li>Download a<!-- --> <a href=https://github.com/live-codes/livecodes/releases target=_blank>release</a><li>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></ol>... and it just works!</div></div></div><p class=finePrint_YKYp>* GitHub account is required only for features that use<!-- --> <a href=/docs/features/github-integration>GitHub Integration</a>.</div></div></section><section class="features_xdhU rowLight_gCoF"><div class="container padding-vert--lg"><div class="row center_LOKI"><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt=Feature-Rich src=./img/light-bulb.svg></div><div class="text--center padding-horiz--md"><h3>Feature-Rich</h3><p>Supports<!-- --> <a href=/docs/languages><strong>90+ languages/frameworks</strong></a>. TypeScript Support, npm Modules, Console, Compiled code viewer, Tests, Starter Templates, Save, Import, Export, Share, Deploy, Assets, Snippets, Backup/Restore, Sync, Broadcast and a lot more<!-- --> <a href=/docs/features><strong>features</strong></a>. Features are downloaded only when used.</div></div><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt=Client-Side! src=./img/clients.svg></div><div class="text--center padding-horiz--md"><h3>Client-Side!</h3><p>LiveCodes <strong>runs in the browser</strong>, where all the processing/transpilation occurs, with <strong>no server rounds</strong> required. So, after the initial load, it becomes pretty <strong>fast</strong>. It can be hosted on any<!-- --> <strong>static file server or CDN</strong>. No <code>npm install</code>s. Just the browser!</div></div><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt=Integrations src=./img/integrations.svg></div><div class="text--center padding-horiz--md"><h3>Integrations</h3><p>Rich set of integrations. <a href=/docs/features/import>Import</a> code from<!-- --> <strong>GitHub</strong> files/repos/gists, Gitlab files/repos/snippets, JsBin or web pages.<!-- --> <a href=/docs/features/export>Export</a> to GitHub gists, CodePen or JsFiddle.<!-- --> <a href=/docs/features/deploy>Deploy</a> to GitHub Pages.<!-- --> <a href=/docs/features/sync>Sync</a> to GitHub Repo.</div></div></div></div></section><section class="features_xdhU rowDark_XdIb"><div class="container padding-vert--lg"><div class="row center_LOKI"><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt="Powerful Editor" src=./img/feather.svg></div><div class="text--center padding-horiz--md"><h3>Powerful Editor</h3><p>The code editor offers <strong>auto-complete</strong>, intellisense, code<strong> format</strong>, multi-cursor editing, <strong>Emmet</strong> support,<!-- --> <strong>Vim and Emacs</strong> modes, editor themes, customizable<!-- --> <a href=/docs/features/editor-settings>editor settings</a> and more. The powerful Monaco editor (that powers <strong>VS Code</strong>) is used on desktop, and a touch-friendly editor is used on mobile.</div></div><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt="AI Code Assistant" src=./img/magic-wand.svg></div><div class="text--center padding-horiz--md"><h3>AI Code Assistant</h3><p>Leverage the <a href=/docs/features/ai>power of AI</a> to help you write/learn code, using the <strong>free</strong> Copilot alternative. It understands the context of your code and comments to generate suggestions. It has a wide range of language support, and it works everywhere (in the <a href=/docs/getting-started#standalone-app>standalone app</a>,<!-- --> <a href=/docs/features/embeds>embedded playgrounds</a> and<!-- --> <a href=/docs/features/self-hosting>self-hosted</a> apps).</div></div><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt=Mobile-Friendly src=./img/responsive.svg></div><div class="text--center padding-horiz--md"><h3>Mobile-Friendly</h3><p>LiveCodes offers a great <a href=/docs/features/mobile>mobile</a> experience. The<!-- --> <strong>responsive</strong> layout allows working on devices with different screen sizes. The <strong>touch-friendly</strong> CodeMirror 6 editor is used on mobile. Don't wait to be on your desk. Try your ideas on the go! And then <a href=/docs/features/share>share</a> or<!-- --> <a href=/docs/features/sync>sync</a> your work across devices. You can even share using<!-- --> <strong>QR code</strong>.</div></div></div></div></section><section class="features_xdhU rowLight_gCoF"><div class="container padding-vert--lg"><div class="row center_LOKI"><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt="Standalone App" src=./img/star.svg></div><div class="text--center padding-horiz--md"><h3>Standalone App</h3><p>Use the <a href=/docs/getting-started#standalone-app>standalone app</a> for quick prototyping, testing new ideas or learning a new framework/language. The app remembers your<!-- --> <a href=/docs/features/user-settings>settings</a>. Organize your<!-- --> <a href=/docs/features/projects>projects</a> and<!-- --> <a href=/docs/features/assets>assets</a>. <a href=/docs/features/share>Share</a> code with friends. <a href=/docs/features/deploy>Deploy</a> projects to public URLs.</div></div><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt="Embedded Playgrounds" src=./img/add-frame.svg></div><div class="text--center padding-horiz--md"><h3>Embedded Playgrounds</h3><p>LiveCodes can be <a href=/docs/features/embeds>embedded</a> in your web pages. Code can be easily <a href=/docs/features/code-prefill>prefilled</a>. This is particularly useful for educational websites and for library documentations. It is<!-- --> <a href=/docs/features/security>secure</a> and highly<!-- --> <a href=/docs/configuration>configurable</a>.<!-- --> <a href=/docs/features/intellisense>Intellisense</a> is available even for custom libraries!</div></div><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt=Developer-Friendly src=./img/code.svg></div><div class="text--center padding-horiz--md"><h3>Developer-Friendly</h3><p>It is easy to <a href=/docs/getting-started>get started</a>. LiveCodes is highly<!-- --> <a href=/docs/configuration/configuration-object>configurable</a> (even by URL<!-- --> <a href=/docs/configuration/query-params>query params</a>). The<!-- --> <a href=/docs/sdk/>SDK</a> facilitates <a href=/docs/features/embeds>embedding</a> <!-- -->playgrounds and allows easy <a href=/docs/sdk/js-ts#sdk-methods>communication</a> with them. The SDK is available for <a href=/docs/sdk/js-ts>vanilla JS/TS</a>,<!-- --> <a href=/docs/sdk/react>React</a>, <a href=/docs/sdk/vue>Vue</a> and<!-- --> <a href=/docs/sdk/svelte>Svelte</a>. There is also a<!-- --> <a href=/docs/sdk/headless>headless mode</a> for full control over the UI.</div></div></div></div></section><section class="features_xdhU rowDark_XdIb"><div class="container padding-vert--lg"><div class="row center_LOKI"><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt=Documentations src=./img/docs.svg></div><div class="text--center padding-horiz--md"><h3>Documentations</h3><p>Comprehensive <a href=/docs/overview>documentations</a> for<!-- --> <a href=/docs/features>features</a>, <a href=/docs/configuration>configuration</a> and<!-- --> <a href=/docs/sdk>SDK</a> (including <a href=/docs/api/globals>TypeScript types</a>). Documentations are rich with code samples, live demos and screenshots. A gallery of usage examples is provided as a <a href=/docs/../stories target=_blank rel="noopener noreferrer">storybook</a>.</div></div><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt="Focused on Privacy" src=./img/data-privacy.svg></div><div class="text--center padding-horiz--md"><h3>Focused on Privacy</h3><p>Projects are private by default. The code you write in LiveCodes never leaves your device, unless you choose to share, export or sync it. User data is stored in the browser. User code runs in a sandboxed environment. <a href=/docs/features/security>Security</a> is taken seriously.</div></div><div class="col col--4"><div class=text--center><img class=featureSvg__8YW alt="Free and Open-Source" src=./img/oss.svg></div><div class="text--center padding-horiz--md"><h3>Free and Open-Source</h3><p>LiveCodes is <strong>free</strong>, with <strong>no limits</strong> for use,<!-- --> <strong>no ads</strong> and no account required*.<br>Do you want to <a href=/docs/features/self-hosting>self-host</a> it for commercial use? No problem! It is<!-- --> <span style=white-space:nowrap><a href=/docs/license><strong>MIT-licensed</strong></a> <!-- -->🎉</span><br>Please consider <a href=/docs/sponsor>sponsoring LiveCodes</a> ❤</div></div></div><p class=finePrint_YKYp>The OSI logo trademark is the trademark of Open Source Initiative.<br>* GitHub account is required only for features that use<!-- --> <a href=/docs/features/github-integration>GitHub Integration</a>.</div></section><section><div class="container padding-vert--lg center_LOKI"><div class="row carousel_oYf_ center_LOKI"><h3>Screenshots</h3><div class="carousel-root carousel_dVSv"><div class="carousel carousel-slider" style=width:100%><ul class=control-dots><li class="dot selected" value=0 role=button tabindex=0 aria-label="slide item 1"><li class=dot value=1 role=button tabindex=0 aria-label="slide item 2"><li class=dot value=2 role=button tabindex=0 aria-label="slide item 3"><li class=dot value=3 role=button tabindex=0 aria-label="slide item 4"><li class=dot value=4 role=button tabindex=0 aria-label="slide item 5"><li class=dot value=5 role=button tabindex=0 aria-label="slide item 6"><li class=dot value=6 role=button tabindex=0 aria-label="slide item 7"><li class=dot value=7 role=button tabindex=0 aria-label="slide item 8"><li class=dot value=8 role=button tabindex=0 aria-label="slide item 9"><li class=dot value=9 role=button tabindex=0 aria-label="slide item 10"><li class=dot value=10 role=button tabindex=0 aria-label="slide item 11"><li class=dot value=11 role=button tabindex=0 aria-label="slide item 12"><li class=dot value=12 role=button tabindex=0 aria-label="slide item 13"><li class=dot value=13 role=button tabindex=0 aria-label="slide item 14"><li class=dot value=14 role=button tabindex=0 aria-label="slide item 15"><li class=dot value=15 role=button tabindex=0 aria-label="slide item 16"><li class=dot value=16 role=button tabindex=0 aria-label="slide item 17"><li class=dot value=17 role=button tabindex=0 aria-label="slide item 18"><li class=dot value=18 role=button tabindex=0 aria-label="slide item 19"><li class=dot value=19 role=button tabindex=0 aria-label="slide item 20"><li class=dot value=20 role=button tabindex=0 aria-label="slide item 21"><li class=dot value=21 role=button tabindex=0 aria-label="slide item 22"><li class=dot value=22 role=button tabindex=0 aria-label="slide item 23"><li class=dot value=23 role=button tabindex=0 aria-label="slide item 24"><li class=dot value=24 role=button tabindex=0 aria-label="slide item 25"><li class=dot value=25 role=button tabindex=0 aria-label="slide item 26"><li class=dot value=26 role=button tabindex=0 aria-label="slide item 27"><li class=dot value=27 role=button tabindex=0 aria-label="slide item 28"><li class=dot value=28 role=button tabindex=0 aria-label="slide item 29"></ul><button type=button aria-label="previous slide / item" class="control-arrow control-prev"></button><div class="slider-wrapper axis-horizontal"><ul class="slider animated" style=-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);-o-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition-duration:350ms;-moz-transition-duration:350ms;-o-transition-duration:350ms;transition-duration:350ms;-ms-transition-duration:350ms><li class=slide><div><img src=./img/screenshots/responsive.jpg alt="Responsive layout"><p class=legend>Responsive layout</div><li class="slide selected previous"><div><img src=./img/screenshots/languages-3.jpg alt="A large collection of languages"><p class=legend>A large collection of languages</div><li class=slide><div><img src=./img/screenshots/export-1.jpg alt="Lots of features"><p class=legend>Lots of features</div><li class=slide><div><img src=./img/screenshots/snippets-1.jpg alt="Even more features"><p class=legend>Even more features</div><li class=slide><div><img src=./img/screenshots/templates-1.jpg alt="Starter templates for new projects"><p class=legend>Starter templates for new projects</div><li class=slide><div><img src=./img/screenshots/templates-2.jpg alt="... many starter templates"><p class=legend>... many starter templates</div><li class=slide><div><img src=./img/screenshots/welcome-1.jpg alt="Welcome screen - for a quick start"><p class=legend>Welcome screen - for a quick start</div><li class=slide><div><img src=./img/screenshots/saved-projects-1.jpg alt="Keep your projects organized"><p class=legend>Keep your projects organized</div><li class=slide><div><img src=./img/screenshots/resources.jpg alt="Add external resources"><p class=legend>Add external resources</div><li class=slide><div><img src=./img/screenshots/css-processors.jpg alt="CSS Processors"><p class=legend>CSS Processors</div><li class=slide><div><img src=./img/screenshots/intellisense-3.jpg alt="IntelliSense (autocomplete)"><p class=legend>IntelliSense (autocomplete)</div><li class=slide><div><img src=./img/screenshots/ai-1.jpg alt="AI Code Assistant"><p class=legend>AI Code Assistant</div><li class=slide><div><img src=./img/screenshots/console-1.jpg alt="Console for quick inspection"><p class=legend>Console for quick inspection</div><li class=slide><div><img src=./img/screenshots/compiled-code-1.jpg alt="View compiled code"><p class=legend>View compiled code</div><li class=slide><div><img src=./img/screenshots/import-2.jpg alt="Import code from many sources"><p class=legend>Import code from many sources</div><li class=slide><div><img src=./img/screenshots/embed-1.jpg alt="Embed projects into your web pages"><p class=legend>Embed projects into your web pages</div><li class=slide><div><img src=./img/screenshots/share-1.jpg alt="Share your projects with others"><p class=legend>Share your projects with others</div><li class=slide><div><img src=./img/screenshots/deploy-1.jpg alt="Deploy to GitHub Pages"><p class=legend>Deploy to GitHub Pages</div><li class=slide><div><img src=./img/screenshots/broadcast-1.jpg alt="Broadcast real-time code changes"><p class=legend>Broadcast real-time code changes</div><li class=slide><div><img src=./img/screenshots/project-info.jpg alt="Project info"><p class=legend>Project info</div><li class=slide><div><img src=./img/screenshots/assets-2.jpg alt="Assets manager"><p class=legend>Assets manager</div><li class=slide><div><img src=./img/screenshots/snippets-list.jpg alt="Code snippets"><p class=legend>Code snippets</div><li class=slide><div><img src=./img/screenshots/tests.jpg alt="Run automated tests!"><p class=legend>Run automated tests!</div><li class=slide><div><img src=./img/screenshots/sync.jpg alt="Sync with your other devices"><p class=legend>Sync with your other devices</div><li class=slide><div><img src=./img/screenshots/backup-restore-1.jpg alt="Backup and restore your data"><p class=legend>Backup and restore your data</div><li class=slide><div><img src=./img/screenshots/editor-settings-1.jpg alt="Fine-tune your editor settings"><p class=legend>Fine-tune your editor settings</div><li class=slide><div><img src=./img/screenshots/editor-settings-3.jpg alt="Emmet support and Vim/Emacs modes"><p class=legend>Emmet support and Vim/Emacs modes</div><li class=slide><div><img src=./img/screenshots/themes-5.jpg alt="Select your favorite theme/color"><p class=legend>Select your favorite theme/color</div><li class=slide><div><img src=./img/screenshots/i18n-1.jpg alt="Change UI language to your preferred one"><p class=legend>Change UI language to your preferred one</div><li class=slide><div><img src=./img/screenshots/responsive.jpg alt="Responsive layout"><p class=legend>Responsive layout</div><li class="slide selected previous"><div><img src=./img/screenshots/languages-3.jpg alt="A large collection of languages"><p class=legend>A large collection of languages</div></ul></div><button type=button aria-label="next slide / item" class="control-arrow control-next"></button></div></div></div></div></section><section><div class="container padding-vert--lg center_LOKI"><div class="row carousel_oYf_ center_LOKI"><div class=buttons_CYIY><a class="button button--primary button--outline button--lg" href=/docs/overview>Documentations 📖</a><a href=/docs/../?new target=_blank rel="noopener noreferrer" class=" button button--info button--outline button--lg">New Project ✨</a></div></div></div></section></main></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> |