WallPlan creates production-ready Gantt calendars directly on your Miro board as native shapes, text, and frames. No images, no exports — everything is editable right where you plan.
Quick Start · Features · Tech Stack · Docs
Planning across years requires more than a spreadsheet — it needs spatial context. WallPlan generates a complete multi-year calendar on your Miro board: day lists, Gantt rows, box calendars, holidays, and week numbers — all as native Miro elements you can annotate with sticky notes, shapes, and arrows. Generate once, plan forever.
| Feature | Description |
|---|---|
| Multi-year span | 1 month to 20+ years in a single calendar |
| Custom start date | Begin from any month and year |
| Gantt rows | 6, 8, 10, or 12 configurable horizontal rows |
| Week start | Monday or Sunday (Sunday highlighted in red) |
| Timeline mode | Hide day-level detail for roadmap-style planning |
| US Federal Holidays | Automatically calculated and marked in red |
| Box calendar | Mini month grid with ISO week numbers |
| Progressive rendering | First 3 months appear instantly, rest loads in background |
| Rate-limit safe | Conservative batching (10 calls, 500 ms gap) for large calendars |
| Non-destructive | New calendars created alongside existing ones |
| Miroverse template | 2-Year Template 2026–2027 ready to use |
npm install
npm run startOpen Miro Developer Dashboard, set App URL → http://localhost:3000, and open any board.
Production deployment
npm run build # Output in dist/Deploy dist/ to any static host (Vercel, Netlify, GitHub Pages).
Live: wallplan-miro.vercel.app
Required OAuth scopes: boards:read, boards:write, identity:read
| Layer | Technology |
|---|---|
| Runtime | Miro Web SDK 2.0 |
| UI | React 18 + TypeScript 4.9 |
| Build | Vite 3 |
| Design | Mirotone CSS (official Miro UI kit) |
| Fonts | IBM Plex Sans (plex_sans — native Miro font) |
src/
├── app.tsx # Panel UI — settings form (React)
├── index.ts # SDK entry point — registers panel
├── generator.ts # Orchestrator — delegates to native-generator
├── native-generator.ts # Native Miro elements builder (shapes, text, frames)
├── calendar-engine.ts # Pure date math — no DOM, no SVG
├── svg-renderer.ts # SVG string builder (legacy, kept for reference)
└── assets/
└── style.css # Mirotone overrides
See ROADMAP.md for the full plan.
| Document | Description |
|---|---|
| ARCHITECTURE.md | Module map, layout system, generation pipeline |
| ROADMAP.md | Project roadmap — done & next |
| USER_GUIDE.md | End-user guide with settings explanation |
| APP_SUBMISSION.md | Marketplace submission checklist |
- Fork the repo
- Create a branch:
git checkout -b feature/your-feature - Commit and push
- Open a Pull Request
Maxim Osovsky. Licensed under CC BY-SA 4.0.