{"id":42578837,"url":"https://github.com/wire-dsl/wire-dsl","last_synced_at":"2026-04-02T14:49:28.994Z","repository":{"id":335154590,"uuid":"1138526530","full_name":"Wire-DSL/wire-dsl","owner":"Wire-DSL","description":"WireDSL - Wireframes as Code. Declarative wireframing with AI-powered generation.","archived":false,"fork":false,"pushed_at":"2026-02-19T17:37:21.000Z","size":1812,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-19T20:56:33.942Z","etag":null,"topics":["domain-specific-language","dsl","dsl-syntax","language","mockups","sketches","wireframes"],"latest_commit_sha":null,"homepage":"https://wire-dsl.org","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/Wire-DSL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":".github/SUPPORT.md","governance":null,"roadmap":"docs/ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-20T19:37:26.000Z","updated_at":"2026-02-19T17:36:08.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Wire-DSL/wire-dsl","commit_stats":null,"previous_names":["wire-dsl/wire-dsl"],"tags_count":69,"template":false,"template_full_name":null,"purl":"pkg:github/Wire-DSL/wire-dsl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wire-DSL%2Fwire-dsl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wire-DSL%2Fwire-dsl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wire-DSL%2Fwire-dsl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wire-DSL%2Fwire-dsl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wire-DSL","download_url":"https://codeload.github.com/Wire-DSL/wire-dsl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wire-DSL%2Fwire-dsl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29705523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T03:17:42.375Z","status":"ssl_error","status_checked_at":"2026-02-22T03:17:31.622Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["domain-specific-language","dsl","dsl-syntax","language","mockups","sketches","wireframes"],"created_at":"2026-01-28T22:03:05.976Z","updated_at":"2026-02-22T05:01:44.656Z","avatar_url":"https://github.com/Wire-DSL.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 WireDSL\n\n\u003e **Wireframes as Code.** Declarative wireframing with AI-friendly syntax.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![npm version](https://img.shields.io/npm/v/@wire-dsl/engine)](https://www.npmjs.com/package/@wire-dsl/engine)\n[![Build](https://img.shields.io/github/actions/workflow/status/wire-dsl/wire-dsl/ci-core.yml?branch=main)](https://github.com/wire-dsl/wire-dsl/actions)\n[![Node.js](https://img.shields.io/badge/Node.js-20+-green)](https://nodejs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.9+-blue)](https://www.typescriptlang.org/)\n\n## What is WireDSL?\n\nWireDSL is a **code-first wireframing tool** that lets you:\n\n- ✍️ **Write wireframes as declarative code** (like Mermaid, but for UI)\n- 🤖 **Generate from plain English** (\"Create a login form...\" → automatic wireframe)\n- 📦 **Export to SVG, PNG, PDF**\n- 🔓 **100% open-source** and free forever\n- ⚙️ **AI-friendly syntax** for LLM-powered generation\n\n## 🚀 Quick Start\n\n**Try online (no installation needed):**\n\nVisit [**live.wire-dsl.org**](https://live.wire-dsl.org) to use the web editor in your browser.\n\n**Start the web editor locally (connected to your files):**\n\n```bash\npnpm install \u0026\u0026 cd apps/web \u0026\u0026 pnpm dev\n```\n\n→ Open http://localhost:3000\n\n**Try the CLI (one-liner):**\n\n```bash\nnpm install -g @wire-dsl/cli \u0026\u0026 wire render examples/simple-dashboard.wire -o output.svg\n```\n\n**Use as a library:**\n\n```bash\nnpm install @wire-dsl/engine\nimport { parseWireDSL, generateIR } from '@wire-dsl/engine';\n```\n\n## 🎬 Demo: `.wire` Code → SVG Preview\n\n\u003e Live editor showing:\n\u003e - Left: `.wire` code in Monaco editor\n\u003e - Right: Real-time SVG preview (hot reload)\n\u003e - Changes appear instantly as you type\n\u003e\n\u003e ![](./assets/screeshot.png)\n\u003e *Note: screenshot from Wire Live on [live.wire-dsl.org](https://live.wire-dsl.org/).*\n\n---\n\n## 📖 First Time? Read This\n\n1. **[QUICKSTART.md](./QUICKSTART.md)** - Setup guide (5 minutes)\n2. **[MONOREPO.md](./MONOREPO.md)** - How the project is organized (10 minutes)\n3. **[docs/DOCUMENTATION-INDEX.md](./docs/DOCUMENTATION-INDEX.md)** - Complete documentation index\n\n## 📚 Full Documentation\n\n**Getting Started**\n\n- **[QUICKSTART.md](./QUICKSTART.md)** - Get up and running\n- **[MONOREPO.md](./MONOREPO.md)** - Project structure\n- **[docs/DOCUMENTATION-INDEX.md](./docs/DOCUMENTATION-INDEX.md)** - Complete documentation index\n- **[.github/CONTRIBUTING.md](./.github/CONTRIBUTING.md)** - Contributing guide\n\n**Technical \u0026 Design**\n\n- **[docs/ARCHITECTURE.md](./docs/ARCHITECTURE.md)** - System design\n- **[docs/DSL-SYNTAX.md](./docs/DSL-SYNTAX.md)** - Language syntax guide\n- **[docs/STYLE-GUIDE.md](./docs/STYLE-GUIDE.md)** - Style system documentation\n- **[docs/LLM-PROMPTING.md](./docs/LLM-PROMPTING.md)** - Guide for AI generation from natural language\n- **[docs/ICONS-GUIDE.md](./docs/ICONS-GUIDE.md)** - Icons library and usage\n- **[docs/ICON-AND-BUTTON-SIZING.md](./docs/ICON-AND-BUTTON-SIZING.md)** - Icon and button sizing guide\n\n**Component \u0026 Container References**\n\n- **[specs/IR-CONTRACT.md](./specs/IR-CONTRACT.md)** - Intermediate representation format\n- **[specs/LAYOUT-ENGINE.md](./specs/LAYOUT-ENGINE.md)** - Layout algorithms\n- **[specs/VALIDATION-RULES.md](./specs/VALIDATION-RULES.md)** - Validation rules\n\n**Planning \u0026 Roadmap**\n\n- **[docs/ROADMAP.md](./docs/ROADMAP.md)** - Future features and milestones\n\n**Examples**\n\n- **[examples/](./examples/)** - Complete working examples\n\n---\n\n## 🎯 Why WireDSL?\n\nWireDSL is a platform for creating declarative wireframes where:\n\n- ✍️ **You declare**, you don't draw\n- 🤖 **AI-friendly**: predictable syntax for automatic generation\n- 📐 **Deterministic**: same input → same output\n- 🔄 **Versionable**: wireframes are code\n\n### Quick Example\n\n```wire\nproject \"Dashboard\" {\n  style {\n    density: \"normal\"\n    spacing: \"md\"\n    radius: \"md\"\n    stroke: \"normal\"\n    font: \"base\"\n  }\n\n  screen Home {\n    layout stack(direction: vertical, gap: md, padding: lg) {\n      component Heading text: \"Welcome\"\n      component Button text: \"Get Started\"\n    }\n  }\n}\n```\n\n## 📦 Packages \u0026 Apps\n\n| Package/App                                          | Purpose                        | Status         |\n| ---------------------------------------------------- | ------------------------------ | -------------- |\n| [@wire-dsl/engine](./packages/engine)               | Parser, IR, layout, renderer   | ✅ Published   |\n| [@wire-dsl/exporters](./packages/exporters)         | SVG, PNG, PDF export (Node.js) | ✅ Published   |\n| [@wire-dsl/cli](./packages/cli)                     | Command-line tool              | ✅ Published   |\n| [@wire-dsl/language-support](./packages/language-support) | VS Code syntax \u0026 type support  | ✅ Published   |\n| [wire-dsl/web](./apps/web)                          | Live web editor                | ✅ Published   |\n| [wire-dsl/docs](./apps/docs)                        | Documentation site             | ✅ Published   |\n\n## 🎯 Example Workflow\n\n### 1. Write Wireframe Code\n\n```wire\nproject \"Login Form\" {\n  style {\n    density: \"normal\"\n    spacing: \"md\"\n    radius: \"md\"\n    stroke: \"normal\"\n    font: \"base\"\n  }\n\n  screen LoginScreen {\n    layout panel(padding: lg, background: \"white\") {\n      layout stack(direction: vertical, gap: md) {\n        component Heading text: \"Sign In\"\n        component Input label: \"Email\" placeholder: \"your@email.com\"\n        component Input label: \"Password\" placeholder: \"••••••••\"\n        component Checkbox label: \"Remember me\"\n        component Button text: \"Sign In\" variant: primary\n      }\n    }\n  }\n}\n```\n\n### 2. See Live Preview\n\n- Monaco editor on the left\n- SVG preview on the right\n- Hot reload as you type\n\n### 3. Generate with AI\n\n```\nUser: \"Create a login form with email, password, and remember me\"\n→ LLM generates .wire code\n→ Preview appears instantly\n→ Edit if needed\n```\n\n### 4. Export\n\n- SVG (scale to any size)\n- PNG (with optional resizing)\n- PDF (multipage support)\n\n## 🛠️ Tech Stack\n\n**Core**\n\n- TypeScript 5.3 (strict mode)\n- Chevrotain 11.x (parser)\n- Zod 4.x (validation)\n\n**Web Editor**\n\n- React\n- Vite\n- Monaco Editor\n- Tailwind CSS\n\n**DevOps**\n\n- pnpm + Turborepo\n- Vitest (testing)\n- GitHub Actions (CI/CD)\n- Changesets (versioning)\n\n**Deployment**\n\n- Cloudflare Pages (web editor)\n- NPM (CLI tool)\n\n## 📊 Architecture\n\n```\n.wire (text)\n   ↓\nParser (Chevrotain)\n   ↓\nAST (tokens)\n   ↓\nIR Generator\n   ↓\nIR Contract (JSON)\n   ↓\nLayout Engine\n   ↓\nPositioned Elements\n   ↓\nSVG Renderer\n   ↓\nSVG / PNG / PDF\n```\n\n## 🚢 Deployment\n\n- **Web Editor**: Automatic via Cloudflare Pages (git push → live)\n- **CLI Tool**: Automatic via GitHub Actions + NPM (changesets → publish)\n\n## 📦 What's Included\n\n**Free \u0026 Open Source**\n\n- ✅ Engine library (@wire-dsl/engine) - Pure TypeScript parser + layout\n- ✅ Exporters library (@wire-dsl/exporters) - SVG, PNG, PDF output\n- ✅ CLI tool (@wire-dsl/cli) - Command-line rendering\n- ✅ Language support (@wire-dsl/language-support) - VS Code integration\n- ✅ Web editor - Live editing and preview with AI integration\n- ✅ Full source code on GitHub\n\n## 🤝 Contributing\n\nWe welcome contributions! See [CONTRIBUTING.md](./.github/CONTRIBUTING.md).\n\n**Quick start:**\n\n```bash\ngit checkout -b feature/your-feature\ncd packages/engine\npnpm test:watch\n# Make changes\ngit commit -m \"feat(engine): your feature\"\ngit push origin feature/your-feature\n# Create PR\n```\n\n## 🔗 Links\n\n- **Website**: https://wire-dsl.org - Official documentation site\n- **Live Editor**: https://live.wire-dsl.org - Try WireDSL in your browser\n- **GitHub**: https://github.com/wire-dsl/wire-dsl\n- **NPM Org**: https://www.npmjs.com/org/wire-dsl\n- **Issues**: [GitHub Issues](https://github.com/wire-dsl/wire-dsl/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/wire-dsl/wire-dsl/discussions)\n\n## 📄 License\n\nMIT License - Free for personal and commercial use\n\n## ⚖️ Third-Party Components \u0026 Assets\n\n### Feather Icons\n\nThis project includes icons from [Feather Icons](https://feathericons.com), created by Cole Bemis and contributors.\n\n- **License**: MIT License\n- **Version**: 4.29.0\n- **Available icons**: 287\n- **Repository**: https://github.com/feathericons/feather\n- **Location in project**: `packages/engine/src/renderer/icons/`\n- **Complete list**: `docs/ICONS-GUIDE.md`\n- **Full details**: See `packages/engine/src/renderer/icons/ICONS-LICENSE.md`\n\nFeather Icons are used under the terms of the MIT License, which is fully compatible with this project's MIT License.\n\n## ✨ Why WireDSL vs Mermaid/Excalidraw/Figma/v0?\n\n| Aspect | WireDSL | Mermaid | Excalidraw | Figma | v0 by Vercel |\n|--------|---------|---------|--------------|-------|-----|\n| **Purpose** | ✅ Wireframe ideas | ❌ Diagrams | ✅ Sketches | 🎨 Design system | ❌ Production code |\n| **UI/UX focused** | ✅ 30+ UI components | ❌ Diagrams only | ✅ Visual sketches | ✅ Full design | ✅ React apps |\n| **Code-first** | ✅ Full DSL | ✅ Limited syntax | ❌ GUI-only | ❌ GUI-only | ❌ GUI/prompt |\n| **Layout model** | ✅ Declarative containers (Stack, Grid, Panel) | ❌ N/A | ❌ Pixel-based | ❌ Absolute positioning | ✅ HTML-like |\n| **AI-generation ready** | ✅ Predictable syntax | ⚠️ Works OK | ❌ Not designed for AI | ⚠️ Limited | ✅ LLM-powered |\n| **Version control friendly** | ✅ Text diffs work great | ✅ Text-based | ❌ Binary format | ❌ Binary format | ❌ Code files |\n| **Export formats** | ✅ SVG, PNG, PDF | ❌ Limited | ✅ SVG, PNG | ✅ Multiple | ❌ React code |\n| **License \u0026 Pricing** | ✅ Open Source (MIT) | ✅ Open Source (MIT) | ✅ Open Source (MIT) | ❌ Paid plans | ⚠️ Free tier limited |\n\n**TL;DR:** \n- **WireDSL**: Wireframe ideas in code (fast ideation + brainstorming)\n- **v0**: Production React apps from AI (fully coded, ready to deploy)\n- **Figma**: Design system \u0026 collaboration (professional design tool)\n- **Mermaid**: Diagrams as code\n- **Excalidraw**: Hand-drawn sketches\n\n## 🙏 Acknowledgments\n\nInspired by:\n\n- **Mermaid** - Diagrams as code\n- **Figma** - Design systems\n- **React** - Component-based UIs\n- **DSL design patterns** - Language engineering\n\n## 📈 Roadmap\n\n**→ [Full Roadmap Details](./docs/ROADMAP.md)**\n\n**Phase 1** ✅ (Completed)\n\n- ✅ Parser implementation\n- ✅ IR generator\n- ✅ Layout engine\n- ✅ SVG renderer\n- ✅ Web editor MVP\n- ✅ CLI tool\n- ✅ PNG/PDF export\n\n**Phase 2** ✅ (Completed)\n\n- ✅ Style system with design tokens\n- ✅ 23+ built-in components\n- ✅ Component composition \u0026 validation\n- ✅ Complete documentation\n\n**Phase 3** ✅ (Completed)\n\n- ✅ VS Code extension with syntax highlighting\n- ✅ Real-time error detection\n- ✅ Component intellisense\n- ✅ Document formatting\n- ✅ Live preview pane\n- 🔗 [GitHub Repository](https://github.com/Wire-DSL/vscode-extension) | [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=wire-dsl.wire-dsl)\n\n**Phase 4** 🚀 (Current)\n\n- [ ] **Source maps** - Map `.wire` source to rendered components\n- [ ] LSP (Language Server Protocol) support\n- [ ] Enhanced debugging capabilities\n\n**Future Features**\n\n- Code generation (React/Vue templates)\n- Figma import/export\n- Real-time collaboration\n- *...and more exciting features in the pipeline! 🎉*\n\n## 👥 Status\n\n```\n✅ Phase 1: Core MVP (completed)\n✅ Phase 2:  System \u0026 Design Tokens (completed)\n✅ Phase 3: VS Code Extension (completed)\n\n🚀 Phase 4: Source Maps (in progress)\n   ├─ Source map generation\n   ├─ Debugging support\n   └─ Error reporting with precise locations\n\n📅 LSP support (planned)\n📅 Code generation (planned)\n📅 More features in the pipeline 🎉\n```\n\n---\n\n**Last Updated**: February 6, 2026  \n**Status**: ✅ Production-Ready, Open Source  \n**Next**: Visit [live.wire-dsl.org](https://live.wire-dsl.org) to try it now!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwire-dsl%2Fwire-dsl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwire-dsl%2Fwire-dsl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwire-dsl%2Fwire-dsl/lists"}