Reusable in every plan
Visual
components.
Drop-in charts and diagrams for plan pages. Include /components.js, pass JSON in a data attribute, and each element renders as an SVG in the house style.
Bar chart.
<vp-bar-chart>
<vp-bar-chart label="Fraud signals by source"
data='[{"label":"Risk signals","value":670,"display":"670+","highlight":true}, …]'>
</vp-bar-chart>
Line chart.
<vp-line-chart>
<vp-line-chart label="Deploy time per release"
data='{"points":[42,38,31,33,24,19,14],"labels":["v1","v2",…],"unit":"s"}'>
</vp-line-chart>
Donut & progress.
<vp-donut> · <vp-progress>
<vp-donut data='{"value":80,"display":"80%","caption":"complete"}'></vp-donut>
<vp-progress data='{"done":4,"total":5,"milestones":["VM","Coolify","DNS","Ports","Ship"]}'></vp-progress>
Flow diagram.
<vp-flow>
<vp-flow label="How a demo ships"
data='{"nodes":["GitHub repo","Coolify build","Traefik HTTPS","…"],"highlight":3}'>
</vp-flow>
Stack diagram.
<vp-stack>
<vp-stack label="Hosting architecture"
data='[{"label":"Traefik proxy","note":"80 · 443","highlight":true},
{"cols":["plan A","plan B","prototype C"]}, …]'>
</vp-stack>