1.8 KiB
Code Prefill
import LiveCodes from '../../src/components/LiveCodes.tsx';
There are many ways to pre-fill code into playgrounds. This is generally achieved either by the SDK or using query params.
Prefill using SDK
When creating an embedded playground, the following embed options#embed-options) allow prefill with code:
config
EmbedOptions.config#config)
loads a configuration object (or a URL to JSON file representing the configuration object)
<LiveCodes config={{ markup: { language: 'html', content: '
Hello World!
' }, style: { language: 'css', content: 'h1 { color: blue; }' }, }}import
EmbedOptions.import#import)
allows importing from many sources.
Examples:
Import GitHub directory:
Import shared project:
template
EmbedOptions.template#template)
loads one of the starter templates.
Prefill using query params
Query parameters can provide easy and powerful ways for configuring the playground.
Example:
{'https://livecodes.io/?md=**Hello World!**'}<LiveCodes params={{ md: 'Hello World!' }}>
Auto-Prefill from page DOM
TODO...