Qwik

Load and construct CanvasGlobe inside useVisibleTask$ so no rendering work is performed during server output.

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";

export default component$(() => {
  const canvas = useSignal<HTMLCanvasElement>();

  useVisibleTask$(async ({ cleanup }) => {
    const { createGlobe } = await import("canvas-globe");
    if (!canvas.value) return;

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

    cleanup(() => globe.destroy());
  });

  return <canvas ref={canvas} style="display:block;width:100%;aspect-ratio:1" />;
});

Use a visible task because this is an intentionally client-rendered interactive visual. A static exported image is more appropriate when no client JavaScript should run.