Looking for a dotted-map (npm) alternative? Here is an honest side-by-side of what each tool produces, what it costs, and which one fits the job you actually have.
The map above is live. Open the editor and change the colour, shape, and density yourself — there is nothing to install and no account needed to start.
You are a designer, or you are a developer who does not want to add a dependency for a one-off asset.
You want to see density, colour, and shape changes immediately rather than re-running a build.
You want a PNG as well as an SVG.
Free to use. No sign-up required.
| Feature | World in Dots | dotted-map (npm) |
|---|---|---|
| Price | Free tier; $5 week pass, $8/month, or $80/year for unlimited exports | Free, MIT licensed |
| Setup required | None — open the page and start | Node.js 18+, npm install, write code |
| Output | SVG and PNG files | SVG string returned in code |
| Dot shapes | Circle, hexagon, square | Circles and hexagons |
| Live visual preview | Yes | No — re-run to see changes |
| Pins by latitude/longitude | Not built in | Yes |
| Runtime/dynamic generation | No | Yes |
| Best for | One-off design assets, chosen visually | Maps generated from code or data |
dotted-map is an MIT-licensed npm package that generates Tron-style SVG maps filled with dots or hexagons. You install it with npm, construct a DottedMap object with a height, grid type, and projection, optionally add pins by latitude and longitude, and call getSVG() to get an SVG string back.
It requires Node.js 18 or later. For frontend use it offers a precomputation step: you generate the grid once during development and import a lightweight version without the country data, so the map does not bloat your browser or React Native bundle.
The honest framing here is that these are not really competing products — they are the same output reached from opposite directions. dotted-map is a build-time dependency for developers. World in Dots is a visual editor for people who want a file.
Where World in Dots adds value for a developer is iteration speed. Choosing dot density, size, and colour is a visual decision, and making it by editing constructor arguments and re-running a build is slow. Some teams use World in Dots to settle the look, then reproduce it in dotted-map once they know what they want.
Where dotted-map wins outright is anything dynamic. If dots need to change in response to data at runtime, or maps need generating per-user, you need a library, and a free MIT-licensed one is hard to argue with.
Yes. It is published on npm under the MIT license, which permits commercial use. You do need Node.js 18 or later and some JavaScript to use it.
It depends on whether the map changes. If the dots need to react to data or vary per user, use the library — that is what it is for. If you need a fixed map for a slide, a hero image, or a report, an online editor gets you there faster and lets you make the visual decisions by looking at them.
Yes, and it is a reasonable workflow. Settling dot size, density, and colour visually is much quicker than doing it by editing constructor arguments, and the settings translate conceptually even though the two tools are unrelated.
Pricing and feature claims about dotted-map (npm) were last checked in August 2026 against the vendor’s own pages. Vendors change their pricing — confirm current terms before you buy.