134 lines
50 KiB
HTML
134 lines
50 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/import" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Import | 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/import><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="Import | LiveCodes"><meta data-rh=true name=description content=Overview><meta data-rh=true property=og:description content=Overview><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/features/import><link data-rh=true rel=alternate href=https://livecodes.io/docs/features/import hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/features/import hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.a40c3f9c.js defer></script><script src=/docs/assets/js/main.af5c4c8b.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"light",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/docs/img/livecodes-logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/overview>Docs</a><a 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 menu__link--active" aria-current=page 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 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>Import</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>Import</h1><div class="custom-content custom-content-header content_lMOZ undefined"><div data-ea-publisher=livecodesio data-ea-type=image class=horizontal data-ea-manual=true></div></div></header>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=overview>Overview<a href=#overview class=hash-link aria-label="Direct link to Overview" title="Direct link to Overview"></a></h2>
|
||
<p>LiveCodes supports importing code from a wide variety of <a href=#sources>sources</a>. This can be achieved using one of the following methods:</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=ui>UI<a href=#ui class=hash-link aria-label="Direct link to UI" title="Direct link to UI"></a></h3>
|
||
<p>The Import screen can be accessed from the Project menu → Import.</p>
|
||
<!-- -->
|
||
<div style=margin-bottom:30px class=""><a href="https://livecodes.io/#params=N4IgzgxgTgpjB2IBcICWBbADgeygFxAF8g" target=_blank rel=noreferrer>direct link<svg width=12 height=12 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module style=margin-left:4px><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>
|
||
<p><img decoding=async loading=lazy alt="LiveCodes Import" src=/docs/assets/images/import-1-173c6698c44150c58b6d341db09435ad.jpg width=2240 height=1400 class=img_ev3q></p>
|
||
<p><img decoding=async loading=lazy alt="LiveCodes Import" src=/docs/assets/images/import-2-d2b754e8fc74fcad61a5e7d2932be5d5.jpg width=2240 height=1400 class=img_ev3q></p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=query-param>Query Param<a href=#query-param class=hash-link aria-label="Direct link to Query Param" title="Direct link to Query Param"></a></h3>
|
||
<p>A URL of any of the <a href=#sources>sources</a> can be imported by adding it as a value to <a href=/docs/configuration/query-params>query param</a> key: <code>x</code>.</p>
|
||
<p>Example:</p>
|
||
<p><a href="https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9" target=_blank rel="noopener noreferrer">https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9</a></p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=bookmarklet>Bookmarklet<a href=#bookmarklet class=hash-link aria-label="Direct link to Bookmarklet" title="Direct link to Bookmarklet"></a></h3>
|
||
<p>Instead of manually copy/pasting URLs to import, adding <a href=/docs/bookmarklet><strong>"Edit in LiveCodes"</strong> bookmarklet</a> to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=sdk>SDK<a href=#sdk class=hash-link aria-label="Direct link to SDK" title="Direct link to SDK"></a></h3>
|
||
<p>For <a href=/docs/features/embeds>embedded playgrounds</a>, use the <a href=/docs/sdk/>SDK</a> property <a href=/docs/sdk/js-ts#import><code>EmbedOptions.import</code></a>.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=examples>Examples<a href=#examples class=hash-link aria-label="Direct link to Examples" title="Direct link to Examples"></a></h2>
|
||
<ul>
|
||
<li>
|
||
<p>GitHub File:</p>
|
||
<p>URL: <a href=https://github.com/lodash/lodash/blob/master/isObject.js target=_blank rel="noopener noreferrer">https://github.com/lodash/lodash/blob/master/isObject.js</a></p>
|
||
<p><a href="https://livecodes.io/?x=https://github.com/lodash/lodash/blob/master/isObject.js" target=_blank rel="noopener noreferrer">Open in LiveCodes</a></p>
|
||
</li>
|
||
<li>
|
||
<p>GitHub Directory:</p>
|
||
<p>URL: <a href=https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards target=_blank rel="noopener noreferrer">https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards</a></p>
|
||
<p><a href="https://livecodes.io/?x=https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards" target=_blank rel="noopener noreferrer">Open in LiveCodes</a></p>
|
||
</li>
|
||
<li>
|
||
<p>GitHub Gist:</p>
|
||
<p>URL: <a href=https://gist.github.com/f01deb828a42f363502fbae7964d48e9 target=_blank rel="noopener noreferrer">https://gist.github.com/f01deb828a42f363502fbae7964d48e9</a></p>
|
||
<p><a href="https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9" target=_blank rel="noopener noreferrer">Open in LiveCodes</a></p>
|
||
</li>
|
||
<li>
|
||
<p>JS Bin:</p>
|
||
<p>URL: <a href=https://jsbin.com/iwovaj/73/embed?html,js,output target=_blank rel="noopener noreferrer">https://jsbin.com/iwovaj/73/embed?html,js,output</a></p>
|
||
<p><a href="https://livecodes.io/?x=https://jsbin.com/iwovaj/73/embed?html,js,output" target=_blank rel="noopener noreferrer">Open in LiveCodes</a></p>
|
||
</li>
|
||
<li>
|
||
<p>Vue Playground:</p>
|
||
<p>URL: <a href=https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g+fxAl7Bl5RWF9Jd3v//7+cLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS/JPejWpwZpcY4Ov94/vzDZ45eSpNMdzVciEPhLXTC0KeAIr1+bRtc0nXFUOesqqMiwTNWc1teiIF+1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0+jtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e/54i1t+H0wmj5rTR8wHDFbHxLiLXUazZOw/uUx7lW+gTPUU5ltCE/afSqAp2eW8FHyX2ZGv/+KOBqO8J00nuh/8Wasi target=_blank rel="noopener noreferrer">https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Z...</a></p>
|
||
<p><a href="https://livecodes.io/?x=https%3A%2F%2Fplay.vuejs.org%2F%23eNp9kUFKAzEUhq%2FyyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g%2BfxAl7Bl5RWF9Jd3v%2F%2F7%2BcLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS%2FJPejWpwZpcY4Ov94%2FvzDZ45eSpNMdzVciEPhLXTC0KeAIr1%2BbRtc0nXFUOesqqMiwTNWc1teiIF%2B1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0%2BjtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e%2F54i1t%2BH0wmj5rTR8wHDFbHxLiLXUazZOw%2FuUx7lW%2BgTPUU5ltCE%2FafSqAp2eW8FHyX2ZGv%2F%2BKOBqO8J00nuh%2F8Wasi" target=_blank rel="noopener noreferrer">Open in LiveCodes</a></p>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=sources>Sources<a href=#sources class=hash-link aria-label="Direct link to Sources" title="Direct link to Sources"></a></h2>
|
||
<p>Import is supported from any of the following:</p>
|
||
<ul>
|
||
<li>GitHub gist</li>
|
||
<li>GitHub file</li>
|
||
<li>Directory in a GitHub repo</li>
|
||
<li>Gitlab snippet</li>
|
||
<li>Gitlab file</li>
|
||
<li>Directory in a Gitlab repo</li>
|
||
<li>JS Bin</li>
|
||
<li><a href=/docs/features/share>Shared projects</a></li>
|
||
<li>Raw code</li>
|
||
<li>Code in web page DOM</li>
|
||
<li>Projects shared in official playgrounds of <a href=https://www.typescriptlang.org/play target=_blank rel="noopener noreferrer">TypeScript</a> and <a href=https://play.vuejs.org/ target=_blank rel="noopener noreferrer">Vue</a></li>
|
||
<li>Local file(s)</li>
|
||
<li>Code in zip file (Local or URL)</li>
|
||
<li><a href=/docs/features/export>Exported project JSON</a> (single project and bulk import)</li>
|
||
</ul>
|
||
<p>Import sources are identified by URL patterns (e.g. origin, pathname and extension).</p>
|
||
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 12 16"><path fill-rule=evenodd d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg></span>tip</div><div class=admonitionContent_BuS1><p>Local files can be imported from the "Import Screen" or by dragging and dropping the file(s) in the editor.</div></div>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=file-selection>File Selection<a href=#file-selection class=hash-link aria-label="Direct link to File Selection" title="Direct link to File Selection"></a></h2>
|
||
<p>For sources that provide multiple files (e.g. GitHub/GitLab directories, GitHub gists, GitLab snippets and local files), a best guess is tried to load files in respective editors. Best results are when there are 3 files and each file is in a language (identified by file extension) that can be loaded to a different editor, for example:</p>
|
||
<ul>
|
||
<li>index.html, style.css, script.js</li>
|
||
<li>default.pug, app.scss, main.ts</li>
|
||
</ul>
|
||
<p>The following file names are given higher priority:</p>
|
||
<ul>
|
||
<li>Markup files starting with <code>index.</code> or <code>default.</code></li>
|
||
<li>Style files starting with <code>style.</code> or <code>styles.</code></li>
|
||
<li>Script files starting with <code>script.</code>, <code>app.</code>, <code>main.</code> or <code>index.</code></li>
|
||
</ul>
|
||
<p>While README, markdown files and files with no extension are given lower priority.</p>
|
||
<p>Alternatively, files can be specified using the <code>files</code> <a href=/docs/configuration/query-params>query param</a>. It takes a <strong>comma-separated list</strong> of filenames. The first 3 found files are loaded. If 1 or 2 files are specified, only these will be loaded. The first matching file is shown by default in the active editor.</p>
|
||
<p>The query params should have the following format:
|
||
<code>?x={url}&files={file1},{file2},{file3}</code></p>
|
||
<p>Example:
|
||
<code>?x={url}&files=Counter.tsx,counter.scss,counter.html</code></p>
|
||
<p>The active editor can be specified using the <a href=/docs/configuration/configuration-object#activeeditor><code>activeEditor</code></a> (or its alias <code>active</code>) <a href=/docs/configuration/query-params>query param</a>. It takes the name of the editor (<code>markup</code>, <code>style</code> or <code>script</code>) or its ID (<code>0</code>, <code>1</code> or <code>2</code>) to be shown by default.</p>
|
||
<p>Example:
|
||
<code>?x={url}&activeEditor=style</code> or <code>?x={url}&active=1</code></p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=import-shared-projects>Import Shared Projects<a href=#import-shared-projects class=hash-link aria-label="Direct link to Import Shared Projects" title="Direct link to Import Shared Projects"></a></h2>
|
||
<p><a href=/docs/features/share>Shared Projects</a> can be imported using the value of the query param <code>x</code> generated by the Share screen. This starts with either:</p>
|
||
<ul>
|
||
<li><code>code/</code>: for compressed base64-encoded project config</li>
|
||
<li><code>id/</code>: for short URLs recognized by shared project id.</li>
|
||
</ul>
|
||
<p>Example:</p>
|
||
<p><a href="https://livecodes.io/?x=id/bi9qszw86w3" target=_blank rel="noopener noreferrer">https://livecodes.io/?x=id/bi9qszw86w3</a></p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=import-code-from-dom>Import Code from DOM<a href=#import-code-from-dom class=hash-link aria-label="Direct link to Import Code from DOM" title="Direct link to Import Code from DOM"></a></h2>
|
||
<p>If the source URL does not match one of the supported origins (GitHub, GitLab and JS Bin), the URL is fetched, its response text is parsed as <a href=https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model target=_blank rel="noopener noreferrer">DOM</a> and code is extracted from elements that match specific CSS selectors.
|
||
(By default: <code>.livecodes [data-lang="{language}"]</code>)</p>
|
||
<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>Example</div><div class=admonitionContent_BuS1><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>code</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>class</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>livecodes</span><span class="token tag attr-value punctuation" style=color:#393A34>"</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>pre</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-lang</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>html</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">This is identified as </span><span class="token entity named-entity" style=color:#36acaa>&lt;</span><span class="token plain">strong</span><span class="token entity named-entity" style=color:#36acaa>&gt;</span><span class="token plain">HTML</span><span class="token entity named-entity" style=color:#36acaa>&lt;</span><span class="token plain">/strong</span><span class="token entity named-entity" style=color:#36acaa>&gt;</span><span class="token plain"> code</span><span class="token tag punctuation" style=color:#393A34></</span><span class="token tag" style=color:#00009f>pre</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>code</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div><p>The HTML editor is prefilled with: <code>This is identified as <strong>HTML</strong> code</code><p>Please note that the code should be html-encoded to avoid interference with the HTML of the page.</div></div>
|
||
<p>Example:</p>
|
||
<p><a href="https://livecodes.io/?x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html" target=_blank rel="noopener noreferrer">https://livecodes.io/?x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html</a></p>
|
||
<p>Alternatively, custom CSS selectors can be specified using <a href=/docs/configuration/query-params>query params</a>:
|
||
<code>?x={url}&{language}-selector={selector}</code></p>
|
||
<p>The following example loads the content of the first element that matches the CSS selector <code>h3</code> as <code>html</code>:</p>
|
||
<p><a href="https://livecodes.io/?html-selector=h3&x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html" target=_blank rel="noopener noreferrer">https://livecodes.io/?html-selector=h3&x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html</a></p>
|
||
<p>Of course, <a href=/docs/features/embeds>embedded playgrounds</a> can be prefilled with code from the same embedding page. This works well for documentation and educational websites.</p>
|
||
<p><a href=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html target=_blank rel="noopener noreferrer">This is a demo</a> for automatic extraction of code blocks to prefill editors by creating "Edit in LiveCodes" links. Also embedded editors are prefilled from the code blocks. (<a href=https://github.com/live-codes/livecodes-examples/blob/master/prefill-from-code-blocks.html target=_blank rel="noopener noreferrer">View source</a>)</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=import-raw-code>Import Raw Code<a href=#import-raw-code class=hash-link aria-label="Direct link to Import Raw Code" title="Direct link to Import Raw Code"></a></h2>
|
||
<p>If the response text could not be parsed as DOM or no elements matched the CSS selectors, it is assumed to be raw code and the response text is loaded to editor. If the URL ends with an extension it is used to identify the language, otherwise it is assumed to be <code>html</code>.</p>
|
||
<p>Alternatively, the language of raw code can be specified using <a href=/docs/configuration/query-params>query params</a>:
|
||
<code>?x={url}&raw={language}</code></p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=import-from-codepen>Import from CodePen<a href=#import-from-codepen class=hash-link aria-label="Direct link to Import from CodePen" title="Direct link to Import from CodePen"></a></h2>
|
||
<p>Currently, CodePen API does not allow directly importing code from Pens. However, you can export any saved Pen as a <a href=https://blog.codepen.io/documentation/exporting-pens/#export-zip-1 target=_blank rel="noopener noreferrer">zip file</a> or <a href=https://blog.codepen.io/documentation/exporting-pens/#save-as-github-gist-2 target=_blank rel="noopener noreferrer">Github gist</a> and then import it to LiveCodes. The format that Codepen exports is well understood by LiveCodes. Most Pens can be imported with no or minimal changes.</p>
|
||
<p><strong>Note:</strong> External resources (styles/scripts) are not exported with source code in zip file export of CodePen. However, export to GitHub gist does export these. So if a Pen with external resources exported as zip file is not imported properly, try exporting to GitHub gist or manually add the <a href=/docs/features/external-resources>external resources</a>.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=import-exported-livecodes-projects>Import Exported LiveCodes Projects<a href=#import-exported-livecodes-projects class=hash-link aria-label="Direct link to Import Exported LiveCodes Projects" title="Direct link to Import Exported LiveCodes Projects"></a></h2>
|
||
<p>A <a href=/docs/features/export#exporting-a-single-project>single project exported as JSON</a> can be imported in the same or a different device from the import screen under the tab "Import Project JSON". The JSON file can be supplied as a local file upload or from a URL.</p>
|
||
<p>Similarly, <a href=/docs/features/export#exporting-multiple-projects>multiple projects exported in bulk</a> can be imported from the tab "Bulk Import".</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=related>Related<a href=#related class=hash-link aria-label="Direct link to Related" title="Direct link to Related"></a></h2>
|
||
<ul>
|
||
<li><a href=/docs/features/code-prefill>Code prefill</a></li>
|
||
<li><a href=/docs/features/export>Export</a></li>
|
||
<li><a href=/docs/features/external-resources>External resources</a></li>
|
||
<li><a href=/docs/features/module-resolution>Module resolution</a></li>
|
||
<li><a href=/docs/features/projects>Projects</a></li>
|
||
</ul></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/import.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/snippets><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Code Snippets</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/features/export><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Export</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=#overview class="table-of-contents__link toc-highlight">Overview</a><ul><li><a href=#ui class="table-of-contents__link toc-highlight">UI</a><li><a href=#query-param class="table-of-contents__link toc-highlight">Query Param</a><li><a href=#bookmarklet class="table-of-contents__link toc-highlight">Bookmarklet</a><li><a href=#sdk class="table-of-contents__link toc-highlight">SDK</a></ul><li><a href=#examples class="table-of-contents__link toc-highlight">Examples</a><li><a href=#sources class="table-of-contents__link toc-highlight">Sources</a><li><a href=#file-selection class="table-of-contents__link toc-highlight">File Selection</a><li><a href=#import-shared-projects class="table-of-contents__link toc-highlight">Import Shared Projects</a><li><a href=#import-code-from-dom class="table-of-contents__link toc-highlight">Import Code from DOM</a><li><a href=#import-raw-code class="table-of-contents__link toc-highlight">Import Raw Code</a><li><a href=#import-from-codepen class="table-of-contents__link toc-highlight">Import from CodePen</a><li><a href=#import-exported-livecodes-projects class="table-of-contents__link toc-highlight">Import Exported LiveCodes Projects</a><li><a href=#related class="table-of-contents__link toc-highlight">Related</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> |