Embed#

Drop a dotted globe into any web page with an iframe. The /embed route is the canvas-only build: no panel, no chrome, no marketing nav. Sized to whatever wrapper you put it in.

html

<iframe
  src="https://globestudio.app/embed?look=halftone"
  width="640"
  height="480"
  style="border: 0;"
  loading="lazy"
  title="Globestudio dotted globe"
></iframe>

Pick any preset by id (halftone, aurora, risograph…) or pass a full config via ?c=<URL-encoded JSON> for a customized embed.

On a light page, add theme=light to a globe the page shows through, like Wireframe. Its white ink turns graphite, and the glow and grid switch to a palette for light pages. Halftone, Toon and Threshold paint a dark page of their own, so add transparent=1 as well. The React and web component packages take it as theme="light", the script-tag loader as data-theme="light".

To let visitors turn the globe into the flat map and back, put "viewSwitch": true in the config. The embed shows a Globe and Map switch in its top right corner, and the Share tab's toggle of the same name adds it to the code it writes.

React component#

No install. Paste it into any React/Next.js/Astro/Remix project:

jsx

// Drop-in React component. No install, just paste.
export const Globe = ({ look = "halftone", width = 640, height = 480 }) => (
  <iframe
    src={`https://globestudio.app/embed?look=${look}`}
    width={width}
    height={height}
    style={{ border: 0 }}
    loading="lazy"
    title="Globestudio dotted globe"
  />
);

// Use it:
<Globe look="aurora" width={800} height={600} />

For a new project, start from the React starter: a Vite app that shows a globe with @globestudio/react. Copy it with degit, or open it in StackBlitz.

degit

npx degit@3.10.0 alevizio/globestudio/examples/starter-react my-globe

Script-tag loader#

For Webflow, Framer, plain HTML, anywhere you can drop a <script> tag:

html

<!-- One-line script-tag loader. Drops a div anywhere on the page
     and reads data-look / data-config attributes from it. -->
<div data-globestudio data-look="risograph" style="height:480px"></div>
<script src="https://globestudio.app/embed.js" async></script>

Step-by-step setup for Webflow, Framer, Figma, Notion, WordPress and more lives on the Integrations page. For Figma, the export dialog (D) also has a Figma tab: it copies the design as vectors or as an image, ready to paste into a file. When the look has an effect the vectors can't keep, such as scanlines or a glow, the Figma and SVG tabs name it and point to the image. In the Figma plugin, paste a share link to open that exact design there.

Every customization can be encoded into a URL. From the export dialog (D), the Share tab gives you a ?c=<encoded> link that restores your exact canvas state on someone else's machine.

Your data travels in the link too. In the Data section, paste one lat,lng,value line per point, like 35.68,139.69,37, or press Try an example.

The Figma plugin opens these links too. Paste one into its Paste a share link field, or anywhere in the plugin outside a text field, and the design loads, ready to insert. Look links (/looks/halftone) and embed links work the same way.

The Share tab also has an Embed code section. It shows the design on screen as an iframe, a @globestudio/react snippet or a @globestudio/element web component, each with a Copy button. Open in CodePen puts the design in a new pen, ready to edit.

The encoded payload follows the config JSON schema, so it's autocomplete-friendly in any editor that respects $schema.

Agent skill#

Ask your coding agent for a globe and get one that fits the page: the Globestudio skill teaches Claude Code, Codex, Cursor and other agents how a design travels in a link, how to embed one and which look fits a brief. Add it with any of these:

npx skills

npx skills add alevizio/globestudio

GitHub CLI

gh skill install alevizio/globestudio globestudio

Claude Code plugin

claude plugin marketplace add alevizio/globestudio && claude plugin install globestudio@globestudio

The Claude Code plugin also connects the hosted MCP server. In Gemini CLI, run gemini extensions install https://github.com/alevizio/globestudio. In the Claude app, download globestudio-skill.zip from the latest release and upload it in Settings, Capabilities, Skills. npx skills sends anonymous install data to skills.sh unless you set DISABLE_TELEMETRY=1.

The skill has a page on skills.sh with its installs and security audits, and its source is in skills/globestudio on GitHub.

The privacy page says what the hosted MCP server receives and keeps, and the terms of use cover the server, the skill and the plugins.

Keyboard shortcuts#

SShuffle to a random look
[]Cycle preset (prev / next)
+−0Zoom in / out / reset
GToggle globe ↔ flat view
HHide or show the control panel
DOpen the export dialog
RReset to defaults
⌘KOpen the command palette
?Show keyboard shortcuts dialog
EscClose popovers and dialogs

Preset catalog#

21 looks ship in the box. Each has its own /looks/:id route with a dedicated OG card and SEO copy.

Config schema#

Exported config files (and the ?c=… share encoding) follow the JSON Schema published at globestudio.app/schema/config.json. VS Code, Cursor, and WebStorm read the $schema field and provide autocomplete + validation when you open a downloaded config.

The look-preset shape (for community preset PRs) has a separate schema at globestudio.app/schema/look-preset.json, enforced by src/data/look-presets.test.js in CI.

Source#

Globestudio is MIT-licensed open source. Code, issues, discussions, and the full roadmap live on GitHub.

github.com/alevizio/globestudio CONTRIBUTING.md ROADMAP.md