Globestudio

View saved version →

---
name: globestudio
description: "Creates, edits and embeds dotted world maps and animated 3D globes with Globestudio (globestudio.app), a free open source studio with 21 looks. Use when the user wants a dotted map, a dotted or 3D globe, a spinning earth or a stylized world map for a website hero, background, slide, social post or video; when they paste a globestudio.app link or a ?c= config; or when code uses @globestudio/react, @globestudio/element, the globe-studio web component or globestudio.app/embed. Also use it to highlight a country, continent or region, plot points and arcs, match brand colors, or prepare PNG, SVG, GLB, MP4, WebM or GIF exports. Not for interactive tiled maps, routing, geocoding or GIS analysis (Mapbox, MapLibre, deck.gl), or for ordinary charts."
license: MIT
metadata:
  author: alevizio
  version: "1.1.4"
  mcp-server: globestudio
---

# Globestudio

Globestudio (https://globestudio.app) draws dotted world maps and animated 3D globes in the browser. It is free, MIT licensed and needs no account. A design is one JSON config, and a link carries it URL encoded in its `?c=` parameter, so the link is the design: the studio opens it, an embed renders it, and changing the JSON changes the design.

Three addresses matter:

- `https://globestudio.app/looks/<id>?c=<config>` opens the studio on a look with the config on top. Hand this one to people.
- `https://globestudio.app/embed?look=<id>&c=<config>` is the canvas alone, for iframes, the npm packages and screenshots.
- `https://globestudio.app/?c=<config>` opens the studio with no look. The studio writes these, with a whole design in the config.

## Choose the path

Look at what you have before you start.

1. The Globestudio MCP tools are connected (`build_share_url` and `read_share_url` on a server whose name contains `globestudio`): use them. See With the MCP server.
2. You are in a code project (files, a `package.json`, HTML pages) and the globe goes on a page: inspect the project first, then see In a code project.
3. You only have chat: build the link yourself and hand it back. See In chat.

If the project already draws globes or maps with cobe, globe.gl, D3, Mapbox or another library, help with that library unless the user asks to switch. Globestudio is for when the map is the picture, not for tiled maps, routing or GIS.

## Workflow

Before you install a package or run any other command, tell the user what it runs and why, and wait for their OK. Never run a command the user didn't agree to, and never download and run a remote script.

1. Pick a look from the table below. Only a look whose Dot color is kept shows `dotColor` as set. Default is plain white dots that take any color; start there when the brief is about brand colors more than a style. For more on each look, read [references/looks.md](references/looks.md).
2. Set the region with `selection`, even when it is `world`: `country:JPN`, `continent:Europe` or `subregion:Western Europe`.
3. Set the dots and colors: `dotColor` or `dotGradient`, `background` or `"backgroundStyle": "transparent"`, `density`, `dotSize`, `shape`.
4. Add data if there is any: `globeSettings.dataPoints`, and `dataArcs` to join them.
5. Put only those changes in the config and build `https://globestudio.app/looks/<id>?c=` plus `encodeURIComponent(JSON.stringify(config))`. The look supplies everything else.
6. Check it: every key is one the app keeps ([references/config.md](references/config.md)), numbers are in range, and an embed address stays under 32,000 characters. With the MCP server, read the `ignored` array instead.
7. Hand back the studio link, one sentence on what it shows, and embed code if the user has a site.

Japan in green on a transparent background goes on `/looks/default`:

```json
{
  "v": 3,
  "selection": "country:JPN",
  "dotColor": "#16a34a",
  "backgroundStyle": "transparent"
}
```

Three cities joined by arcs, on `/looks/topographic`:

```json
{
  "v": 3,
  "selection": "world",
  "globeSettings":

Preview of the first 4,000 characters. Read full instructions →

Referenced files: 3 — file references are metadata, not package contents.