vb-project-planning

Web Components for the research, planning, and delivery phases of product work — personas, journeys, roadmaps, kanban, gantt and more, all themed by Vanilla Breeze.

A live board

Drag the cards, switch the theme — it's all plain HTML. No build step, no framework: author columns and stories as nested custom elements, and Vanilla Breeze themes them while <drag-surface> handles the sorting.

Product Managerget a daily digest of status changes

Analystfilter reports by date range and team

Ops Leadexport any report as a shareable PDF

That board above is exactly this much markup — semantic <section> columns holding <user-story> cards:

<kanban-board>
  <section data-column="todo" data-column-label="To Do">
    <user-story draggable="true" story-id="ATL-345" priority="high"
                status="to-do" points="5" detail="compact">
      <span slot="persona">Product Manager</span>
      <span slot="action">get a daily digest of status changes</span>
    </user-story>
  </section>

<section data-column="doing" data-column-label="In Progress">
    <user-story draggable="true" story-id="ATL-318" priority="high"
                status="in-progress" points="5" detail="compact">
      <span slot="persona">Analyst</span>
      <span slot="action">filter reports by date range and team</span>
    </user-story>
  </section>

<section data-column="done" data-column-label="Done" data-column-color="success">
    <user-story draggable="true" story-id="ATL-298" priority="high"
                status="done" points="8" detail="compact">
      <span slot="persona">Ops Lead</span>
      <span slot="action">export any report as a shareable PDF</span>
    </user-story>
  </section>
</kanban-board>

No class soup, no JSX, no config. kanban-board API → · see the full Sprint Board →