For Developers

The VisQuill GDK is available as an npm package and can be installed into any modern TypeScript project.

npm install @visquill/visquill-gdk

Spin up a new VisQuill project in seconds with the official scaffold. Choose from a minimal plain setup or a MapLibre map integration — everything wired up and ready to run.

npm create visquill@latest

The scaffold is available as create-visquill on npm.

The example below shows a minimal VisQuill setup using the recommended CSS class approach for styling. More advanced examples are available in VisQuill Lab.

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)}`
    })
}

CSS classes are composed from the prefix you pass to VisQuill.create plus the name you pass to each visual. Your stylesheet targets the fully-qualified name — for example .my-graphic-ring. See the Guide for a full walkthrough, or browse the Lab for more complex examples.