Turn LLM responses into real UI Turn LLM responses into real UI — live.

Your model emits Markdown. Markdown-UI renders interactive components in real time.

Try Playground View on GitHub …
Live widgets

Use cases

How it works

  1. 1
    Prompt
    Ask your LLM to output Markdown with markdown-ui-widget blocks.
  2. 2
    Emit DSL
    Widgets like inputs, sliders, charts, quizzes—streamed in real time.
  3. 3
    Render
    Parse with marked + markedUiExtension and render via <MarkdownUI>.
🧡 Usage in svelte 
<!-- 1) Prompt your model -->

<!-- 2) Model emits Markdown + markdown-ui-widget blocks -->

<!-- 3) Render with MarkdownUI -->
<script>
  import { Marked } from 'marked'
  import { markedUiExtension } from '@markdown-ui/marked-ext'
  import { MarkdownUI } from '@markdown-ui/svelte'
  const marked = new Marked();
  marked.use(markedUiExtension);
  const html = marked.parse(markdown);
</script>

<MarkdownUI {html} />

Widget showcase

✉️

Text Input

Collect an email with placeholder and default.

🧩

Button Group

Toggle plans with a simple button group.

🌎

Dropdown

Select a region from a dropdown.

🧰

Multi-Select

Pick multiple tools used by your app.

⚙️

Slider

Adjust CPU resources with step control.

📝

Form

Simple deployment form with inputs and slider.

📈

Chart

Monthly revenue vs. target (line).

🥧

Pie Chart

Sales by product (pie).

❓

MCQ (basic)

Basic multiple-choice question.

✅

MCQ (feedback)

MCQ with correct/incorrect feedback.

✍️

Short Answer

Short answer without validation.

🧪

Short Answer (validated)

Short answer with correct value.

🧠

Short Answer (multiple)

Accept multiple correct answers.

🎯

Quiz

Mixed questions with scoring and progress.

Scroll horizontally to browse examples

⚙️ Toolbox: prompt + DSL

For the complete DSL, examples, and latest updates, copy from our GitHub repo: BlueprintLabIO/markdown-ui
# Markdown-UI DSL cheatsheet

```markdown-ui-widget
text-input email "Email Address" "Enter your email" "[email protected]"
```

```markdown-ui-widget
button-group plan ["Basic Plan" "Pro Plan" "Enterprise"] "Basic Plan"
```

```markdown-ui-widget
select region ["US East" "US West" "Europe"] "US East"
```

```markdown-ui-widget
select-multi tools [Docker "Redis Cache" "PostgreSQL DB"] [Docker]
```

```markdown-ui-widget
slider cpu 1 32 1 4
```

```markdown-ui-widget
form deployment "Deploy Now"
  text-input name "App Name"
  select env ["Development" "Production"] "Development"
  slider replicas 1 10 1 3
```

```markdown-ui-widget
chart-line
title: Monthly Revenue
height: 300
Month,Sales,Target
Jan,45000,50000
Feb,52000,50000
Mar,48000,55000
```

```markdown-ui-widget
multiple-choice-question q2 "Capital of France?" ["Paris" "Berlin" "Rome" "Madrid"] "Paris" true
```

```markdown-ui-widget
short-answer-question q4 "What is 2 + 2?" "Enter a number" "4" true
```

```markdown-ui-widget
quiz js-fundamentals "JavaScript Fundamentals Quiz"
showScore: true
showProgress: true
passingScore: 70
mcq q1 "What is JavaScript?" 10 ["Programming language" "Markup language" "Database"] "Programming language"
short-answer q2 "Name a JavaScript framework" 15 "Enter framework name" ["React" "Vue" "Angular" "Svelte"]
mcq q3 "JavaScript is typed as?" 5 ["Static" "Dynamic" "Both"] "Dynamic"
short-answer q4 "What does 'DOM' stand for?" 20 "Enter your answer" ["Document Object Model"]
```

Buttons are reachable by keyboard; copy to clipboard supported.

Open Source

Star us on GitHub, explore the docs and spec, and see the changelog.

GitHub Docs Spec Changelog Playground