DOCSEARCHbyAlgolia
Submit Docs

LiveCodes Documentation

repository·develop·Indexed 23 days ago

https://github.com/live-codes/livecodes

An open-source, client-side code playground supporting over 90 languages and frameworks without server-side configuration. Features include a JavaScript SDK for embedding playgrounds in web pages, specialized wrappers for React and Vue, and a PHP server implementation for self-hosting on static file servers or shared hosting.

Tokens
173.6K
Snippets
505
Records
996
Agent score
81%

What's inside LiveCodes

  1. Overview of the LiveCodes Export System

    develop

    The LiveCodes export system allows users to export projects into various formats for local use or external platforms. The system is architected with a main dispatcher that routes export requests to specific handlers, which are lazy-loaded to optimize the initial bundle size.

    Supported Export Types:

    TypeHandlerOutputDescription
    jsonexportJSON.json fileProject configuration
    srcexportSrc.zip fileSource files + result + config
    htmlexportHTML.html fileStandalone result page
    codepenexportCodepenCodePen URLPrefilled CodePen pen
    jsfiddleexportJsfiddleJSFiddle URLPrefilled JSFiddle
    githubGistexportGithubGistGist URLPublic GitHub gist

  2. Overview of LiveCodes deployment options

    develop

    LiveCodes is a client-side application that can be deployed as a static app to any CDN or static file server. If you require server-side services like short-URL sharing or the broadcast server, you must use a more complex setup.

    Available deployment targets:

    • GitHub Pages: For static app deployment (no secrets required).
    • FTP/SSH: For static app deployment to a remote server.
    • Docker: For full server-side services on a VPS (requires VPS_ENV and SSH secrets).
    • PHP: For full server-side services on shared hosting (requires PHP_ENV, MySQL secrets, and FTP/SSH credentials).

    All GitHub Actions workflows run automatically on pushes to the main branch or can be triggered manually from the Actions tab.

  3. Overview of LiveCodes features

    develop

    LiveCodes is an open-source, client-side code playground that runs entirely in the browser. It supports over 90 languages, frameworks, and processors, allowing for rapid prototyping without manual environment setup. Key capabilities include:

    • Powerful Editor: Features a highly customizable editor (similar to VS Code) with support for Emmet, keyboard shortcuts, code formatting, and Vim/Emacs bindings.
    • External Resources: Easily add NPM modules, Google Fonts, and external scripts/stylesheets via a dedicated UI.
    • Importing Code: Import code from GitHub (files, gists, or directories), GitLab, JS Bin, ZIP files, or raw web content.
    • Sharing & Exporting: Share projects via URLs or QR codes. Export projects as HTML, JSON, or ZIP files, or push to GitHub Gists, CodePen, or JSFiddle.
    • Embedding: Embed playgrounds into any website using a powerful SDK that supports communication between the host page and the playground.
    • Deployment: Deploy projects to public URLs for free via GitHub Pages.
    • Developer Tools: Built-in tools include a console, compiled code viewer, and a test runner.
    • Privacy: Projects are private by default; code stays in your browser unless you explicitly choose to share, export, broadcast, or sync it.

  4. Overview of LiveCodes capabilities

    develop

    LiveCodes is an open-source, client-side code playground that supports over 90 languages and frameworks. It is designed for two primary use cases:

    1. Standalone App: Use it as a complete, independent playground.
    2. Embedded: Integrate it into any existing web page.

    For developers looking to build custom integrations or communicate with embedded playgrounds, LiveCodes provides a powerful SDK.

  6. Mobile Support and Responsive Layout

    develop

    LiveCodes features a responsive layout designed to adapt to different screen sizes, allowing for code experimentation on mobile devices.

    Key mobile capabilities include:

    • Sharing and Synchronization: Projects created on mobile can be shared or synchronized across devices.
    • QR Code Sharing: You can share projects using QR codes for quick access on other devices.
    • Touch-friendly Editor: By default, LiveCodes uses CodeMirror 6 on mobile devices to provide a touch-optimized editing experience. This editor can be configured or changed via the editor settings.

  7. Run R in the browser with WebR

    develop

    LiveCodes uses WebR to execute R code directly in the browser via WebAssembly. This allows statistical programming to run on the user's machine without a dedicated R server. Supported R packages can be loaded using the standard library() function; they are hosted on a CDN at https://repo.r-wasm.org/ and do not require explicit installation steps.

    library(dplyr)

starwars %>% 
  filter(species == "Droid")

  9. Understand LiveCodes deployment workflows

    develop

    LiveCodes uses GitHub Actions to automate deployments to various targets whenever a push is made to the main branch. Most workflows are gated by repository variables to ensure they only run when intended (e.g., to prevent failures on forks).

    Workflow fileNameTriggerGuard
    deploy-ghpages.ymlDeploy to GitHub Pagespush to main(none — always runs)
    deploy-docker.ymlDeploy to Dockerpush to main, manualvars.VPS_ENV must be set
    deploy-php.ymlDeploy to PHPpush to main, manualvars.PHP_ENV must be set
    deploy-ftp.ymlDeploy to FTPpush to main, manualvars.PHP_ENV must NOT be set
    deploy-ssh.ymlDeploy via SSHpush to main, manualvars.PHP_ENV must NOT be set

  10. Available commands in the Command Menu

    develop

    The Command Menu covers most LiveCodes functionality, including:

    • UI Toggles: Show/hide editors, the result page, console, compiled code viewer, and tests.
    • Project Management: Load starter templates, open new projects, open saved projects, import, embed, deploy, and share.
    • Code Execution & Formatting: Run code or format code.
    • Settings: Change themes, editor settings, and toggle features like autorun or autosave.
    • Languages: Switch between supported programming languages.
    • Keyboard Shortcuts: Search for "Keyboard Shortcuts" within the menu to view the full list of available shortcuts.