"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8706"],{3365:function(e,t,s){s.d(t,{Z:()=>j});var r=s("5893"),i=s("4200"),n=s("7294"),o=s("8294");function a(e){let t=(0,n.useRef)(null),[s,i]=(0,n.useState)(e.className||""),[a,l]=(0,n.useState)(e.style||{}),[c,d]=(0,n.useState)(e.height),[m,u]=(0,n.useState)(),[h,g]=(0,n.useState)(JSON.stringify(e.config||"")),[p,j]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:r,height:n,sdkReady:a,config:c,...f}=e;if(i(s||""),l(r||{}),d(n),m&&p===JSON.stringify(f)){if(h===JSON.stringify(c))return;g(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{m?.setConfig(e)}):c&&m.setConfig(c)}else j(JSON.stringify(f)),m?.destroy(),(0,o.T)(t.current,{config:c,...f}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,n.useEffect)(()=>()=>{m?.destroy()},[]),(0,r.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),m=s("7645"),u=s("8168"),h=s("8228"),g=s("5050");function p(e){let[t,s]=(0,n.useState)(e.js),[i,o]=(0,n.useState)(e.ts),[a,l]=(0,n.useState)(e.react),[p,j]=(0,n.useState)(e.vue),[f,x]=(0,n.useState)(e.svelte),v="3.7rem",[b,y]=(0,n.useState)(!0),[w,S]=(0,n.useState)(v),Z=(0,n.useRef)(null),N=()=>{setTimeout(()=>{S(`calc(${Z.current.offsetHeight}px + ${v})`)},5),setTimeout(()=>{S(`calc(${Z.current.offsetHeight}px + ${v})`)},255)};return(0,n.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),j(e(p,"html")),x(e(f,"html"))}},[]),(0,r.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${h.Z.details}`,"data-collapsed":b,style:{height:b?v:w,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,r.jsx)("summary",{onClick:()=>{y(!b),N()},children:"show code"}),(0,r.jsx)("div",{ref:Z,style:{display:"block",overflow:"hidden"},children:(0,r.jsx)("div",{className:g.Z.collapsibleContent,children:(0,r.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,r.jsx)(m.Z,{value:"js",label:"JS",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"js",children:t})}),(0,r.jsx)(m.Z,{value:"ts",label:"TS",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"ts",children:i})}),(0,r.jsx)(m.Z,{value:"react",label:"React",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"jsx",children:a})}),(0,r.jsx)(m.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"html",children:p})}),(0,r.jsx)(m.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"html",children:f})})]})})})]})}function j(e){let{className:t,style:s,showCode:n,height:o,...c}=e,{colorMode:d}=(0,i.I)(),m=e=>JSON.stringify(e,null,2),u=`
import { createPlayground } from 'livecodes';

const options = ${m(c)};
createPlayground('#container', options);

`.trimStart(),h=`
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = ${m(c)};
createPlayground('#container', options);

`.trimStart(),g=`
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = ${m(c)};
  return (<LiveCodes {...options}></LiveCodes>);
}

`.trimStart(),j=`
<script setup>
import LiveCodes from "livecodes/vue";

const options = ${m(c)};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

