| name | obsidian-dashboard |
| description | Create interactive HTML dashboards for projects inside the Obsidian Second Brain vault. Generates self-contained HTML files with dark theme, progress tracking, milestone timelines, task management, and optional chart visualizations. |
| version | 1.0.0 |
| author | CLAWG |
| license | MIT |
| metadata | {"clawg":{"tags":["Obsidian","Dashboard","HTML","Visualization","Project Management"],"related_skills":["note-taking","project-tracking"]}} |
Obsidian Dashboard Creator
Create interactive HTML project dashboards inside the Obsidian Second Brain vault.
When to Use
- A project has been active for 2+ weeks and would benefit from visual tracking
- Multiple agents collaborate on the same project
- The user needs visibility into progress, milestones, metrics, or KPIs
- A project has recurring tasks, cron jobs, or scheduled deliverables
- The user explicitly asks for a project dashboard or progress tracker
Proactive behavior: When you detect a long-term project, propose creating a dashboard.
Say something like: "This project is growing — I can create an interactive dashboard in your Second Brain to track progress. Want me to set one up?"
Where Dashboards Live
All dashboards go in the dashboard/ folder at the vault root:
vault/
└── dashboard/
├── command-center.html ← Global CLAWG Command Center (pre-installed)
├── my-project.html ← Per-project dashboards you create
└── another-project.html
How to View in Obsidian
Dashboards are HTML files. Obsidian needs a plugin to render them inline:
Option 1: Custom Frames plugin (recommended)
- Install Custom Frames by Ellpeck from Obsidian Community Plugins
- In Settings > Custom Frames > Add Frame:
- URL: path to the HTML file (use
file:// protocol)
- Or open the HTML file externally and point to
localhost if using the CLAWG server
Option 2: HTML Reader plugin
- Install HTML Reader (
obsidian-html-plugin) by nuthrash
- Simply click any
.html file in the vault — it opens as a tab
- Set security mode to
BALANCE_MODE for interactive dashboards
Option 3: Embed in a note
Create a markdown note that embeds the dashboard:
# Project Dashboard
<iframe src="dashboard/my-project.html" width="100%" height="900" style="border:none; border-radius:8px;"></iframe>
Or with the embed-html plugin:
```embedhtml
path: dashboard/my-project.html
height: 900
```
Option 4: CLAWG Dashboard Server
Run clawg dashboard to serve all dashboards with a local API that provides live data.
Steps to Create a Dashboard
1. Gather Project Information
Collect from the user or infer from context:
- Project name and one-line description
- Start date and target completion date (if any)
- Milestones — key deliverables with dates/status
- Tasks — current task list with assignees and status
- Metrics — any KPIs to track (lines of code, tests passing, revenue, users, etc.)
- Agents involved — which CLAWG agents work on this project
2. Generate the HTML Dashboard
Use the template below as a starting point. Customize sections based on what the project needs.
File naming: dashboard/<project-slug>.html (lowercase, hyphens, no spaces)
3. Announce to the User
After creating the dashboard, tell the user:
- Where the file is:
dashboard/<name>.html
- How to view it: recommend HTML Reader or Custom Frames plugin
- That they can run
clawg dashboard to view it in browser
4. Keep it Updated
When you work on the project in future sessions:
- Update task statuses
- Add new milestones or events
- Update metrics
- Add timeline entries
Dashboard Template
The template below is a complete, self-contained HTML file. Copy and customize it.
Key sections to customize:
PROJECT_CONFIG object at the top — project name, dates, descriptionMILESTONES array — add/remove milestonesTASKS array — current task listMETRICS array — KPIs and their valuesTIMELINE array — chronological events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PROJECT_NAME}} — Dashboard</title>
<style>
:root {
--bg: #0a0a0f;
--bg2: #12121a;
--card: #1a1a2e;
--border: #2a2a4a;
--accent: #6c5ce7;
--accent2: #a29bfe;
--green: #00e676;
--red: #ff5252;
--orange: #ffab40;
--cyan: #18ffff;
--text: #e8e8f0;
--text2: #8888aa;
--muted: #555577;
--mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { :; :; :border-box; }
{ :(--sans); :(--bg); :(--text); :; }
{ :; :; :;
:(,(--accent),(--accent2));
-webkit-:text; -webkit---:transparent; }
{ :; :(--text2); :; }
{ :grid; :(auto-fit,(,fr)); :; :; }
{ :(--card); : solid (--border); :; :; }
{ :; :uppercase; :; :(--muted); :; }
{ :; :; :(--mono); }
{ :(--green); }
{ :(--accent); }
{ :(--orange); }
{ :(--cyan); }
{ :; :; : ; }
{ :(--border); :; :; : ; :hidden; }
{ :; :; :(,(--accent),(--green)); :width ; }
{ :; :collapse; }
{ ; :; :uppercase; :; :(--muted);
: ; : solid (--border); }
{ : ; :; : solid (,,,); }
{ :(--card); }
{ :inline-block; : ; :; :; :; :(--mono); }
{ :(,,,); :(--green); }
{ :(,,,); :(--accent); }
{ :(,,,); :(--orange); }
{ :(,,,); :(--red); }
{ : solid (--border); :; :; }
{ :; :relative; }
{ :; :absolute; :-; :; :; :;
:; :(--accent); : solid (--bg); }
{ :; :(--muted); :(--mono); }
{ :; :; }
{ :; :; :(--muted); :center; :(--mono); }
Overall Progress
Milestones
StatusMilestoneTargetNotes
Tasks
StatusTaskAgentPriority
Timeline
CLAWG Dashboard Last updated:
Customization Guidelines
Naming
- File:
dashboard/<project-slug>.html (lowercase, hyphens)
- Title: Full project name in
PROJECT.name
Colors
The template uses the CLAWG dark theme. Available badge classes:
badge-done (green) — completed itemsbadge-active (purple) — in progressbadge-pending (orange) — not startedbadge-blocked (red) — blocked
Metrics
Replace the METRICS array values. Common metrics:
- Progress percentage
- Tasks done / total
- Days remaining
- Agents involved
- Test coverage, builds passing, revenue, users, etc.
Adding Charts
For projects that need charts, add Chart.js via CDN:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Then create <canvas> elements and initialize charts in the script section.
Keeping Dashboards Updated
When working on the project in subsequent sessions:
- Read the existing dashboard HTML
- Update the
MILESTONES, TASKS, TIMELINE, and METRICS arrays
- Write the updated file back
Constraints
- Dashboards must be self-contained — no external dependencies except CDN libraries
- Use the CLAWG dark theme (CSS variables from the template)
- Keep file size under 100KB per dashboard
- No server-side code — dashboards are static HTML rendered in Obsidian
- Do not store secrets or API keys in dashboard files
