Work with 90+ supported languages, compilers, CSS processors, and WASM-compiled languages for markup, style, and script editors. Load this skill when configuring languages, setting up CSS processors, or working with WASM-based languages like Python, Ruby, or Go.

Import code from GitHub gists/files/repos, GitLab, URLs, DOM, and local files. Export projects as HTML, JSON, ZIP, or to external services. Load this skill when loading projects from external sources or exporting project state.

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.

Use the "Preview in LiveCodes" GitHub Action to generate preview playground links for pull request code changes. Automates playground creation and PR comments.

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 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.

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.

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.

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.

Use when adding or modifying WebXR, AR placement, VR immersion, headset controller input, or XR rendering modes in Tiny World Builder.

Use when visually testing Tiny World Builder UI, camera, ghost opacity, buildings, tile geometry, or frontend polish in the browser.

Use when changing Tiny World Builder's mode indicator, boot tool selection, or Esc-to-Select behaviour.

Use when changing the Tinyverse ground-surface race track, perimeter bridge loop, rally karts, or poser-surface show/hide hook.

Tinyverse collectibles lane — pack reveal, frozen islands, play-mode visits. Universe carousel is archived but code stays in repo.

Use when adding or changing Tiny World Builder tile/object repeat-click behavior, terrain stacking, floors/intensity, fences, rocks, walls, crops, or Monument Valley-like height/detail growth.

Use when editing the Tiny World Builder repo, especially tiny-world-builder.html, to preserve the static classic-script Three.js r185 app structure and local edit/reload workflow.

Use when adding or changing GLSL effects in Tiny World Builder — landscape water, waterfalls, foam, smoke, explosions, damage/wear overlays, or the reusable TinyShaderFX library. Covers where shaders live, the override relationship between LandscapeEngine.js and engine/landscape/*.js, and the procedural-noise toolkit.

Use when changing Tiny World Builder Settings modal tabs, panels, controls, rendering/world/material/crowd/AI settings, or settings accessibility.

Use when adding or changing persisted user state — settings defaults, audio, camera/orbit, panel positions, feature flags, and the in-app "Save Defaults" pipeline that snapshots localStorage into tinyworld-defaults.json. Also covers the inline-script regex gotcha that has burned us twice.

Use when changing Tiny World Builder renderer setup, shadows, smoke, voxel clouds, ghost board render cost, frame loop, or GPU performance.