headless-mode
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.
来源信息
- 仓库
- live-codes/livecodes
- 最近来源活动
- 2026年9月14日 12:04
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 1,517
- 分支
- 271
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- headless-mode
- description
- 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.
- metadata
- {"type":"core","library":"livecodes","library_version":"0.13.0"}
- requires
- ["sdk-embedding","sdk-methods"]
- sources
- ["live-codes/livecodes:docs/docs/sdk/headless.mdx"]
This skill builds on sdk-embedding and sdk-methods. Read them first for foundational concepts.
# LiveCodes — Headless Mode
Headless mode runs LiveCodes without any visible UI. Use SDK methods to compile code, get output, and react to events.
## Setup
```javascript
import { createPlayground } from 'livecodes';
// Create headless playground - container is optional
const playground = await createPlayground({
headless: true,
config: {
markup: { language: 'markdown', content: '# Hello World' },
},
});
// Use SDK methods
const code = await playground.getCode();
console.log(code.markup.compiled); // "<h1>Hello World</h1>"
console.log(code.result); // Result page HTML
```
## Core Patterns
### Markdown compiler
```javascript
import { createPlayground } from 'livecodes';
let playground;
async function compileMarkdown(markdown) {
if (!playground) {
playground = await createPlayground({
headless: true,
config: { autoupdate: false },
});
}
await playground.setConfig({
markup: { language: 'markdown', content: markdown },
});
const code = await playground.getCode();
return code.markup.compiled;
}
// Usage
const html = await compileMarkdown('# Hello\n\nWorld');
console.log(html); // "<h1>Hello</h1>\n<p>World</p>"
```
### React/JSX compiler
```javascript
import { createPlayground } from 'livecodes';
let playground;
async function compileJSX(jsxCode) {
if (!playground) {
playground = await createPlayground({
headless: true,
config: { autoupdate: false },
});
}
await playground.setConfig({
script: { language: 'react', content: jsxCode },
});
const code = await playground.getCode();
return code.script.compiled;
}
const compiled = await compileJSX(`
function App() {
return <h1>Hello</h1>;
}
`);
```
### Python interpreter
```javascript
import { createPlayground } from 'livecodes';
let playground;
async function runPython(code) {
if (!playground) {
playground = await createPlayground({
headless: true,
config: { autoupdate: true },
});
}
// Set up console listener before running
const outputs = [];
playground.watch('console', ({ method, args }) => {
outputs.push({ method, args });
});
await playground.setConfig({
script: { language: 'python', content: code },
});
// Python runs automatically with autoupdate: true
// Or: await playground.run();
return outputs;
}
// Usage
const outputs = await runPython('print("Hello from Python!")');
// [{ method: 'log', args: ['Hello from Python!'] }]
```
### Get result HTML
```javascript
async function getResultHTML(config) {
const playground = await createPlayground({
headless: true,
config: { ...config, autoupdate: false },
});
await playground.setConfig(config);
const code = await playground.getCode();
return code.result; // Result page HTML
}
```
### Watch for changes
```javascript
const playground = await createPlayground({
headless: true,
config: { autoupdate: false },
});
// Watch for compiled code changes
playground.watch('code', ({ code, config }) => {
console.log('Compiled:', code.script.compiled);
});
// Change config - watch callback fires
await playground.setConfig({
script: { language: 'typescript', content: 'const x: number = 1;' },
});
```
## Common Mistakes
## Headless vs Visible Mode
| Aspect | Visible | Headless |
| --------- | ---------------- | ------------------------ |
| Container | Required | Optional |
| UI | Shown | Hidden |
| Use case | User interaction | Programmatic compilation |
## When to Use Headless
- **Markdown/MDX compiler** — Get compiled HTML without display
- **Code formatter** — Use Prettier via LiveCodes
- **Language transpiler** — TypeScript → JavaScript, SCSS → CSS
- **Testing pipelines** — Run and verify code programmatically
- **Python/Ruby/Go interpreter** — Execute WASM languages and capture output
在 GitHub 查看