skymap

🌌 SkyMap – Interactive & Customizable Star Map for JavaScript

SkyMap is a lightweight, highly customizable JavaScript/TypeScript library for rendering a realistic sky map on an HTML <canvas>. It supports modern frontend frameworks like React, Vue, Svelte, and Next.js, while remaining easy to use in plain JavaScript.

🚀 Designed for simplicity, customization, and performance.

✨ Features

Realistic Star Rendering – Uses scientifically accurate colors and positions.
Customizable – Adjust colors, sizes, labels and more.
Framework-Agnostic – Compatible with Vanilla JS, React, Vue, Svelte, Next.js, and others.
Optimized for Performance – Smooth rendering with efficient WebGL & Canvas APIs.
Supports Real-Time Updates – Change time, location, and visibility dynamically.
Well-Documented – Clear API with examples for easy integration.

🚀 Installation

Install via npm, pnpm, yarn or bun:

npm install skymap

yarn add skymap

pnpm add skymap

bun add skymap

📌 Quick Start

🔹 Vanilla JavaScript (Plain HTML)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Sky Map</title>
</head>

<body>
  <div id="sky-container" style="width: 500px; height: 500px;"></div>
  <script type="module">
    import SkyMap from "skymap";
    const container = document.getElementById("sky-container");
    const skymap = SkyMap(
      container,
      {
        date: new Date("2023-01-01T12:00:00Z"),
      },
      {
        bgColor: "#0a0d13",
        constellations: {
          lines: {
            labels: {
              enabled: false,
            },
          },
        },
      }
    );
  </script>
</body>
</html>

📖 Documentation & Examples

📚 Full API Documentation: skewb1k.github.io/skymap

📜 License

Licensed under the MIT License. See LICENSE for details.

⭐ Support the Project!

If you like SkyMap, consider starring the repo! ⭐