Vite

Install the package in any Vite project:

npm install canvas-globe

Add a canvas to the page:

<canvas id="globe" style="display:block;width:100%;max-width:560px;aspect-ratio:1"></canvas>

Create the globe from your entry module:

import { createGlobe } from "canvas-globe";

const globe = createGlobe(document.querySelector("#globe"), {
  licenseKey: "your_license_key",
  preset: "hologram",
  markers: [{ lat: 23.03, lon: 72.58, label: "Ahmedabad" }],
  tooltip: true,
});

if (import.meta.hot) import.meta.hot.dispose(() => globe.destroy());

React projects created with Vite can use the <Globe> component.