Use SDK with React, Vue, Svelte, Solid, Preact, and Web Components. sdkReady callback pattern, reactive props, and framework-specific setup. Load this skill when embedding LiveCodes in a framework application.
Create and configure embedded playgrounds using createPlayground(), EmbedOptions, container setup, loading modes (eager/lazy/click), and appUrl for self-hosted instances. Load this skill when embedding LiveCodes in web pages, configuring playground containers, or setting up SDK integration.
Open-source, client-side code playground supporting 90+ languages/frameworks. Runs entirely in the browser with SDK for embedding. Entry point for all LiveCodes skills.
Configure playground behavior through Config object, query parameters, EmbedOptions, editor settings, processors, external resources, and custom settings. Load this skill when setting up project content, configuring CSS processors, or customizing display.
Configure how the playground is displayed: full, focus, simple, lite, editor, codeblock, and result modes. Load this skill when choosing display mode for embeddings, configuring read-only views, or showing only result or editor.
Quick start for standalone app at livecodes.io, embedding playgrounds with CDN or npm, and self-hosting basics. Load this skill for initial setup and basic usage patterns.
Use the "Preview in LiveCodes" GitHub Action to generate preview playground links for pull request code changes. Automates playground creation and PR comments.
Run playground without visible UI using SDK methods directly. Load this skill when building Markdown compilers, code formatters, or tools that need compiled output without display.