For Developers
The VisQuill GDK gives you geometric primitives, a reactive constraint system, and built-in interaction handling: the building blocks for interactive visualization tools that go beyond standard charting. Free for non-commercial use — see the licence terms.
Resources
Four main resources cover everything from the GDK concepts to API details.
GDK
Overview of the Graphics Development Kit — core principles, scope, intended use, and licensing. Start here to understand what the GDK is and whether it fits your needs.
About the GDK →Guide
Conceptual documentation covering geometric primitives, reactive systems, constraints, and architectural patterns. Start here if you're ready to build.
Read the Guide →Lab
Executable demos and reusable blueprints demonstrating specific concepts and usage patterns. Useful for exploring what's possible and learning by example. Also available on GitHub.
Explore the Lab →Docs
Complete API reference including all type definitions and method descriptions. Use this alongside the Guide once you're building.
View the Docs →Installation
The VisQuill GDK is available as an npm package and can be installed into any modern web or TypeScript project.
npm install @visquill/visquill-gdk@alphaMinimal Example
The example below demonstrates a minimal setup using the VisQuill GDK. More advanced examples are available in VisQuill Lab.
import {VisQuill, Attach} from "@visquill/visquill-gdk"
/**
* Creates a simple "Hello World" visualization —
* a single text element attached to the center of the graphic.
*
* @param div - The div element that will contain the graphic
*/
export function run(div: HTMLDivElement) {
const rvg = VisQuill.create(div)
const canvas = rvg.canvas
// Text element
const text = canvas.text.label("Hello World!",
"@style fill: blue; font-size: 48px; text-anchor: middle; dominant-baseline: middle;")
// Attach the text to the graphic's center point.
// pointToPoint moves "text" so that its origin lands on rvg.center.
// Text stays at center point even if rvg.center changes.
Attach.pointToPoint(text, rvg.center)
}Once you have a working setup, head to the Guide for a deeper walkthrough, or browse the Lab for more complex examples.