starmap

Get started

Installation

One package, one dependency — the core. It produces SVG strings, so there is no stylesheet to load and no component to mount.

Install it

bun add @industrieh/starmap-render

It needs the core

The renderer draws a Galaxy, and only @industrieh/starmap produces one. So the two are installed together:

bun add @industrieh/starmap @industrieh/starmap-render

That is the whole dependency tree — the core has none of its own. Two packages in your lockfile, and nothing else added on their behalf.

Why two packages and not one

The core is useful without a picture: a server computing routes, a worker generating universes, a test suite. Bundling a renderer into it would ship SVG-building code to every one of those. The split is what keeps each of them honest — no colour in the core, no world fact in the theme.

What it needs from you

  • Any JavaScript runtime. The package never touches the DOM, so it runs on a server, in a worker, or in a build script just as well as in a browser.
  • ES modules. ESM only, with type declarations alongside. No CommonJS build.
  • Somewhere to put a string. That is genuinely all. A file, an innerHTML, an <img src>, a data: URI — see Framing & embedding.

No React, no Vue, no anything

The package has no peer dependency on a framework, because it does not produce components. If you are in React, the output goes in dangerouslySetInnerHTML or an <img> — and that is a feature, not a workaround.

Importing

Everything comes from the package root. The two functions at the top are what most projects ever use; the rest is there for when you want to build your own drawing on the same primitives.

import {
  renderSystem,          // one system → a complete <svg> string
  renderGalaxy,          // the whole map → a complete <svg> string

  renderSystemContent,   // the layers alone, for when you own the <svg>
  renderGalaxyContent,

  systemViewBox,         // the framing those two would have used
  galaxyViewBox,
  viewBoxAttr,

  DEFAULT_THEME,         // the colours, and how to change them
  resolveTheme,

  el, group, text,       // the string primitives, for your own overlays
  type Theme,
  type RenderSystemOptions,
} from '@industrieh/starmap-render'

Next step

The Quickstart takes a galaxy to a picture on screen, then makes it move — ten minutes, and every output on it was produced by running the code.

Edit this page on GitHub