67 lines
361 KiB
HTML
67 lines
361 KiB
HTML
<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-features/display-modes" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Display Modes | 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/features/display-modes><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="Display Modes | LiveCodes"><meta data-rh=true name=description content="The configuration option mode, also available as query param, can be used to select different display modes."><meta data-rh=true property=og:description content="The configuration option mode, also available as query param, can be used to select different display modes."><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/features/display-modes><link data-rh=true rel=alternate href=https://livecodes.io/docs/features/display-modes hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/features/display-modes hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.e1bd469b.js defer></script><script src=/docs/assets/js/main.72616d8f.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"light",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/docs/img/livecodes-logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/overview>Docs</a><a class="navbar__item navbar__link" href=/docs/sdk>SDK</a><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=/docs/../stories target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Storybook<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div><div class="navbar__items navbar__items--right"><a href=/docs/../ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">𝕏<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" href=/docs/overview>Docs</a></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/why>Why Another Playground?</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/getting-started>Getting Started</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--active" tabindex=0 href=/docs/features/>Features</a><button aria-label="Collapse sidebar category 'Features'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/projects>Projects</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/templates>Templates</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/css>CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/result>Result Page</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/external-resources>External Resources</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/tools-pane>Tools Pane</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/console>Console</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/compiled-code>Compiled Code</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/tests>Tests</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/module-resolution>Module Resolution</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/intellisense>IntelliSense</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/ai>AI Code Assistant 🪄</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/code-format>Code Format</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/command-menu>Command Menu</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/keyboard-shortcuts>Keyboard Shortcuts</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/user-settings>User Settings</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/editor-settings>Editor Settings</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/i18n>Internationalization (i18n)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/default-template-language>Default Template/Language</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/assets>Assets</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/snippets>Code Snippets</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/import>Import</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/export>Export</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/share>Share</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/welcome>Welcome Screen</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/recover>Recover Unsaved</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/code-to-image>Code to Image</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/features/display-modes>Display Modes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/default-view>Default View</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/themes>Themes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/mobile>Mobile Support</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/embeds>Embedded Playgrounds</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/lite>Lite Mode</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/read-only>Read-Only</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/permanent-url>Permanent URL</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/code-prefill>Code Prefill</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/data-urls>Data URLs</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/deploy>Deploy</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/sync>Sync</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/broadcast>Broadcast</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/backup-restore>Backup / Restore</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/github-integration>GitHub Integration</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/integrations>Integrations</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/user-management>User Management</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/security>Security</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/features/self-hosting>Self-Hosting</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/configuration/>Configuration</a><button aria-label="Expand sidebar category 'Configuration'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/sdk/>SDK</a><button aria-label="Expand sidebar category 'SDK'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/advanced/>Advanced</a><button aria-label="Expand sidebar category 'Advanced'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/languages/>Languages</a><button aria-label="Expand sidebar category 'Languages'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/bookmarklet>Bookmarklet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gh-action>GitHub Action ⚡</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/markdown-to-livecodes>Markdown to LiveCodes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contribution>Contribution</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/credits>Credits</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/license>License</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sponsor>Sponsor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contact>Contact</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/about>About us</a></ul></ul></nav><button type=button title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width=20 height=20 aria-hidden=true class=collapseSidebarButtonIcon_kv0_><g fill=#7a7a7a><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"/><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"/></g></svg></button></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/docs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/overview><span itemprop=name>Docs</span></a><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/features/><span itemprop=name>Features</span></a><meta itemprop=position content=2><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>Display Modes</span><meta itemprop=position content=3></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Display Modes</h1><div class="custom-content custom-content-header content_lMOZ undefined"><div data-ea-publisher=livecodesio data-ea-type=image class=horizontal data-ea-manual=true></div></div></header>
|
||
<!-- -->
|
||
<p>The <a href=/docs/configuration/configuration-object>configuration</a> option <a href=/docs/configuration/configuration-object#mode><code>mode</code></a>, also available as <a href=/docs/configuration/query-params>query param</a>, can be used to select different display modes.
|
||
The following display modes are supported:</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=full><code>full</code><a href=#full class=hash-link aria-label="Direct link to full" title="Direct link to full"></a></h2>
|
||
<p>This is the default mode with toolbars, editor and result panes.</p>
|
||
<p>Example: <a href="https://livecodes.io/?template=react" target=_blank rel="noopener noreferrer">https://livecodes.io/?template=react</a></p>
|
||
<p>Screenshot: (App in full mode)</p>
|
||
<p><img decoding=async loading=lazy alt=full-mode src=/docs/assets/images/mode-full-25f311a4ee364ffd5331c99c03160894.jpg width=2240 height=1400 class=img_ev3q></p>
|
||
<p>Demo: (Embedded playground in full mode)</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=focus><code>focus</code><a href=#focus class=hash-link aria-label="Direct link to focus" title="Direct link to focus"></a></h2>
|
||
<p>This hides most of UI buttons and menus and keeps only the essential elements: editors, editor titles, result page, console, and run and share buttons. It can be toggled during runtime from the full mode through the UI from a button in the lower left corner. Also the query param <code>?mode=focus</code>.</p>
|
||
<p>Example: <a href="https://livecodes.io/?template=react&mode=focus" target=_blank rel="noopener noreferrer">https://livecodes.io/?template=react&mode=focus</a></p>
|
||
<p>Screenshot: (focus mode)</p>
|
||
<p><img decoding=async loading=lazy alt=focus-mode src=/docs/assets/images/mode-focus-cfaa1455bdd069375859aa7cefbbc82d.jpg width=2240 height=1400 class=img_ev3q></p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=simple><code>simple</code><a href=#simple class=hash-link aria-label="Direct link to simple" title="Direct link to simple"></a></h2>
|
||
<p>This mode is mainly useful for embedded playgrounds.
|
||
It shows only 1 editor with the output (result page +/- console). The content of other editors can be set using <a href=/docs/sdk/>SDK</a> <a href=/docs/configuration/configuration-object>config</a> even though the editors are not shown.
|
||
By default, <code>codemirror</code> editor is used, however, this can be changed by the <a href=/docs/configuration/configuration-object#editor><code>editor</code></a> option.
|
||
By default, the layout is <code>responsive</code> but can also be overridden by the <a href=/docs/configuration/configuration-object#layout><code>layout</code></a> option to <code>vertical</code> or <code>horizontal</code>.</p>
|
||
<p>Demo: JS with console</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"simple"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"js"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"hello world\")"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"layout"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"vertical"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"console"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"full"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"simple"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"js"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"hello world\")"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"layout"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"vertical"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"console"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"full"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"simple"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"js"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"hello world\")"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"layout"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"vertical"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"console"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"full"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 string-property property" style=color:#36acaa>"mode"</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>"simple"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 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 string-property property" style=color:#36acaa>"layout"</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>"vertical"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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>"full"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 string-property property" style=color:#36acaa>"mode"</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>"simple"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 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 string-property property" style=color:#36acaa>"layout"</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>"vertical"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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>"full"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<p>Demo: JSX & Result page (Monaco editor, add CSS)</p>
|
||
<!-- -->
|
||
<div class="container_Egsj undefined" style=height:400px data-height=400px></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"simple"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"layout"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"vertical"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"editor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"monaco"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"none"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"jsx"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n const inc = () => setCount((c) => c + 1);\n return (\n <>\n {count} <button onClick={inc}>+1</button>\n </>\n );\n};\n\nconst App = () => (\n <div className=\"App\">\n <h1>Hello Jotai</h1>\n <h2>Enjoy coding!</h2>\n <Counter />\n </div>\n);\n\nexport default App;\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"style"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"css"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>".App {\n font-family: sans-serif;\n text-align: center;\n}\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"simple"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"layout"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"vertical"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"editor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"monaco"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"none"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"jsx"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n const inc = () => setCount((c) => c + 1);\n return (\n <>\n {count} <button onClick={inc}>+1</button>\n </>\n );\n};\n\nconst App = () => (\n <div className=\"App\">\n <h1>Hello Jotai</h1>\n <h2>Enjoy coding!</h2>\n <Counter />\n </div>\n);\n\nexport default App;\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"style"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"css"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>".App {\n font-family: sans-serif;\n text-align: center;\n}\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"simple"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"layout"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"vertical"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"activeEditor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"script"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"editor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"monaco"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"status"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"none"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"script"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"jsx"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n const inc = () => setCount((c) => c + 1);\n return (\n <>\n {count} <button onClick={inc}>+1</button>\n </>\n );\n};\n\nconst App = () => (\n <div className=\"App\">\n <h1>Hello Jotai</h1>\n <h2>Enjoy coding!</h2>\n <Counter />\n </div>\n);\n\nexport default App;\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"style"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"language"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"css"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"content"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>".App {\n font-family: sans-serif;\n text-align: center;\n}\n"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"simple"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"layout"</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>"vertical"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"activeEditor"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"script"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"editor"</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>"monaco"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"tools"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"status"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"none"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"script"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"jsx"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n const inc = () => setCount((c) => c + 1);\n return (\n <>\n {count} <button onClick={inc}>+1</button>\n </>\n );\n};\n\nconst App = () => (\n <div className=\"App\">\n <h1>Hello Jotai</h1>\n <h2>Enjoy coding!</h2>\n <Counter />\n </div>\n);\n\nexport default App;\n"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"style"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"css"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>".App {\n font-family: sans-serif;\n text-align: center;\n}\n"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"simple"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"layout"</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>"vertical"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"activeEditor"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"script"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"editor"</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>"monaco"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"tools"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"status"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"none"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"script"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"jsx"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n const inc = () => setCount((c) => c + 1);\n return (\n <>\n {count} <button onClick={inc}>+1</button>\n </>\n );\n};\n\nconst App = () => (\n <div className=\"App\">\n <h1>Hello Jotai</h1>\n <h2>Enjoy coding!</h2>\n <Counter />\n </div>\n);\n\nexport default App;\n"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"style"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"language"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"css"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"content"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>".App {\n font-family: sans-serif;\n text-align: center;\n}\n"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=lite><code>lite</code><a href=#lite class=hash-link aria-label="Direct link to lite" title="Direct link to lite"></a></h2>
|
||
<p>Loads a light-weight, minimal code editor, with limited playground features.
|
||
See the section about <a href=/docs/features/lite>lite mode</a> for details</p>
|
||
<p>Example: <a href="https://livecodes.io/?mode=lite&template=react" target=_blank rel="noopener noreferrer">https://livecodes.io/?mode=lite&template=react</a></p>
|
||
<p>Demo:</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"lite"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"lite"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"lite"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"lite"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"lite"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=editor><code>editor</code><a href=#editor class=hash-link aria-label="Direct link to editor" title="Direct link to editor"></a></h2>
|
||
<p>Hides the results pane and works as editor only.</p>
|
||
<p>Example: <a href="https://livecodes.io/?mode=editor&template=react" target=_blank rel="noopener noreferrer">https://livecodes.io/?mode=editor&template=react</a></p>
|
||
<p>Demo:</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"editor"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"editor"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"editor"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"editor"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"editor"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=codeblock><code>codeblock</code><a href=#codeblock class=hash-link aria-label="Direct link to codeblock" title="Direct link to codeblock"></a></h2>
|
||
<p>A read-only mode showing only the code block without editor interface. On mouse-over a copy button appears that allows to copy the code. This is specially useful when embedded.</p>
|
||
<p>Example: <a href="https://livecodes.io/?mode=codeblock&template=react" target=_blank rel="noopener noreferrer">https://livecodes.io/?mode=codeblock&template=react</a></p>
|
||
<p>Demo:</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"codeblock"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"codeblock"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"codeblock"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"codeblock"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"codeblock"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<p>By default, in <code>codeblock</code> mode, the light-weight <code>CodeJar</code> editor is used (in read-only mode). You can override this by setting the <code>editor</code> option. Refer to <a href=/docs/features/editor-settings#code-editor>Editor Settings</a> for details.</p>
|
||
<p>Example: <a href="https://livecodes.io/?mode=codeblock&editor=monaco&template=react" target=_blank rel="noopener noreferrer">https://livecodes.io/?mode=codeblock&editor=monaco&template=react</a></p>
|
||
<p>Demo:</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"codeblock"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"editor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"monaco"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"codeblock"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"editor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"monaco"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"config"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"codeblock"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"editor"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"monaco"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"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><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"codeblock"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"editor"</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>"monaco"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"config"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"mode"</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>"codeblock"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"editor"</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>"monaco"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=result><code>result</code><a href=#result class=hash-link aria-label="Direct link to result" title="Direct link to result"></a></h2>
|
||
<p>Shows the result page only, with a drawer at the bottom (which can be closed) that allows opening the project in the full playground.</p>
|
||
<p>Example: <a href="https://livecodes.io/?mode=result&template=react" target=_blank rel="noopener noreferrer">https://livecodes.io/?mode=result&template=react</a></p>
|
||
<p>Demo:</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</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 string-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><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</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 string-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><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</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 string-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><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 string-property property" style=color:#36acaa>"mode"</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>"result"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 string-property property" style=color:#36acaa>"mode"</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>"result"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"template"</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>"react"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<p>The tools pane (e.g. console/compiled code viewer) is hidden by default in <code>result</code> mode. It can be shown if set to <code>open</code> or <code>full</code>. Refer to <a href=/docs/features/tools-pane>Tools pane</a> documentation for details.</p>
|
||
<p>Example: <a href="https://livecodes.io/?mode=result&tools=console%7Cfull&&js=console.log(%22Hello%20World" target=_blank rel="noopener noreferrer">https://livecodes.io/?mode=result&tools=console|full&&js=console.log("Hello%20World</a>!")</p>
|
||
<p>Demo:</p>
|
||
<div class="container_Egsj undefined" style=height:50vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</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 string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console|full"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"js"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"Hello World!\")"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</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 string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console|full"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"js"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"Hello World!\")"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"mode"</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 string-property property" style=color:#36acaa>"tools"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console|full"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token string-property property" style=color:#36acaa>"js"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"console.log(\"Hello World!\")"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 string-property property" style=color:#36acaa>"mode"</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>"result"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"tools"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console|full"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 World!\")"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 string-property property" style=color:#36acaa>"mode"</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>"result"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"tools"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"console|full"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"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 World!\")"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34><</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=display-mode-vs-default-view>Display Mode vs Default View<a href=#display-mode-vs-default-view class=hash-link aria-label="Direct link to Display Mode vs Default View" title="Direct link to Display Mode vs Default View"></a></h2>
|
||
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_BuS1><p>"Display Mode" is different from "<a href=/docs/features/default-view>Default View</a>".<p>In <code>editor</code> display mode, only the editor is loaded and the result page is not available. While <code>editor</code> default view shows the editor by default, and the result page can be shown by dragging the split gutter.<p>The same applies for <code>result</code> display mode and default view.</div></div></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/features/display-modes.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/features/code-to-image><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Code to Image</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/features/default-view><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Default View</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#full class="table-of-contents__link toc-highlight"><code>full</code></a><li><a href=#focus class="table-of-contents__link toc-highlight"><code>focus</code></a><li><a href=#simple class="table-of-contents__link toc-highlight"><code>simple</code></a><li><a href=#lite class="table-of-contents__link toc-highlight"><code>lite</code></a><li><a href=#editor class="table-of-contents__link toc-highlight"><code>editor</code></a><li><a href=#codeblock class="table-of-contents__link toc-highlight"><code>codeblock</code></a><li><a href=#result class="table-of-contents__link toc-highlight"><code>result</code></a><li><a href=#display-mode-vs-default-view class="table-of-contents__link toc-highlight">Display Mode vs Default View</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> |