"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6910"],{2340:function(e,s,i){i.r(s),i.d(s,{default:()=>h,frontMatter:()=>d,metadata:()=>o,assets:()=>n,toc:()=>c,contentTitle:()=>r});var o=JSON.parse('{"id":"api/index","title":"LiveCodes","description":"A Code Playground That Just Works!","source":"@site/docs/api/index.md","sourceDirName":"api","slug":"/api/","permalink":"/docs/api/","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/index.md","tags":[],"version":"current","frontMatter":{}}'),t=i("5893"),l=i("65");let d={},r="LiveCodes",n={},c=[{value:"A Code Playground That Just Works!",id:"a-code-playground-that-just-works",level:2},{value:"Quick Start",id:"quick-start",level:3},{value:"Standalone App",id:"standalone-app",level:4},{value:"Embedded Playground",id:"embedded-playground",level:4},{value:"Self-hosted",id:"self-hosted",level:4},{value:"Feature Summary",id:"feature-summary",level:2},{value:"LiveCodes SDK",id:"livecodes-sdk",level:2},{value:"Installation",id:"installation",level:3},{value:"Usage",id:"usage",level:3},{value:"Documentations",id:"documentations",level:2},{value:"Updates",id:"updates",level:2},{value:"Feedback",id:"feedback",level:2},{value:"Contribution",id:"contribution",level:2},{value:"Credits",id:"credits",level:2},{value:"Third Party Packages",id:"third-party-packages",level:2},{value:"License",id:"license",level:2},{value:"Sponsor",id:"sponsor",level:2}];function a(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"livecodes",children:"LiveCodes"})}),"\n",(0,t.jsx)(s.p,{children:"A Code Playground That Just Works!"}),"\n",(0,t.jsx)("p",{align:"center",children:(0,t.jsx)("img",{width:"300",src:"https://dev.livecodes.io/docs/img/livecodes-logo.svg"})}),"\n",(0,t.jsxs)(s.p,{children:["A ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/",children:"feature-rich"}),", open-source, ",(0,t.jsx)(s.strong,{children:"client-side"})," code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/languages/",children:"90+ languages/frameworks"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.a,{href:"https://status.livecodes.io",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/upptime/master/api/live-codes/uptime.json",alt:"LiveCodes: uptime status"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/github/v/release/live-codes/livecodes?label=app",alt:"LiveCodes: app version"})}),"\n",(0,t.jsx)(s.a,{href:"https://www.npmjs.com/package/livecodes",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/npm/v/livecodes",alt:"LiveCodes: npm version"})}),"\n",(0,t.jsx)(s.a,{href:"https://www.npmjs.com/package/livecodes",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/npm/dm/livecodes",alt:"LiveCodes: npm downloads"})}),"\n",(0,t.jsx)(s.a,{href:"https://www.jsdelivr.com/package/npm/livecodes",children:(0,t.jsx)(s.img,{src:"https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded",alt:"LiveCodes: jsdelivr downloads"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/languages/",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/languages-96-blue",alt:"LiveCodes: languages"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white",alt:"LiveCodes: docs"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/llms.txt",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white",alt:"LiveCodes: llms.txt"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/llms-full.txt",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white",alt:"LiveCodes: llms-full.txt"})}),"\n",(0,t.jsx)(s.a,{href:"https://www.codacy.com/gh/live-codes/livecodes/dashboard?utm_source=github.com&utm_medium=referral&utm_content=live-codes/livecodes&utm_campaign=Badge_Grade",children:(0,t.jsx)(s.img,{src:"https://app.codacy.com/project/badge/Grade/3d39f15618e048db9d13c2a0e8002b33",alt:"Codacy Badge"})}),"\n",(0,t.jsx)(s.a,{href:"https://app.lokalise.com/public/34958094667a72e9454592.95108106/",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/translated.json",alt:"Lokalise: translated"})}),"\n",(0,t.jsx)(s.a,{href:"https://app.lokalise.com/public/34958094667a72e9454592.95108106/",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/languages.json",alt:"Lokalise: UI languages"})}),"\n",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/LICENSE",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/github/license/live-codes/livecodes",alt:"license - MIT"})}),"\n",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/github/stars/live-codes/livecodes?style=flat&logo=github",alt:"LiveCodes: GitHub repo"})}),"\n",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/github/forks/live-codes/livecodes?style=flat&logo=github",alt:"LiveCodes: GitHub repo"})}),"\n",(0,t.jsx)(s.a,{href:"https://x.com/livecodes_io",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/Follow%20@livecodes__io-575757?logo=x",alt:"Follow us on X (formerly Twitter)"})})]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io",children:"Try it now on livecodes.io"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs",children:"Documentations"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/why",children:"What makes LiveCodes different?"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://dev.livecodes.io/docs/img/screenshots/livecodes-overview.jpg",alt:"LiveCodes list of languages screenshot"})}),"\n",(0,t.jsx)(s.h2,{id:"a-code-playground-that-just-works",children:"A Code Playground That Just Works!"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"No servers to configure (or pay for!)"}),"\n",(0,t.jsx)(s.li,{children:"No databases to maintain (or pay for!)"}),"\n",(0,t.jsx)(s.li,{children:"No installs"}),"\n",(0,t.jsx)(s.li,{children:"No configuration files"}),"\n",(0,t.jsx)(s.li,{children:"No build steps"}),"\n",(0,t.jsx)(s.li,{children:"No subscription fees (free and open-source)"}),"\n",(0,t.jsx)(s.li,{children:"No account required *"}),"\n",(0,t.jsx)(s.li,{children:"No limits for usage (unlimited private projects)"}),"\n",(0,t.jsx)(s.li,{children:"90+ languages/frameworks/processors"}),"\n",(0,t.jsx)(s.li,{children:"Large set of features and integrations"}),"\n",(0,t.jsx)(s.li,{children:"Import code from a wide variety of sources"}),"\n",(0,t.jsx)(s.li,{children:"Use modules from npm, deno.land/x, jsr, GitHub, and others"}),"\n",(0,t.jsx)(s.li,{children:"Easily embed it in your web pages"}),"\n",(0,t.jsx)(s.li,{children:"It runs in the browser (client-side)"}),"\n"]}),"\n",(0,t.jsxs)("sub",{children:["* GitHub account is required only for features that use ",(0,t.jsx)("a",{href:"https://livecodes.io/docs/features/github-integration",target:"_blank",rel:"noopener",children:"GitHub Integration"}),"."]}),"\n",(0,t.jsx)(s.h3,{id:"quick-start",children:"Quick Start"}),"\n",(0,t.jsx)(s.h4,{id:"standalone-app",children:"Standalone App"}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Go to ",(0,t.jsx)(s.a,{href:"https://livecodes.io",children:"livecodes.io"})]}),"\n"]}),"\n",(0,t.jsxs)(s.p,{children:["... and enjoy all the ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/",children:"features"}),"!"]}),"\n",(0,t.jsx)(s.h4,{id:"embedded-playground",children:"Embedded Playground"}),"\n",(0,t.jsx)(s.p,{children:"Add this code to your page:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-html",children:"<div id=\"container\"></div>\n<script type=\"module\">\n  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';\n\n  createPlayground('#container', {\n    params: {\n      markdown: '# Hello LiveCodes!',\n      css: 'h1 {color: dodgerblue;}',\n      js: 'console.log(\"Hello, from JS!\");',\n      console: 'open',\n    },\n  });\n<\/script>\n"})}),"\n",(0,t.jsxs)("sup",{children:["Check documentations for ",(0,t.jsx)("a",{href:"https://livecodes.io/docs/features/embeds",target:"_blank",rel:"noopener",children:"Embedded Playgrounds"}),"."]}),"\n",(0,t.jsx)(s.h4,{id:"self-hosted",children:"Self-hosted"}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Download a ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/releases",children:"release"})]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Put it on a static file server (for free!) ",(0,t.jsxs)("sup",{children:[(0,t.jsx)("a",{href:"https://pages.cloudflare.com/",target:"_blank",rel:"noopener",children:"1"}),", ",(0,t.jsx)("a",{href:"https://vercel.com/",target:"_blank",rel:"noopener",children:"2"}),", ",(0,t.jsx)("a",{href:"https://www.netlify.com/",target:"_blank",rel:"noopener",children:"3"}),", ",(0,t.jsx)("a",{href:"https://firebase.google.com/",target:"_blank",rel:"noopener",children:"4"}),", ",(0,t.jsx)("a",{href:"https://pages.github.com/",target:"_blank",rel:"noopener",children:"5"})]})]}),"\n",(0,t.jsxs)("sup",{children:["Check the guide for ",(0,t.jsx)("a",{href:"https://livecodes.io/docs/features/self-hosting",target:"_blank",rel:"noopener",children:"self-hosting"})," (including the built-in setup to deploy to GitHub Pages)."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"... and it just works!"}),"\n",(0,t.jsx)(s.h2,{id:"feature-summary",children:"Feature Summary"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["A wide range of ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/languages/",children:"language support"})," (90+ languages/frameworks/processors)"]}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"Powerful Editor"})}),"\n",(0,t.jsx)(s.li,{children:"Mobile-friendly"}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/external-resources",children:"External resources/libraries"})}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/module-resolution",children:"Import modules"})," from npm, deno.land/x, jsr, GitHub and others"]}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/code-prefill",children:"Code Pre-fill"})}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/import",children:"Import"}),"/",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/export",children:"Export"})," ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/projects",children:"projects"})]}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/share",children:"Share"})}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/embeds",children:"Embed the playground"})," in any web page"]}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/display-modes",children:"Display modes"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/deploy",children:"Deploy"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/templates",children:"Starter Templates"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/assets",children:"Assets"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/themes",children:"Themes"})}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/tools-pane",children:"Dev Tools"})," (",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/console",children:"console"}),", ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/compiled-code",children:"compiled code viewer"}),", ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/tests",children:"test runner"}),")"]}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/code-format",children:"Code formatting"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/intellisense",children:"Intellisense"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/ai",children:"AI Code Assistant \uD83E\uDE84"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/lite",children:"Lite mode"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/read-only",children:"Read-only mode"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/broadcast",children:"Broadcast"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/sync",children:"Sync"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/backup-restore",children:"Backup/Restore"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/why#client-side",children:"Client-side!"})}),"\n",(0,t.jsxs)(s.li,{children:["Very ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/",children:"configurable"})]}),"\n",(0,t.jsx)(s.li,{children:"Developer-friendly build-free environment"}),"\n",(0,t.jsxs)(s.li,{children:["Powerful ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/",children:"SDK"})," (available for ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts",children:"vanilla JavaScript, TypeScript"}),", ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/react",children:"React"}),", ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/vue",children:"Vue"})," and ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/svelte",children:"Svelte"}),")"]}),"\n",(0,t.jsxs)(s.li,{children:["Comprehensive ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/",children:"Documentations"})]}),"\n",(0,t.jsxs)(s.li,{children:["Focused on ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/security",children:"privacy and security"})]}),"\n",(0,t.jsxs)(s.li,{children:["Free and ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/license",children:"Open-Source"})]}),"\n"]}),"\n",(0,t.jsxs)(s.p,{children:["For details check the ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/",children:"full list of features"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"livecodes-sdk",children:"LiveCodes SDK"}),"\n",(0,t.jsx)(s.p,{children:"The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds."}),"\n",(0,t.jsxs)(s.p,{children:["The SDK is provided as a light-weight (",(0,t.jsx)(s.a,{href:"https://bundlephobia.com/package/livecodes",children:"less than 5kb gzipped"}),"), zero-dependencies ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/#npm-package",children:"npm package"}),", that is also available from ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/#cdn",children:"CDNs"}),". It can be used to create playgrounds with a wide variety of ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/configuration-object.md",children:"configurations"})," and ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts.md#embed-options",children:"embed options"}),". In addition, ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts.md#sdk-methods",children:"SDK methods"})," allow programmatic communication and control of the playgrounds during runtime."]}),"\n",(0,t.jsx)(s.h3,{id:"installation",children:"Installation"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{children:"npm i livecodes\n"})}),"\n",(0,t.jsx)(s.h3,{id:"usage",children:"Usage"}),"\n",(0,t.jsxs)(s.p,{children:["Example: (",(0,t.jsx)(s.a,{href:"https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQDKAIgNJH4C22IANCPgQMYBOEADpNgHaIQjEAAtYAQ1yCAPDVhhxRViPHsC8gLwAdEAFUAKgDEAtAA4dRAPQA+LX1nzFfcXO0g0EWAHcu2dmAtWfjBYPjA3LwhcMBENfA9WWGNI6JEGIgg+KAhxaGM2XNgNAEYAOgAGCxthETAaaABBMDA1QWhxPgBzN1DA9oICNx1hBU6CRABtAF0mcVZIDABRXCg-QTZOHmEaVQBrAFcuRFB2rv3xTvgkWvrhILDQsBkVtAzcN3uFTNh2HWtpSwvawgAC+TAIYAAnnBjiBTp1zpdBKwBndgo9BKDwRxuE8ECcOgiLlcQAArcRocQbXFoh5hQQQGi+fxEYBKdgSEIABXakM67Gw+z4uCIIKIADMBTQiAByaDoWBBFgygDcWl+fHVdg4nNgPPEfIFQtwAAoZQBiT7ib7sGXpYBavhEJT8cUQToIVmO53OnbsA5cT0OjU+n3wxGwT0yv27XDYLx8O3e0MuulgKPmogACVg0Gg2CIAHU-NBcABCJMhn1g5M1qsebxRjkEfbQMCVuwggCUao1WJAEOhhDE8nGCGm2M2YDHE5AKIIXOb8kxTC4AsSAz8M5mc-2EOwNBI8kgXTHwDBIEZzOnxwvUK4hFvTBCELPcMJEcE98IOK2TE+GJIP2GBqBA-CCAAzBBIzYNg0BvqE4gAEZwFISC5NAwhzAsJL3AQcHwOCChgHuyL5uoUggiCQA",children:"open in LiveCodes"}),")"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', {\n  config: {\n    markup: {\n      language: 'markdown',\n      content: '# Hello World!',\n    },\n  },\n  view: 'result',\n});\n"})}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts.md",children:"JavaScript SDK"})," is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/react.md",children:"React"})," and ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/vue.md",children:"Vue"}),"). The SDK can be used in ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/svelte.md",children:"Svelte"})," directly without wrappers. ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts.md#typescript-types",children:"TypeScript support"})," provides type-safety and a great developer experience."]}),"\n",(0,t.jsxs)(s.p,{children:["React SDK example: (",(0,t.jsx)(s.a,{href:"https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBKsAhgMZhEDKAIgNJH4C22IANCPgZQE4QADpGwA7RCC4gAFhVySAPK1hhyRSjPL8CqgLwAdEAFUAKgDEAtAA4jRAPQA+A2OWr1Y8isMg0EWADuQtj8YHaU4mCwYmA+ARC4YDJ6+H6UsJbxiTKcRBBiUBDk0JZ8xbB6AIwAdAAMdk7SMmCs0ACCYGA6ktDkYgDmPtHhvQQEPkbSav0EiADaALrcVJAYAKK4UCGSfIIi0qzaANYArkKIoL0DJ+T98EjNrdIRMdFgkiAAvtwEYACecAuICu-Rud0klDGz0ibw+3xAu2E7wQlz6oNu9xAACsCAAPaGvGKSCCsYKhIioDA4XhEABm-GwrCIAHJoOhYBFePZ+BRqMyANwGfguIUuF6-DTiWkQfpEPREYCisREIiHfinIQIBVKlUqkFg2Ba5lqo64bABMTMzg63UvKIxI0AYiIAAlYNBoNgiAB1ELQXAAQitNu+Ss+guFYnFNAACr0-v0GScxLg5UQABQASjljiIikpWDwhElYmlg2ALzLnyIfkCPh5BBO0DCIAcjgjLlguLJNHwtPITdj8cT2GTuA7EnhvwBhDkqlmCEWPwESIXS5AkIIMYbqg+3CEDPSYxCa6WG5Ov0ZtFUkAGC+A8JJPfv8P+QkIF1fhDA9+BaINkhvoQK77NwdqwkgXzcBgOgQOIkgAMwIVM2DYNAv7ROQABGcAKEgxTQNIKzshC4gEGh8A-GoYAXhCnq6AonyfEAA",children:"open in LiveCodes"}),")"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-jsx",children:"import LiveCodes from 'livecodes/react';\n\nconst config = {\n  markup: {\n    language: 'markdown',\n    content: '# Hello World!',\n  },\n};\nconst Playground = () => <LiveCodes config={config} view=\"result\" />;\nexport default Playground;\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Vue SDK example: (",(0,t.jsx)(s.a,{href:"https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBqArrEQMoAiA0kfgLbYgA0I+BAxgE4QAHSNgB2iEOxAALWAENc4gDxNYYWUW5TZvAqoC8AHRABVACoAxALQAOI0QD0APgMjlq9SNkrDINBFgA7gLYvGB23KJgsCJgPgEQuGBSevh+3LCW8YlSbEQQIlAQstCWPMWwegCMAHQADHZOklJgTNAAgmBgOuLQsiIA5j7R4b0EBD5Gkmr9BIgA2gC6HLLckBgAorhQIeI8-EKSTNoA1mQCiKC9A2Sy-fBIza2SETHRYOIgAL4cBGAAnnALiArv0bndxNwxs9Im8Pt8QHtBO8EJc+qDbvdfBRoa8YkpEUIiLowGdnLwXEQ8kxgqEiKgMDguEQAGa8bBMIgAcmg6FgES49jQFE5AG4DOSROKKRpRL8ZSJmRB+kQ9ERgFKRJTKUdeKcBAg1RqtVqQWDYAbOTrjrhsAERJy2EbjfKojELQBiIgACVg0Gg2CIAHUQtBcABCB1OynfJ2fMUSxT2AlgMkuDWKKLU3pRVOaoiKelYPCEIgIF6KwZGctKux+QI+XiEMjQMIgBy5xOZgTZ2C5r4-f5wAgyVSzBCLH58JFjicgSEEAAKjeJHw4AjZ6TGIRnSznZF+7KoqkgAzHwHhEGpITAZ-h-wEhAud8IN6Bpox4nvhCnBw4L1dyISPCGA6BAojiAAzBBUzYNg0BniA0SyAARnAChIMU0CSCsayYi8BBwfAA6yCSY5zv6ugKJ8nxAA",children:"open in LiveCodes"}),")"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-html",children:"<script setup>\n  import LiveCodes from 'livecodes/vue';\n\n  const config = {\n    markup: {\n      language: 'markdown',\n      content: '# Hello World!',\n    },\n  };\n<\/script>\n\n<template>\n  <LiveCodes :config=\"config\" view=\"result\" />\n</template>\n"})}),"\n",(0,t.jsx)(s.p,{children:"In addition, the SDK allows creating links to playgrounds:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"import { getPlaygroundUrl } from 'livecodes';\n\nconst url = getPlaygroundUrl({\n  config: {\n    markup: {\n      language: 'markdown',\n      content: '# Hello World!',\n    },\n  },\n});\n\nconsole.log(url);\n"})}),"\n",(0,t.jsxs)(s.p,{children:["See ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/",children:"SDK docs"})," for more details."]}),"\n",(0,t.jsx)(s.h2,{id:"documentations",children:"Documentations"}),"\n",(0,t.jsxs)(s.p,{children:["Comprehensive documentations for ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/",children:"features"}),", ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/getting-started",children:"getting started"}),", ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/",children:"configuration"})," and ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/",children:"SDK"})," are available on:"]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/",children:"https://livecodes.io/docs/"})}),"\n",(0,t.jsxs)(s.p,{children:["The documentations include demos, code samples, screenshots, ",(0,t.jsx)(s.a,{href:"https://livecodes.io/stories",children:"Storybook"})," and ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts#typescript-types",children:"TypeScript types"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"updates",children:"Updates"}),"\n",(0,t.jsx)(s.p,{children:"Keep up with the latest changes:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Twitter/X: ",(0,t.jsx)(s.a,{href:"https://twitter.com/livecodes_io",children:"@livecodes_io"})]}),"\n",(0,t.jsxs)(s.li,{children:["Blog: ",(0,t.jsx)(s.a,{href:"https://blog.livecodes.io/",children:"blog.livecodes.io"})]}),"\n",(0,t.jsxs)(s.li,{children:["Development build: ",(0,t.jsx)(s.a,{href:"https://dev.livecodes.io/",children:"dev.livecodes.io"})]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"feedback",children:"Feedback"}),"\n",(0,t.jsx)(s.p,{children:"We welcome feedback!"}),"\n",(0,t.jsxs)(s.p,{children:["Please start a new ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/issues/new/choose",children:"issue"})," or ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/discussions/new",children:"discussion"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["For security reports please refer to ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/SECURITY.md",children:"SECURITY.md"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["You may also reach out to us using the ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/contact",children:"contact form"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"contribution",children:"Contribution"}),"\n",(0,t.jsx)(s.p,{children:"Contributions are welcome and highly appreciated."}),"\n",(0,t.jsxs)(s.p,{children:["A huge shout-out to our wonderful ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/graphs/contributors",children:"contributors"}),"! Your hard work makes all the difference!"]}),"\n",(0,t.jsxs)(s.p,{children:["Please refer to the ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.md",children:"contribution guide"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"credits",children:"Credits"}),"\n",(0,t.jsx)(s.p,{children:"LiveCodes uses services that are generously provided by:"}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://pages.cloudflare.com/",target:"_blank",title:"Cloudflare Pages",children:(0,t.jsx)("img",{alt:"Cloudflare Pages",width:"200",src:"https://dev.livecodes.io/docs/img/credits/cloudflare-pages.svg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://www.jsdelivr.com/",target:"_blank",title:"jsDelivr",children:(0,t.jsx)("img",{alt:"jsDelivr",width:"200",src:"https://dev.livecodes.io/docs/img/credits/jsdelivr.svg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://esm.sh/",target:"_blank",title:"esm.sh",children:(0,t.jsx)("img",{alt:"esm.sh",width:"200",src:"https://dev.livecodes.io/docs/img/credits/esm.sh.png"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://unpkg.com/",target:"_blank",title:"unpkg",children:(0,t.jsx)("img",{alt:"unpkg",width:"200",src:"https://dev.livecodes.io/docs/img/credits/unpkg.png"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://codeium.com/",target:"_blank",title:"Codeium",children:(0,t.jsx)("img",{alt:"Codeium",width:"200",src:"https://dev.livecodes.io/docs/img/credits/codeium.svg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://bundlejs.com/",target:"_blank",title:"bundlejs",children:(0,t.jsx)("img",{alt:"bundlejs",width:"200",src:"https://dev.livecodes.io/docs/img/credits/bundlejs.jpg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://dpaste.com/",target:"_blank",title:"dpaste",children:(0,t.jsx)("img",{alt:"dpaste",width:"200",src:"https://dev.livecodes.io/docs/img/credits/dpaste.png"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://github.com/",target:"_blank",title:"GitHub",children:(0,t.jsx)("img",{alt:"GitHub",width:"200",src:"https://dev.livecodes.io/docs/img/credits/github.png"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://netlify.com/",target:"_blank",title:"Netlify",children:(0,t.jsx)("img",{alt:"Netlify",width:"200",src:"https://dev.livecodes.io/docs/img/credits/netlify.svg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://www.sonarsource.com/products/sonarcloud/",target:"_blank",title:"SonarCloud",children:(0,t.jsx)("img",{alt:"SonarCloud",width:"200",src:"https://dev.livecodes.io/docs/img/credits/sonarcloud.svg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://www.codacy.com/",target:"_blank",title:"Codacy",children:(0,t.jsx)("img",{alt:"Codacy",width:"200",src:"https://dev.livecodes.io/docs/img/credits/codacy.svg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://bundlewatch.io/",target:"_blank",title:"BundleWatch",children:(0,t.jsx)("img",{alt:"BundleWatch",width:"200",src:"https://dev.livecodes.io/docs/img/credits/bundlewatch.svg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://www.browserstack.com/",target:"_blank",title:"BrowserStack",children:(0,t.jsx)("img",{alt:"BrowserStack",width:"200",src:"https://dev.livecodes.io/docs/img/credits/browserstack.svg"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsxs)("p",{children:[(0,t.jsx)("a",{href:"https://lokalise.com/",target:"_blank",title:"Lokalise",children:(0,t.jsx)("img",{alt:"Lokalise",width:"200",src:"https://dev.livecodes.io/docs/img/credits/lokalise.png"})}),(0,t.jsx)("br",{}),(0,t.jsx)("br",{})]}),"\n",(0,t.jsx)(s.h2,{id:"third-party-packages",children:"Third Party Packages"}),"\n",(0,t.jsxs)(s.p,{children:["Packages used by LiveCodes and their licenses are ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.md",children:"listed here"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"license",children:"License"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/HEAD/LICENSE",children:"MIT"})," License \xa9 ",(0,t.jsx)(s.a,{href:"https://github.com/hatemhosny",children:"Hatem Hosny"})]}),"\n",(0,t.jsx)(s.h2,{id:"sponsor",children:"Sponsor"}),"\n",(0,t.jsx)(s.p,{children:"LiveCodes is free and open-source. The app does not contain ads or require subscription. It allows unlimited usage without any restrictions."}),"\n",(0,t.jsx)(s.p,{children:"By sponsoring LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community."}),"\n",(0,t.jsxs)(s.p,{children:["Please consider ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/sponsor",children:"becoming a sponsor"}),"."]})]})}function h(e={}){let{wrapper:s}={...(0,l.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},65:function(e,s,i){i.d(s,{Z:function(){return r},a:function(){return d}});var o=i(7294);let t={},l=o.createContext(t);function d(e){let s=o.useContext(l);return o.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:d(e.components),o.createElement(l.Provider,{value:s},e.children)}}}]);