RASCI Web Component Demo

Live examples of the <rasci-table> custom element.

Back to Live Editor

Default rendering

%%rasci roles: PO "Product Owner" DEV "Developer" "Stakeholder" tasks: group "Discovery": "Collect requirements": PO[A] DEV[C] "Stakeholder"[I] group "Delivery": "Implement feature": DEV[R] PO[A] "Stakeholder"[I,A]

No role groups + no role labels

%%rasci roles: group "Team": PO "Product Owner" DEV "Developer" tasks: "Refine backlog": PO[A] DEV[C] "Ship release": DEV[R] PO[A]

Custom style mode (CSS variable overrides)

%%rasci roles: PM "Project Manager" FE "Frontend Engineer" BE "Backend Engineer" tasks: "Prepare sprint": PM[A] FE[C] BE[C] "Implement UI": FE[R] PM[C] BE[S] "Release build": BE[R] PM[A] FE[I]

Usage snippet

<link rel="stylesheet" href="https://unpkg.com/rasci/src/rasci-table.css">
      <script type="module" src="https://unpkg.com/rasci/src/rasci-table.js"></script>

<rasci-table no-role-groups>
%%rasci

roles:
  PO "Product Owner"
  "Stakeholder"

tasks:
  "Plan roadmap":
    PO[A] "Stakeholder"[C]
</rasci-table>