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.
- 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.
Install via npm, pnpm, yarn or bun:
npm install skymap
yarn add skymap
pnpm add skymap
bun add skymap<!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 = await SkyMap.create(
container,
{
date: new Date("2023-01-01T12:00:00Z"),
},
{
bgColor: "#0a0d13",
constellations: {
lines: {
labels: {
enabled: false,
},
},
},
}
);
</script>
</body>
</html>Licensed under the MIT License. See LICENSE for details.
If you like SkyMap, consider starring the repo! ⭐