A living repository of demos, examples, and reusable components built with the VisQuill GDK.
This is a workshop, not a product. Things get added, changed, and refined over time. Parameters may be missing, patterns may evolve, and some examples are more finished than others. That's intentional.
Live explorer: visquill.com/developers/lab
The repository is a monorepo with four packages:
| Package | Description |
|---|---|
concepts |
Demonstrations of core GDK features — shapes, reactions, animations, geometry |
blueprints |
Reusable components ready to copy into your own project |
visquill-explorer |
The browser-based viewer that renders and browses everything |
home-screen |
The landing demo shown when the explorer first loads |
Structured to build understanding from first principles across different categories — see the explorer for the full list:
- Basics — Hello World, shapes & styles, frame & center, layers, attach
- Reactions — reactive values, chains, conditionals, distances, and the full Attach group
- Animations — easing, state machines, orbits, waveforms, breathing, text, radar charts, clock, card deal, swarm
- Geometry — arcs, boxes, circles, pins, polylines, polygons, shapes, extremes, fitting, convex hull, and more
- Plots — bar charts and curves along polylines, polygons, and circles
- Lenses — interactive data lenses with masked backgrounds and hedgehog bar overlays
- Viewports — box and circle viewports, animated panning, path navigation, nested viewports
Reusable components found in blueprints/src:
- Controls — buttons, toggle buttons, options panels
- Decoration — labels along polylines, labels at rectangle edges
- Plots — hedgehog bar charts along paths
- Data Lens / Lens Kit — interactive data lens components
Blueprints are designed to be copied and adapted. Take what's useful, make it yours.
Clone and install:
git clone https://github.com/visquill/visquill-lab.git
cd visquill-lab
npm installRun the explorer locally. This compiles all TypeScript packages first, then starts the dev server:
npm run devThe explorer will be available at http://localhost:3000/visquill-explorer/.
Build everything for deployment:
npm run buildPreview the production build locally:
npm run previewThe prefix chain used throughout the lab is worth understanding before you start:
graphic prefix + layer prefix + class name you pass in
"my-graphic-" "chart-" "bar"
──────────────────────►
→ "my-graphic-chart-bar"
VisQuill assembles the full CSS class name automatically. Your stylesheet only needs the fully-qualified name.
The code in this repository — demos, blueprints, and the explorer — is MIT licensed.
© 2026 Dr. Benjamin Niedermann. See LICENSE for the full text.
The VisQuill GDK itself (@visquill/visquill-gdk) is not MIT licensed.
It is free to use for non-commercial projects with attribution.
For more information, see visquill.com.