Developers

Build with the VisQuill GDK

Geometric primitives, a reactive constraint system, and built-in interaction handling — the building blocks for interactive visualization tools that go beyond standard charting. TypeScript-first, with every primitive, value, and reactive dependency fully typed.

Resources

Where to go

Tutorials

Step-by-step interactive tutorials — drag the geometry, read the code that drives it, and download each example as a standalone project.

Explore the Tutorials

Lab

100+ live examples for specific concepts and patterns — try each one and read its source, MIT licensed and ready to reuse.

Explore the Lab

Guide

Conceptual documentation: geometric primitives, reactive systems, constraints, and architectural patterns. Start here when you're ready to build.

Read the guide

Docs

Complete API reference — every type definition and method. Use it alongside the guide once building.

View the docs

The Lab examples are open source. View on GitHub

Get started

Install and scaffold

Install

Available as an npm package for any modern TypeScript project.

npm install @visquill/visquill-gdk

Scaffold

Spin up a new project — minimal, or with a MapLibre map integration.

npm create visquill@latest

Available as create-visquill on npm.

Minimal example

A draggable handle with a tracking circle

Using the recommended CSS-class approach for styling. CSS classes compose from the prefix you pass to VisQuill.create plus each visual's name — e.g. .my-graphic-ring.

import { VisQuill, Reactive, Circles, Attach } from "@visquill/visquill-gdk"

/**
 * A draggable handle with a circle that tracks it reactively.
 * Styles are defined in a CSS file using the prefix chain.
 *
 * @param div - The div element that will contain the graphic
 */
export function run(div: HTMLDivElement) {
    const rvg    = VisQuill.create(div, "my-graphic-")
    const canvas = rvg.canvas

    // A draggable handle — class: "my-graphic-handle"
    const handle = canvas.handles.disk("handle", { x: 300, y: 200 })

    // A circle that follows the handle — class: "my-graphic-ring"
    const ring = canvas.visuals.circle("ring")

    Reactive.do([handle], () => {
        Circles.circleAt(handle, 60, ring)
    })

    // A label that stays above the handle — class: "my-graphic-label"
    const label = canvas.text.label("", "label")
    Attach.pointToPoint(label, handle, { offset: { x: 0, y: -80 } })

    Reactive.do([handle], () => {
        label.value = `${Math.round(handle.x)}, ${Math.round(handle.y)}`
    })
}

See the guide for a full walkthrough, or browse the Lab for more complex examples.

Custom work

Need something built?

I take on custom visualization projects built on the GDK — from one-off interactive charts to full visual tooling.

Learn more