@globestudio/element

@globestudio/element

Framework-agnostic <globe-studio> web component for embedding Globestudio dotted globes. It has no dependencies. It's a small wrapper over globestudio.app/embed, so Three.js, shaders and country data all run on the embed origin.

It works anywhere custom elements do, including plain HTML, Svelte, Vue, Solid, Astro, Webflow and Framer.

Install

npm install @globestudio/element

Usage

import "@globestudio/element"; // auto-registers <globe-studio>

<!-- Pick a preset -->
<globe-studio look="aurora" width="800" height="600"></globe-studio>

<!-- From a share config (the ?c= payload from the app's Share tab) -->
<globe-studio config="…" height="480"></globe-studio>

<!-- On a light page -->
<globe-studio look="wireframe" theme="light"></globe-studio>

<!-- Halftone, Toon and Threshold paint a dark page, so make them see-through too -->
<globe-studio look="halftone" theme="light" config='{"backgroundStyle":"transparent"}'></globe-studio>

Or via CDN, no build step:

<script type="module" src="https://esm.sh/@globestudio/element"></script>
<globe-studio look="halftone"></globe-studio>

Attributes

Attributes are reactive: change look, config or theme and the globe updates.

In the app, the export dialog's Share tab writes this tag for the design on screen: pick Web component under Embed code and copy it.

API

import { defineGlobeStudio, buildEmbedUrl } from "@globestudio/element";

defineGlobeStudio("my-globe"); // register under a custom tag
buildEmbedUrl({ look: "vapor" }); // → "https://globestudio.app/embed?look=vapor"
buildEmbedUrl({ look: "vapor", theme: "light" }); // → "https://globestudio.app/embed?look=vapor&theme=light"

MIT © Globestudio