`,f=`
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state(${m(c)});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,r.jsx)(p,{js:u,ts:h,react:g,vue:j,svelte:f})]})}},4978:function(e,t,s){s.r(t),s.d(t,{default:()=>E});var r=s("5893"),i=s("3367"),n=s("7262"),o=s("3687"),a=s("7026"),l=s("7294"),c=s("1705"),d=s("615");let m=[{label:"A large collection of languages",url:"./img/screenshots/languages-3.jpg"},{label:"Lots of features",url:"./img/screenshots/export-1.jpg"},{label:"Even more features",url:"./img/screenshots/snippets-1.jpg"},{label:"Starter templates for new projects",url:"./img/screenshots/templates-1.jpg"},{label:"... many starter templates",url:"./img/screenshots/templates-2.jpg"},{label:"Welcome screen - for a quick start",url:"./img/screenshots/welcome-1.jpg"},{label:"Keep your projects organized",url:"./img/screenshots/saved-projects-1.jpg"},{label:"Add external resources",url:"./img/screenshots/resources.jpg"},{label:"CSS Processors",url:"./img/screenshots/css-processors.jpg"},{label:"IntelliSense (autocomplete)",url:"./img/screenshots/intellisense-3.jpg"},{label:"AI Code Assistant",url:"./img/screenshots/ai-1.jpg"},{label:"Console for quick inspection",url:"./img/screenshots/console-1.jpg"},{label:"View compiled code",url:"./img/screenshots/compiled-code-1.jpg"},{label:"Import code from many sources",url:"./img/screenshots/import-2.jpg"},{label:"Embed projects into your web pages",url:"./img/screenshots/embed-1.jpg"},{label:"Share your projects with others",url:"./img/screenshots/share-1.jpg"},{label:"Deploy to GitHub Pages",url:"./img/screenshots/deploy-1.jpg"},{label:"Broadcast real-time code changes",url:"./img/screenshots/broadcast-1.jpg"},{label:"Project info",url:"./img/screenshots/project-info.jpg"},{label:"Assets manager",url:"./img/screenshots/assets-2.jpg"},{label:"Code snippets",url:"./img/screenshots/snippets-list.jpg"},{label:"Run automated tests!",url:"./img/screenshots/tests.jpg"},{label:"Sync with your other devices",url:"./img/screenshots/sync.jpg"},{label:"Backup and restore your data",url:"./img/screenshots/backup-restore-1.jpg"},{label:"Fine-tune your editor settings",url:"./img/screenshots/editor-settings-1.jpg"},{label:"Emmet support and Vim/Emacs modes",url:"./img/screenshots/editor-settings-3.jpg"},{label:"Select your favorite theme/color",url:"./img/screenshots/themes-5.jpg"},{label:"Change UI language to your preferred one",url:"./img/screenshots/i18n-1.jpg"},{label:"Responsive layout",url:"./img/screenshots/responsive.jpg"}];function u(e){let{label:t,url:s}=e;return(0,r.jsxs)("div",{children:[(0,r.jsx)("img",{src:s,alt:t}),(0,r.jsx)("p",{className:"legend",children:t})]})}function h(){return(0,r.jsx)(d.Carousel,{showStatus:!1,showThumbs:!1,infiniteLoop:!0,className:"carousel_dVSv",children:m.map((e,t)=>(0,r.jsx)(u,{...e},t))})}let g={features:"features_xdhU",center:"center_LOKI",left:"left_Y8za",padding:"padding_OUuT",steps:"steps_x5R3",border:"border_yjIZ",featureSvg:"featureSvg__8YW",rowLight:"rowLight_gCoF",rowDark:"rowDark_XdIb",carousel:"carousel_oYf_",buttons:"buttons_CYIY",finePrint:"finePrint_YKYp"};var p=s("3262");let j={sliders:"sliders_tEds",buttons:"buttons_NJZT",slider:"slider_ZiNZ",current:"current_jjur",hidden:"hidden_OdSS"},f=e=>({...e[Math.floor(Math.random()*e.length)],id:Math.random()});function x(){let e={markup:[{name:"html",title:"HTML"},{name:"markdown",title:"Markdown"},{name:"mdx",title:"MDX"},{name:"astro",title:"Astro"},{name:"pug",title:"Pug"},{name:"asciidoc",title:"AsciiDoc"},{name:"haml",title:"Haml"},{name:"mustache",title:"Mustache"},{name:"handlebars",title:"Handlebars"},{name:"ejs",title:"EJS"},{name:"eta",title:"Eta"},{name:"nunjucks",title:"Nunjucks"},{name:"liquid",title:"Liquid"},{name:"dot",title:"doT"},{name:"twig",title:"Twig"},{name:"vento",title:"Vento"},{name:"art-template",title:"art-template"},{name:"jinja",title:"Jinja"},{name:"bbcode",title:"BBCode"},{name:"mjml",title:"MJML"},{name:"diagrams",title:"Diagrams"},{name:"richtext",title:"Rich Text"}],style:[{name:"css",title:"CSS"},{name:"scss",title:"SCSS"},{name:"sass",title:"Sass"},{name:"less",title:"Less"},{name:"stylus",title:"Stylus"},{name:"stylis",title:"Stylis"},{name:"tailwindcss",title:"Tailwind CSS",processor:!0},{name:"windicss",title:"Windi CSS",processor:!0},{name:"unocss",title:"UnoCSS",processor:!0},{name:"tokencss",title:"Token CSS",processor:!0},{name:"lightningcss",title:"Lightning CSS",processor:!0},{name:"cssmodules",title:"CSS Modules",processor:!0}],script:[{name:"javascript",title:"JS"},{name:"typescript",title:"Typescript"},{name:"flow",title:"Flow"},{name:"babel",title:"Babel"},{name:"sucrase",title:"Sucrase"},{name:"jsx",title:"JSX"},{name:"tsx",title:"TSX"},{name:"react",title:"React"},{name:"react-tsx",title:"React (TSX)"},{name:"react-native",title:"React Native"},{name:"react-native-tsx",title:"React Native (TSX)"},{name:"vue",title:"Vue 3"},{name:"vue2",title:"Vue 2"},{name:"svelte",title:"Svelte"},{name:"stencil",title:"Stencil"},{name:"solid",title:"Solid"},{name:"solid.tsx",title:"Solid (TS)"},{name:"riot",title:"Riot.js"},{name:"malina",title:"Malina.js"},{name:"coffeescript",title:"CoffeeScript"},{name:"livescript",title:"LiveScript"},{name:"civet",title:"Civet"},{name:"clio",title:"Clio"},{name:"imba",title:"Imba"},{name:"rescript",title:"ReScript"},{name:"reason",title:"Reason"},{name:"ocaml",title:"OCaml"},{name:"python",title:"Python"},{name:"python-wasm",title:"Python (Wasm)"},{name:"r",title:"R"},{name:"ruby",title:"Ruby"},{name:"ruby-wasm",title:"Ruby (Wasm)"},{name:"go",title:"Go"},{name:"php",title:"PHP"},{name:"php-wasm",title:"PHP (Wasm)"},{name:"cpp",title:"C++"},{name:"cpp-wasm",title:"C++ (Wasm)"},{name:"java",title:"Java"},{name:"csharp-wasm",title:"C# (Wasm)"},{name:"perl",title:"Perl"},{name:"lua",title:"Lua"},{name:"lua-wasm",title:"Lua (Wasm)"},{name:"teal",title:"Teal"},{name:"fennel",title:"Fennel"},{name:"julia",title:"Julia"},{name:"scheme",title:"Scheme"},{name:"commonlisp",title:"Lisp"},{name:"clojurescript",title:"CLJS"},{name:"gleam",title:"Gleam"},{name:"tcl",title:"Tcl"},{name:"assemblyscript",title:"AssemblyScript"},{name:"wat",title:"WAT"},{name:"sql",title:"SQL"},{name:"postgresql",title:"PostgreSQL"},{name:"prolog",title:"Prolog"},{name:"blockly",title:"Blockly"}]},t=["markup","style","script"],s={},n={markup:"html",style:"css",script:"js"},o=(e,t)=>{n[e]=t},a=t=>{let s=t?f(e.style).name:n.style,r=e.style.find(e=>e.name===s).processor,i=t?f(e.markup).name+"&"+(r?"css":s)+"&"+f(e.script).name:n.markup+"&"+(r?"css":s)+"&"+n.script;window.open(location.origin+"?"+i+(r?"&processors="+s:""),"_blank")};return p.Z.canUseDOM&&setInterval(()=>{let e=t[Math.floor(Math.random()*t.length)];"function"==typeof s[e]&&s[e]()},2e3),(0,r.jsxs)("div",{className:j.sliders,children:[(0,r.jsx)(v,{slide:"markup",lists:e,cb:o,flipper:s}),(0,r.jsx)("span",{children:"+"}),(0,r.jsx)(v,{slide:"style",lists:e,cb:o,flipper:s}),(0,r.jsx)("span",{children:"+"}),(0,r.jsx)(v,{slide:"script",lists:e,cb:o,flipper:s}),(0,r.jsxs)("div",{className:j.buttons,children:[(0,r.jsx)(i.Z,{className:"button button--outline button--primary button--lg",onClick:()=>a(!1),children:"Looks Good \uD83D\uDE80"}),(0,r.jsx)(i.Z,{className:"button button--outline button--warning button--lg",onClick:()=>a(!0),children:"Surprise me \uD83C\uDF81"})]})]})}function v(e){let{lists:t,slide:s,cb:i,flipper:n}=e,o=t[s],[a,c]=(0,l.useState)([f(o.slice(1)),{...o[0],id:Math.random()},f(o.slice(1))]);return(0,l.useEffect)(()=>()=>{c([])},[]),n[s]=()=>{c([...a.slice(-2),f(o.filter(e=>e.name!==a[2].name))]),i(s,a[2].name)},(0,r.jsx)("div",{className:j.slider,children:a.map((e,t)=>(0,r.jsx)("div",{className:t===a.length-1?j.hidden:t===a.length-2?j.current:"",children:e.title},e.id))})}var b=s("3365");let y=[{title:"Feature-Rich",image:"./img/light-bulb.svg",description:(0,r.jsxs)(r.Fragment,{children:["Supports"," ",(0,r.jsx)(i.Z,{to:"./languages",children:(0,r.jsx)("strong",{children:"90+ languages/frameworks"})}),". TypeScript Support, npm Modules, Console, Compiled code viewer, Tests, Starter Templates, Save, Import, Export, Share, Deploy, Assets, Snippets, Backup/Restore, Sync, Broadcast and a lot more"," ",(0,r.jsx)(i.Z,{to:"./features",children:(0,r.jsx)("strong",{children:"features"})}),". Features are downloaded only when used."]})},{title:"Client-Side!",image:"./img/clients.svg",description:(0,r.jsxs)(r.Fragment,{children:["LiveCodes ",(0,r.jsx)("strong",{children:"runs in the browser"}),", where all the processing/transpilation occurs, with ",(0,r.jsx)("strong",{children:"no server rounds"})," required. So, after the initial load, it becomes pretty ",(0,r.jsx)("strong",{children:"fast"}),". It can be hosted on any"," ",(0,r.jsx)("strong",{children:"static file server or CDN"}),". No ",(0,r.jsx)("code",{children:"npm\xa0install"}),"s. Just the browser!"]})},{title:"Integrations",image:"./img/integrations.svg",description:(0,r.jsxs)(r.Fragment,{children:["Rich set of integrations. ",(0,r.jsx)(i.Z,{to:"./features/import",children:"Import"})," code from"," ",(0,r.jsx)("strong",{children:"GitHub"})," files/repos/gists, Gitlab files/repos/snippets, JsBin or web pages."," ",(0,r.jsx)(i.Z,{to:"./features/export",children:"Export"})," to GitHub gists, CodePen or JsFiddle."," ",(0,r.jsx)(i.Z,{to:"./features/deploy",children:"Deploy"})," to GitHub Pages."," ",(0,r.jsx)(i.Z,{to:"./features/sync",children:"Sync"})," to GitHub Repo."]})}],w=[{title:"Powerful Editor",image:"./img/feather.svg",description:(0,r.jsxs)(r.Fragment,{children:["The code editor offers ",(0,r.jsx)("strong",{children:"auto-complete"}),", intellisense, code",(0,r.jsx)("strong",{children:" format"}),", multi-cursor editing, ",(0,r.jsx)("strong",{children:"Emmet"})," support,"," ",(0,r.jsx)("strong",{children:"Vim and Emacs"})," modes, editor themes, customizable"," ",(0,r.jsx)(i.Z,{to:"./features/editor-settings",children:"editor settings"})," and more. The powerful Monaco editor (that powers ",(0,r.jsx)("strong",{children:"VS\xa0Code"}),") is used on desktop, and a touch-friendly editor is used on mobile."]})},{title:"AI Code Assistant",image:"./img/magic-wand.svg",description:(0,r.jsxs)(r.Fragment,{children:["Leverage the ",(0,r.jsx)(i.Z,{to:"./features/ai",children:"power of AI"})," to help you write/learn code, using the ",(0,r.jsx)("strong",{children:"free"})," Copilot alternative. It understands the context of your code and comments to generate suggestions. It has a wide range of language support, and it works everywhere (in the ",(0,r.jsx)(i.Z,{to:"./getting-started#standalone-app",children:"standalone app"}),","," ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embedded playgrounds"})," and"," ",(0,r.jsx)(i.Z,{to:"./features/self-hosting",children:"self-hosted"})," apps)."]})},{title:"Mobile-Friendly",image:"./img/responsive.svg",description:(0,r.jsxs)(r.Fragment,{children:["LiveCodes offers a great ",(0,r.jsx)(i.Z,{to:"./features/mobile",children:"mobile"})," experience. The"," ",(0,r.jsx)("strong",{children:"responsive"})," layout allows working on devices with different screen sizes. The ",(0,r.jsx)("strong",{children:"touch-friendly"})," CodeMirror 6 editor is used on mobile. Don't wait to be on your desk. Try your ideas on the go! And then ",(0,r.jsx)(i.Z,{to:"./features/share",children:"share"})," or"," ",(0,r.jsx)(i.Z,{to:"./features/sync",children:"sync"})," your work across devices. You can even share using"," ",(0,r.jsx)("strong",{children:"QR code"}),"."]})}],S=[{title:"Standalone App",image:"./img/star.svg",description:(0,r.jsxs)(r.Fragment,{children:["Use the ",(0,r.jsx)(i.Z,{to:"./getting-started#standalone-app",children:"standalone app"})," for quick prototyping, testing new ideas or learning a new framework/language. The app remembers your"," ",(0,r.jsx)(i.Z,{to:"./features/user-settings",children:"settings"}),". Organize your"," ",(0,r.jsx)(i.Z,{to:"./features/projects",children:"projects"})," and"," ",(0,r.jsx)(i.Z,{to:"./features/assets",children:"assets"}),". ",(0,r.jsx)(i.Z,{to:"./features/share",children:"Share"})," code with friends. ",(0,r.jsx)(i.Z,{to:"./features/deploy",children:"Deploy"})," projects to public URLs."]})},{title:"Embedded Playgrounds",image:"./img/add-frame.svg",description:(0,r.jsxs)(r.Fragment,{children:["LiveCodes can be ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embedded"})," in your web pages. Code can be easily ",(0,r.jsx)(i.Z,{to:"./features/code-prefill",children:"prefilled"}),". This is particularly useful for educational websites and for library documentations. It is"," ",(0,r.jsx)(i.Z,{to:"./features/security",children:"secure"})," and highly"," ",(0,r.jsx)(i.Z,{to:"./configuration",children:"configurable"}),"."," ",(0,r.jsx)(i.Z,{to:"./features/intellisense",children:"Intellisense"})," is available even for custom libraries!"]})},{title:"Developer-Friendly",image:"./img/code.svg",description:(0,r.jsxs)(r.Fragment,{children:["It is easy to ",(0,r.jsx)(i.Z,{to:"./getting-started",children:"get started"}),". LiveCodes is highly"," ",(0,r.jsx)(i.Z,{to:"./configuration/configuration-object",children:"configurable"})," (even by URL"," ",(0,r.jsx)(i.Z,{to:"./configuration/query-params",children:"query params"}),"). The"," ",(0,r.jsx)(i.Z,{to:"./sdk/",children:"SDK"})," facilitates ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embedding"})," ","playgrounds and allows easy ",(0,r.jsx)(i.Z,{to:"./sdk/js-ts#sdk-methods",children:"communication"})," with them. The SDK is available for ",(0,r.jsx)(i.Z,{to:"./sdk/js-ts",children:"vanilla JS/TS"}),","," ",(0,r.jsx)(i.Z,{to:"./sdk/react",children:"React"}),", ",(0,r.jsx)(i.Z,{to:"./sdk/vue",children:"Vue"})," and"," ",(0,r.jsx)(i.Z,{to:"./sdk/svelte",children:"Svelte"}),". There is also a"," ",(0,r.jsx)(i.Z,{to:"./sdk/headless",children:"headless mode"})," for full control over the UI."]})}],Z=[{title:"Documentations",image:"./img/docs.svg",description:(0,r.jsxs)(r.Fragment,{children:["Comprehensive ",(0,r.jsx)(i.Z,{to:"./overview",children:"documentations"})," for"," ",(0,r.jsx)(i.Z,{to:"./features",children:"features"}),", ",(0,r.jsx)(i.Z,{to:"./configuration",children:"configuration"})," and"," ",(0,r.jsx)(i.Z,{to:"./sdk",children:"SDK"})," (including ",(0,r.jsx)(i.Z,{to:"./api/globals",children:"TypeScript types"}),"). Documentations are rich with code samples, live demos and screenshots. A gallery of usage examples is provided as a ",(0,r.jsx)(i.Z,{to:"pathname:///../stories",children:"storybook"}),"."]})},{title:"Focused on Privacy",image:"./img/data-privacy.svg",description:(0,r.jsxs)(r.Fragment,{children:["Projects are private by default. The code you write in LiveCodes never leaves your device, unless you choose to share, export or sync it. User data is stored in the browser. User code runs in a sandboxed environment. ",(0,r.jsx)(i.Z,{to:"./features/security",children:"Security"})," is taken seriously."]})},{title:"Free and Open-Source",image:"./img/oss.svg",description:(0,r.jsxs)(r.Fragment,{children:["LiveCodes is ",(0,r.jsx)("strong",{children:"free"}),", with ",(0,r.jsx)("strong",{children:"no\xa0limits"})," for use,"," ",(0,r.jsx)("strong",{children:"no\xa0ads"})," and no\xa0account required*.",(0,r.jsx)("br",{}),"Do you want to ",(0,r.jsx)(i.Z,{to:"./features/self-hosting",children:"self-host"})," it for commercial use? No problem! It is"," ",(0,r.jsxs)("span",{style:{whiteSpace:"nowrap"},children:[(0,r.jsx)(i.Z,{to:"./license",children:(0,r.jsx)("strong",{children:"MIT-licensed"})})," ","\uD83C\uDF89"]}),(0,r.jsx)("br",{}),"Please consider ",(0,r.jsx)(i.Z,{to:"./sponsor",children:"sponsoring LiveCodes"})," \u2764"]})}];function N(e){let{title:t,image:s,description:i}=e;return(0,r.jsxs)("div",{className:(0,a.Z)("col col--4"),children:[s&&(0,r.jsx)("div",{className:"text--center",children:(0,r.jsx)("img",{className:g.featureSvg,alt:t,src:s})}),(0,r.jsxs)("div",{className:"text--center padding-horiz--md",children:[(0,r.jsx)("h3",{children:t}),(0,r.jsx)("p",{children:i})]})]})}let k=`
import { createPlayground } from "livecodes";

createPlayground("#container", { template: "react" });
`.trimStart(),C=()=>{let{siteConfig:e}=(0,n.Z)();return(0,r.jsx)(c.Z,{language:"html",showLineNumbers:!0,children:`
<div id="container"></div>
<script type="module">
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${e.customFields.sdkVersion}';

createPlayground('#container', {
  params: {
    markdown: '# Hello LiveCodes!',
    css: 'h1 {color: dodgerblue;}',
    js: 'console.log("Hello, from JS!");',
    console: 'open',
  },
});
</script>`.trimStart()})};function P(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("section",{className:g.features,children:(0,r.jsxs)("div",{className:"container",children:[(0,r.jsx)("div",{className:"row",children:(0,r.jsx)(x,{})}),(0,r.jsxs)("div",{className:"row "+g.center,children:[(0,r.jsx)(b.Z,{template:"react",style:{height:"70vh",width:"95%",boxShadow:"0 0 20px var(--ifm-color-secondary-darkest)"},showCode:!1,loading:"eager"}),(0,r.jsx)("div",{className:"margin-vert--md",children:(0,r.jsxs)("p",{children:["Psst. This is an interactive playground!",(0,r.jsx)("img",{src:"./img/arrow.svg",alt:"arrow-up",style:{height:"2em",verticalAlign:"middle",marginLeft:"0.5em",marginBottom:"0.7em"}}),(0,r.jsx)("br",{}),"Try editing the code above and see the changes reflected in the result page."]})})]}),(0,r.jsx)("div",{className:"row "+g.center,children:(0,r.jsx)("p",{children:"Want a similar playground for your website?"})}),(0,r.jsx)("div",{style:{maxWidth:"35em",margin:"auto"},children:(0,r.jsx)(c.Z,{language:"js",children:k})}),(0,r.jsxs)("div",{className:`row ${g.center} ${g.buttons}`,children:[(0,r.jsx)(i.Z,{className:" button button--info button--outline button--lg",to:"./getting-started",children:"Get Started \u2708\uFE0F"}),(0,r.jsx)(i.Z,{className:"button button--primary button--outline button--lg",to:"./overview",children:"Documentations \uD83D\uDCD6"})]})]})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowDark),children:(0,r.jsx)("div",{className:"container padding-vert--lg",children:(0,r.jsxs)("div",{className:"text--center padding-horiz--md",children:[(0,r.jsx)("h2",{className:g.padding,children:"Code Playground That Just Works!"}),(0,r.jsxs)("div",{className:"row "+g.center,children:[(0,r.jsx)("div",{className:(0,a.Z)("col col--6",g.left),children:(0,r.jsxs)("ul",{children:[(0,r.jsx)("li",{children:"No servers to configure (or pay for!)"}),(0,r.jsx)("li",{children:"No databases to maintain (or pay for!)"}),(0,r.jsx)("li",{children:"No installs"}),(0,r.jsx)("li",{children:"No configuration files"}),(0,r.jsx)("li",{children:"No build steps"}),(0,r.jsxs)("li",{children:["No subscription fees (free and ",(0,r.jsx)(i.Z,{to:"./license/",children:"open-source"}),")"]}),(0,r.jsx)("li",{children:"No account required *"}),(0,r.jsx)("li",{children:"No limits for usage (unlimited private projects)"}),(0,r.jsx)("li",{children:(0,r.jsx)(i.Z,{to:"./languages/",children:"90+ languages/frameworks/processors"})}),(0,r.jsxs)("li",{children:["Large set of ",(0,r.jsx)(i.Z,{to:"./features/",children:"features"})," and integrations"]}),(0,r.jsxs)("li",{children:[(0,r.jsx)(i.Z,{to:"./features/import",children:"Import"})," code from a wide variety of sources"]}),(0,r.jsxs)("li",{children:["Use modules from ",(0,r.jsx)(i.Z,{to:"./features/module-resolution",children:"npm"}),","," ",(0,r.jsx)(i.Z,{to:"./features/module-resolution#deno-modules",children:"deno.land/x"}),","," ",(0,r.jsx)(i.Z,{to:"./features/module-resolution#jsr-modules",children:"jsr"}),","," ",(0,r.jsx)(i.Z,{to:"./features/module-resolution#githubgitlabbitbucket",children:"GitHub"}),", and others"]}),(0,r.jsxs)("li",{children:["Easily ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embed"})," it in your web pages"]}),(0,r.jsx)("li",{children:"It runs in the browser (client-side)"})]})}),(0,r.jsxs)("div",{className:(0,a.Z)("col col--6",g.left),children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{children:(0,r.jsx)("strong",{children:"Steps:"})}),(0,r.jsx)("ol",{className:g.steps,children:(0,r.jsxs)("li",{children:["Go to"," ",(0,r.jsx)("a",{href:"https://livecodes.io/",target:"_blank",children:"livecodes.io"})]})}),"... and enjoy all the ",(0,r.jsx)(i.Z,{to:"./features/",children:"features"}),"!"]}),(0,r.jsx)("hr",{}),(0,r.jsxs)("div",{children:[(0,r.jsxs)("p",{children:["Do you want to ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embed"})," it in a web page?"]}),(0,r.jsx)("p",{children:"Add this code to your page:"}),(0,r.jsx)("div",{className:g.border,children:(0,r.jsx)(C,{})})]}),(0,r.jsx)("hr",{}),(0,r.jsxs)("div",{children:[(0,r.jsxs)("p",{children:["Ok, do you want to ",(0,r.jsx)(i.Z,{to:"./features/self-hosting",children:"self-host"})," it?"]}),(0,r.jsxs)("ol",{className:g.steps,children:[(0,r.jsxs)("li",{children:["Download a"," ",(0,r.jsx)("a",{href:"https://github.com/live-codes/livecodes/releases",target:"_blank",children:"release"})]}),(0,r.jsxs)("li",{children:["Put it on a static file server (for free!)",(0,r.jsxs)("sup",{children:[" ",(0,r.jsx)("a",{href:"https://pages.cloudflare.com/",target:"_blank",rel:"noopener",children:"1"}),","," ",(0,r.jsx)("a",{href:"https://vercel.com/",target:"_blank",rel:"noopener",children:"2"}),","," ",(0,r.jsx)("a",{href:"https://www.netlify.com/",target:"_blank",rel:"noopener",children:"3"}),","," ",(0,r.jsx)("a",{href:"https://firebase.google.com/",target:"_blank",rel:"noopener",children:"4"}),","," ",(0,r.jsx)("a",{href:"https://pages.github.com/",target:"_blank",rel:"noopener",children:"5"})]})]})]}),"... and it just works!"]})]})]}),(0,r.jsxs)("p",{className:g.finePrint,children:["* GitHub account is required only for features that use"," ",(0,r.jsx)(i.Z,{to:"./features/github-integration",children:"GitHub Integration"}),"."]})]})})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowLight),children:(0,r.jsx)("div",{className:"container padding-vert--lg",children:(0,r.jsx)("div",{className:"row "+g.center,children:y.map((e,t)=>(0,r.jsx)(N,{...e},t))})})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowDark),children:(0,r.jsx)("div",{className:"container padding-vert--lg",children:(0,r.jsx)("div",{className:"row "+g.center,children:w.map((e,t)=>(0,r.jsx)(N,{...e,idx:t},t))})})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowLight),children:(0,r.jsx)("div",{className:"container padding-vert--lg",children:(0,r.jsx)("div",{className:"row "+g.center,children:S.map((e,t)=>(0,r.jsx)(N,{...e},t))})})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowDark),children:(0,r.jsxs)("div",{className:"container padding-vert--lg",children:[(0,r.jsx)("div",{className:"row "+g.center,children:Z.map((e,t)=>(0,r.jsx)(N,{...e},t))}),(0,r.jsxs)("p",{className:g.finePrint,children:["The OSI logo trademark is the trademark of Open Source Initiative.",(0,r.jsx)("br",{}),"* GitHub account is required only for features that use"," ",(0,r.jsx)(i.Z,{to:"./features/github-integration",children:"GitHub Integration"}),"."]})]})}),(0,r.jsx)("section",{children:(0,r.jsx)("div",{className:"container padding-vert--lg "+g.center,children:(0,r.jsxs)("div",{className:["row",g.carousel,g.center].join(" "),children:[(0,r.jsx)("h3",{children:"Screenshots"}),(0,r.jsx)(h,{})]})})}),(0,r.jsx)("section",{children:(0,r.jsx)("div",{className:"container padding-vert--lg "+g.center,children:(0,r.jsx)("div",{className:["row",g.carousel,g.center].join(" "),children:(0,r.jsxs)("div",{className:g.buttons,children:[(0,r.jsx)(i.Z,{className:"button button--primary button--outline button--lg",to:"./overview",children:"Documentations \uD83D\uDCD6"}),(0,r.jsx)(i.Z,{className:" button button--info button--outline button--lg",href:"pathname:///../?new",target:"_blank",children:"New Project \u2728"})]})})})})]})}var L=s("2188");function D(){let{siteConfig:e}=(0,n.Z)();return(0,r.jsx)("header",{className:(0,a.Z)("hero","heroBanner_qdFl"),children:(0,r.jsxs)("div",{className:"container",children:[(0,r.jsx)("h1",{className:"hero__title",children:e.title}),(0,r.jsx)("p",{className:"hero__subtitle",children:e.tagline}),(0,r.jsx)("div",{className:"buttons_AeoN",children:(0,r.jsx)(i.Z,{className:"tryButton_B7Kd button button--secondary button--lg",href:"pathname:///../",children:"Start Coding \u26A1"})}),(0,r.jsxs)("div",{className:"description_meEo",children:["An open-source ",(0,r.jsx)("strong",{children:"client-side"})," playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and"," ",(0,r.jsx)(i.Z,{to:"./languages",children:(0,r.jsx)("strong",{children:"90+ languages/frameworks"})}),"."]}),(0,r.jsx)("div",{className:"eaHomepage_CKX0",children:(0,r.jsx)("div",{className:"flat","data-ea-publisher":"livecodesio","data-ea-type":"text","data-ea-manual":"true"})})]})})}function E(){let{siteConfig:e}=(0,n.Z)();return(0,l.useEffect)(()=>{(0,L.kA)()},[]),(0,r.jsxs)(o.Z,{description:e.tagline,children:[(0,r.jsx)(D,{}),(0,r.jsx)("main",{children:(0,r.jsx)(P,{})})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return n}});var r=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:r,loading:i="lazy",view:o}=t,a=r||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)Z(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(n(t)),m=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i),d.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let h=!1,g="Cannot call API methods after calling `destroy()`.",p=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let r="livecodes",n=l.querySelector(`iframe.${r}`),o=n||document.createElement("iframe");o.classList.add(r),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?Z(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===m&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===m&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},m))}),o.onload=()=>{e(o)},o.src=d.href,n||l.appendChild(o)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===p.contentWindow&&s.origin===m&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),f=()=>h?Promise.reject(g):new Promise(async e=>{j.settled&&e(),p.contentWindow?.postMessage({type:"livecodes-load"},m),await j,e()}),x=(e,t)=>new Promise(async(s,r)=>{if(h)return r(g);await f();let i=N();addEventListener("message",function t(n){if(n.source===p.contentWindow&&n.origin===m&&n.data?.type==="livecodes-api-response"&&n.data?.id===i&&n.data.method===e){removeEventListener("message",t);let e=n.data.payload;e?.error?r(e.error):s(e)}}),p.contentWindow?.postMessage({method:e,id:i,args:t},m)}),v={},b=["load","ready","code","console","tests","destroy"],y=(e,t)=>{if(h)throw Error(g);return b.includes(e)?(x("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},w=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=w(e.data?.type??"");if(e.source!==p.contentWindow||e.origin!==m||!t||!v[t])return;let s=e.data?.payload;v[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(v).forEach(e=>{e.length=0}),p?.remove?.(),h=!0};function Z(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await f(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let N=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>f(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>y("code",e),watch:y,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),r=1;r<t;r++)s[r-1]=arguments[r];return x("exec",[e,...s])},destroy:()=>j.settled?x("destroy").then(S):h?Promise.reject(g):(S(),Promise.resolve())}}function n(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:n={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let m=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,r]=t;void 0!==r&&e.searchParams.set(s,String(r))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof n&&null==n.mode?n.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof n&&null==n.view&&"headless"!==c?n.view=c:e.searchParams.set("view",c)),"string"==typeof n)try{new URL(n),e.searchParams.set("config",encodeURIComponent(n))}catch{throw Error('"config" is not a valid URL or configuration object.')}else n&&"object"==typeof n&&Object.keys(n).length>0&&(n.title&&"Untitled Project"!==n.title&&e.searchParams.set("title",n.title),n.description&&n.description.length>0&&e.searchParams.set("description",n.description),m.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(n))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{m.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=m.toString(),e.href}}}]);