{"id":30714451,"url":"https://github.com/BlueprintLabIO/markdown-ui","last_synced_at":"2025-09-03T05:02:59.390Z","repository":{"id":308805558,"uuid":"1034169144","full_name":"BlueprintLabIO/markdown-ui","owner":"BlueprintLabIO","description":"An open standard for rendering interactive widgets in plain Markdown.","archived":false,"fork":false,"pushed_at":"2025-08-27T01:24:06.000Z","size":8529,"stargazers_count":297,"open_issues_count":2,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-29T08:26:43.072Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://markdown-ui.blueprintlab.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlueprintLabIO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-08T00:56:53.000Z","updated_at":"2025-08-29T05:56:53.000Z","dependencies_parsed_at":"2025-08-08T02:42:03.583Z","dependency_job_id":"7ee42746-63e0-4303-8e49-b832e7729f54","html_url":"https://github.com/BlueprintLabIO/markdown-ui","commit_stats":null,"previous_names":["blueprintdesignlab/markdown-ui","blueprintlabio/markdown-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BlueprintLabIO/markdown-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueprintLabIO%2Fmarkdown-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueprintLabIO%2Fmarkdown-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueprintLabIO%2Fmarkdown-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueprintLabIO%2Fmarkdown-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlueprintLabIO","download_url":"https://codeload.github.com/BlueprintLabIO/markdown-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueprintLabIO%2Fmarkdown-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273392297,"owners_count":25097259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-03T05:01:26.080Z","updated_at":"2025-09-03T05:02:59.380Z","avatar_url":"https://github.com/BlueprintLabIO.png","language":"TypeScript","readme":"# Markdown UI\n**Turn static docs into interactive experiences—instantly.**\n\n✨ [Try the live demo](https://markdown-ui.com/) ✨\n\nTransform any Markdown into clickable UI that works everywhere. Write once, render interactive widgets in any framework.\n\n````markdown\n```markdown-ui-widget\nselect env [dev prod]\n```\n````\n\n## Why it's powerful\n\n- **AI-ready**: LLMs generate interactive flows and gather feedback, all in Markdown\n- **Built for humans and bots**: Works great typed by hand or produced with AI\n- **Readable everywhere**: Preview rich UI, but if unsupported, it's still legible Markdown\n- **Zero lock-in**: Pure spec—works with any Markdown parser + any UI framework\n\n## Get started in 30 seconds\n\n```bash\nnpm install @markdown-ui/react @markdown-ui/marked-ext\n```\n\n```javascript\nimport { MarkdownUI } from '@markdown-ui/react';\nimport { Marked } from 'marked';\nimport { markedUiExtension } from '@markdown-ui/marked-ext';\n\nconst marked = new Marked().use(markedUiExtension);\nconst html = marked.parse('```markdown-ui-widget\\nselect env [dev prod]\\n```');\n\n\u003cMarkdownUI html={html} /\u003e\n```\n\nPrefer Svelte or Vue? Use [`@markdown-ui/svelte`](https://www.npmjs.com/package/@markdown-ui/svelte) or [`@markdown-ui/vue`](https://www.npmjs.com/package/@markdown-ui/vue) instead. Same API, same magic.\n\n## What you can build\n\n**Buttons \u0026 choices**\n```markdown\nbutton-group plan [Basic Pro Enterprise] Basic\n```\n\n**Dropdowns \u0026 multi-select** \n```markdown\nselect region [\"US East\" \"US West\"] \"US East\"\nselect-multi tools [Docker \"Redis Cache\" Postgres] [Docker]\n```\n\n**Text \u0026 numbers**\n```markdown\ntext-input name \"Your name\" \"Enter name here\"\nslider cpu 1 32 1 4\n```\n\n**Complex forms**\n```markdown\nform deploy \"Launch\"\n  select env [\"Development\" \"Production\"] \"Development\"\n  slider replicas 1 10 1 3\n```\n\n**Interactive charts**\n```markdown\nchart-line\ntitle: Monthly Sales\nMonth,Sales,Target\nJan,100,120\nFeb,150,140\nMar,200,180\n```\n\n## How it works\n\n1. **Write** widgets in Markdown using simple DSL syntax\n2. **Parse** with our extension (or bring your own parser)  \n3. **Render** as interactive components in your framework\n4. **Listen** for events when users interact with widgets\n\nWorks with any Markdown parser + any UI framework. Zero lock-in.\n\n📚 **[View Full Documentation \u0026 Spec →](https://markdown-ui.com/spec)**\n\n## Available packages\n\n**Parsers** ✅\n- [`@markdown-ui/mdui-lang`](https://www.npmjs.com/package/@markdown-ui/mdui-lang) - Core DSL parser for converting widget syntax to JSON\n- [`@markdown-ui/marked-ext`](https://www.npmjs.com/package/@markdown-ui/marked-ext) - Marked.js extension with integrated parser\n\n**Renderers** ✅  \n- [`@markdown-ui/svelte`](https://www.npmjs.com/package/@markdown-ui/svelte) - Svelte components with full chart support\n- [`@markdown-ui/react`](https://www.npmjs.com/package/@markdown-ui/react) - React components with full chart support\n- [`@markdown-ui/vue`](https://www.npmjs.com/package/@markdown-ui/vue) - Vue components with full chart support\n\n\n## Copyable System Prompt For LLMs\n\n````text\nYou can embed interactive UI widgets in Markdown using fenced code blocks with language \"markdown-ui-widget\".\n\n## DSL Syntax Reference\n\n**Widget Types:**\n- text-input id \"label\" \"placeholder\" \"default\"\n- button-group id [\"Choice 1\" \"Choice 2\" ...] \"default\"\n- select id [\"Option A\" \"Option B\" ...] \"default\"  \n- select-multi id [\"Item 1\" \"Item 2\" ...] [\"default1\" \"default2\"]\n- slider id min max step default\n- form id \"Submit Label\" (multi-line with 2-space indented fields)\n- chart-line, chart-bar, chart-pie, chart-scatter (multi-line with CSV data)\n\n**Quoting Rules:**\n- Use quotes for ANY text containing spaces: \"User Name\", \"New York\"\n- Arrays support mixed quoting: [Simple \"Complex Item\" Another]\n- Required quotes: labels, placeholders, array items with spaces\n- Optional quotes: single words, numbers\n\n**Examples:**\n\nText Input:\n```markdown-ui-widget\ntext-input email \"Email Address\" \"Enter your email\" \"user@example.com\"\n```\n\nButton Groups:\n```markdown-ui-widget\nbutton-group plan [\"Basic Plan\" \"Pro Plan\" \"Enterprise\"] \"Basic Plan\"\n```\n\nDropdowns:\n```markdown-ui-widget\nselect region [\"US East\" \"US West\" \"Europe\"] \"US East\"\n```\n\nMulti-Select:\n```markdown-ui-widget\nselect-multi tools [Docker \"Redis Cache\" \"PostgreSQL DB\"] [Docker]\n```\n\nSliders:\n```markdown-ui-widget\nslider cpu 1 32 1 4\n```\n\nForms:\n```markdown-ui-widget\nform deployment \"Deploy Now\"\n  text-input name \"App Name\"\n  select env [\"Development\" \"Production\"] \"Development\"\n  slider replicas 1 10 1 3\n```\n\nCharts:\n```markdown-ui-widget\nchart-line\ntitle: Monthly Revenue\nheight: 300\nMonth,Sales,Target\nJan,45000,50000\nFeb,52000,50000\nMar,48000,55000\n```\n\n**Output Rules:**\n- One widget per code block\n- Use quotes for any text with spaces\n- Parameters after ID are positional and optional\n- Form fields must be indented exactly 2 spaces\n- Chart data follows CSV format with headers\n- Only use the 10 widget types above (including 4 chart types)\n````\n\n## Contributing\n\n- **New widgets**: [Open issue](https://github.com/BlueprintDesignLab/markdown-ui/issues/new) with use case\n- **Parser/renderer ports**: [PRs welcome](https://github.com/BlueprintDesignLab/markdown-ui/pulls)\n- **Spec changes**: [Discuss in issues](https://github.com/BlueprintDesignLab/markdown-ui/issues) first\n\n## Resources\n\n- 🌐 **[Live Demo](https://markdown-ui.com/)** - Try all widgets interactively\n- 📖 **[Technical Specification](https://markdown-ui.com/spec)** - Complete spec documentation\n- 📦 **[npm Packages](https://www.npmjs.com/search?q=%40markdown-ui)** - All available packages\n- 🐙 **[GitHub Repository](https://github.com/BlueprintDesignLab/markdown-ui)** - Source code \u0026 issues\n\nMIT © 2025\n","funding_links":[],"categories":["TypeScript","编码与开发工具"],"sub_categories":["开发组件"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlueprintLabIO%2Fmarkdown-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBlueprintLabIO%2Fmarkdown-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlueprintLabIO%2Fmarkdown-ui/lists"}