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.
Resources
Three main resources cover everything from concepts to API details.
Guide
Conceptual documentation covering geometric primitives, reactive systems, constraints, and architectural patterns. Start here if you're new to the GDK.
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.