Install and initialize graphics-js.

Installation

Add the SDK to a client application.

Install the package with the package manager used by your web project. Graphics JS exposes TypeScript types with its browser client, rendered asset, mounted view, graphic request, and overlay component contracts.

npm install @caddie100/graphics-js

Initialization

Create one client for the experience.

createCaddie100Client validates the key family immediately and uses the CADDIE.100 production origin by default. A custom baseUrl, fetch implementation, credentials mode, or bounded image-cache policy can be supplied for controlled environments and testing.

import { createCaddie100Client } from "@caddie100/graphics-js";

const caddie = createCaddie100Client({
  apiKey: "c100_pk_live_…",
  imageCache: {
    maxAgeMs: 2 * 60 * 60 * 1000,
  },
});

First mount

Give Graphics JS a dedicated element.

mount renders the requested artifact, fetches it as an authenticated browser blob, and replaces the container contents with an SDK-controlled viewport. Inside it, an aspect-ratio-locked stage holds both the responsive image and component layer. Smart Components are optional and can be added when the view is first mounted, reconciled later with setSmartComponents, or appended with addSmartComponent. Component types may repeat; stable IDs keep their controls independent. Local Image, Shape, and Text Annotations can be added with setAnnotations.

<div id="course-graphic"></div>

<script type="module">
  const container = document.querySelector("#course-graphic");

  const view = await caddie.mount(container, {
    courseId: "COURSE_ID",
    subject: { type: "hole", holeNumber: 1 },
    output: { format: "webp", width: 900, height: 1500 },
  }, [], {
    fit: "contain",
  });

  // Release the blob URL and DOM when this experience unmounts.
  // view.destroy();
</script>

Keep the returned CaddieGraphicView. It owns visibility, styles, movement, reset state, event delivery, reconciliation, a bounded artifact-specific placement cache, and cleanup for every component on that graphic.

Responsive stage

One coordinate plane at every browser size.

The requested output width and height define the stage's internal pixel coordinate system and aspect ratio. Graphics JS applies one uniform scale to that stage, its image, and every overlay. A smaller same-ratio host therefore preserves exact placement, while a differently shaped host never stretches the image independently from its components.

A ResizeObserver responds to responsive columns, sidebars, orientation changes, and resizable panels. Call view.setStageFit("width") to change policy locally or view.refreshLayout() after an unusual host mutation. view.destroy() disconnects the observer.

Architecture

The image and interaction stay separate.