@salesforcedevs/sfdocs-remark-lwc-playground-plugin

LWC Component Playground Plugin

This plugin transforms component playground markdown syntax to doc-component-playground HTML elements. It allows embedding interactive component example previews into documentation, enabling users to explore component behavior dynamically.

Setup

To use this plugin, set the PLAYGROUND_APP_URL environment variable to the base URL of your playground application.

Example:

export PLAYGROUND_APP_URL='https://example-lwc-playground.com'

Install & Build

yarn install && yarn build

Usage

LWC Model with Lightning Namespace

::component-playground{component="button" model="lwc" namespace="lightning"}

Aura Model with Lightning Namespace

::component-playground{component="accordionSection" model="aura" namespace="lightning"}

Transformed HTML for LWC Namespace

<doc-component-playground component="button" model="lwc" namespace="lightning" playground-app-url=${playgroundAppUrl}>
</doc-component-playground>

Publish

To test the plugin code, publish an alpha package using the following command:

yarn publish --new-version 1.0.0-alpha --tag alpha

To publish the actual package:

yarn publish