Charts, diagrams & 3D
Because Canvas writes real HTML/CSS/JS rather than a template, its output is limited only by what a web page can render. The agent can reach for a broad set of CDN libraries — pinned to exact, known-working versions — and each one is verified by a real headless browser before the turn is called done.
Data charts
Charts are the most common visual, and the agent follows recipes that are known to render reliably:
- Chart.js — the default for bar, line, pie, doughnut, scatter and radar charts, driven by real numbers.
- Plotly — an alternative with the same chart families and richer interactivity.
- ECharts — for chart types Chart.js/Plotly don't cover well: heatmaps, treemaps, sankey, gauges, candlestick/financial charts, sunbursts, and pictogram bars (a row of little icons standing in for a bar).
Diagrams
- Mermaid — flowcharts, sequence and ER diagrams.
- Inline SVG / D3 — custom or hand-drawn diagrams that no fixed chart type expresses.
- vis-network — node-and-edge relationship/network graphs.
- Cytoscape.js — graph visualizations needing automatic layout algorithms (force-directed, hierarchical, circular).
- Markmap — mindmaps.
Slide decks
Decks use Reveal.js, which gives the Canvas UI a real dual view: a stacked, scrollable "read it like a document" pane in the app, and a genuine PowerPoint/Keynote-style slideshow the moment the reader hits fullscreen. You don't build a "present" button or arrow-key logic yourself — Reveal provides it.
3D and product visualization
- Three.js — fully-supported 3D scenes, loaded as ES modules via an import map (modern Three.js ships only as modules).
<model-viewer>— the simplest way to display a single uploaded.glb/.gltfmodel and let the reader orbit and zoom.- A-Frame — declarative, HTML-like 3D scenes built on Three.js.
- PlayCanvas — richer, game-like 2D/3D experiences with input and physics.
Maps
- Leaflet — a real geographic map with pins, for specific locations.
- jsVectorMap — shaded region/country choropleths for data by geography (no map-tile fetch required).
The long tail
The same "pick the right library" guidance covers a lot of smaller needs:
| Need | Library |
|---|---|
| Mathematical notation | KaTeX |
| Syntax-highlighted code | highlight.js |
| Animated KPI counters | CountUp.js |
| QR codes / barcodes | qrcodejs / JsBarcode |
| Signature capture | Signature Pad |
| Video player | video.js |
| Embedded PDF viewer | PDF.js |
| Audio waveform | wavesurfer.js |
| Confetti / particle backgrounds | canvas-confetti / tsParticles |
| Icon sets | Lucide or Font Awesome |
| Animations & timelines | GSAP, AOS, Typed.js |
| Timelines / Gantt | Frappe Gantt |
| Sortable/filterable tables | Grid.js, SortableJS |
| Carousels / sliders | Swiper, img-comparison-slider |
An infographic isn't one library — it's a composition of several of these onto a CSS Grid/Flexbox layout. When you ask for one, the agent assembles icons, big numbers, a timeline, and maybe a map into a single-page layout rather than reaching for a single "infographic" script.
Everything is verified, not just trusted
The most important part: the agent doesn't assume a chart rendered. After writing, a real headless browser loads any CDN library actually used and checks that it drew real pixels — catching a broken CDN URL, a wrong version, a runtime error, or a chart that rendered blank (0×0) before the turn ends. See How it works.
Next steps
- Exporting to PDF — charts and 3D scenes are captured in exports too.
- How it works — the render-verification layers.