livecodes/sdk-embedding

Embed interactive LiveCodes playgrounds into web pages with createPlayground.

1.5k|262|Updated Jan 10, 2021
One-click install
npx skills add https://github.com/live-codes/livecodes --skill livecodes-sdk-embedding
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: livecodes/sdk-embedding
Source: https://github.com/live-codes/livecodes/tree/main/.agents/skills/livecodes/sdk-embedding
Command: npx skills add https://github.com/live-codes/livecodes --skill livecodes-sdk-embedding

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Embed interactive LiveCodes playgrounds into web pages to enable in-page coding experiences.

Core Features & Use Cases

  • Embed with createPlayground('#container', options) to render editable editors in any page.
  • Configure via EmbedOptions, container setup, and loading modes (eager/lazy/click), plus appUrl for self-hosted deployments.
  • Use cases include tutorials, documentation, and sandbox demos on the client side.

Quick Start

Embed a LiveCodes playground into a page by calling createPlayground with a container selector and an options object.

Frequently Asked Questions about livecodes/sdk-embedding

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed an interactive code playground into a web page?

To embed a code playground into a web page, call the createPlayground function with a container selector and an options object to render editable editors directly in the page.

What loading modes are available when embedding a playground?

Available loading modes for embedding a playground include eager, lazy, and click. These modes control when the interactive editors initialize on the web page.

Can I configure an embedded playground for a self-hosted deployment?

Yes, you can configure an embedded playground for a self-hosted deployment by setting the appUrl option within the EmbedOptions during the createPlayground setup.

What are common use cases for embedding live code editors in documentation?

Embedding live code editors in documentation provides interactive tutorials and sandbox demos, enabling users to run and modify code directly within the page.

How do I set up the container element when integrating a web code editor?

When integrating a web code editor, set up the container element by passing a valid CSS selector string to createPlayground, which then renders the interactive environment inside that element.

Do I need additional dependencies to load a sandbox demo on the client side?

No additional dependencies are required to load a sandbox demo on the client side. The SDK provides the necessary scripts to render the playground directly in the browser.