Docs

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.

<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.

React component#

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

// 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} />

Script-tag loader#

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

<!-- 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.

Share URLs#

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.

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

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.

• DefaultClean cartography
• HalftoneNewspaper print, browser-rendered
• RisographPink + cyan ink, misregistered on purpose
• NewsprintCMYK, four plates, rotated like the pros
• AuroraNorthern-lights bands across the planet
• PixelAn 8-bit world atlas
• BayerClassic-Mac threshold dither
• AtkinsonAtkinson dither, sparser than Bayer
• WireframeEdge-traced, like a hand pulled print
• CRTCathode-ray phosphor glow
• GlitchSignal break, RGB split
• Bad TVAnalog tape decay
• BloomAtmosphere on fire
• MetalLiquid chrome, soft reflections
• IridescentHolographic foil sticker
• PencilPencil-traced continents
• CorruptDatamosh corruption, on purpose
• ToonCel-shaded pop-art world
• ThresholdPure two-tone binary
• VaporSynthwave horizon, pastel split
• TopographicContour rings, only rings

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.