An interactive, fully static technology radar built with Astro. Track technology adoption decisions across your organization with a visual radar chart, categorized segments, and detailed technology pages — all driven by simple Markdown files.
| Radar Overview | Technology Detail |
|---|---|
 |
 |
 |
 |
|
Technologies plotted across four rings — Adopt, Trial, Assess, Hold — with hover tooltips and click-through to detail pages. |
Add technologies by dropping |
|
Swappable CSS themes with automatic light/dark mode support. Ships with a default theme and Catppuccin Mocha. Create your own by defining CSS custom properties. |
Builds to plain HTML/CSS/JS — 60+ pages in ~1 second. Deploy anywhere: Cloudflare Workers, Netlify, Vercel, S3, or any static host. |
|
Group technologies into color-coded categories. Mark technologies as moved in/out to highlight recent adoption changes. |
Sitemap, robots.txt, Open Graph, Twitter Cards, canonical URLs, custom 404 page — all out of the box. |
git clone https://github.com/dirsigler/techradar.git
cd techradar
npm install
npm run devOpen http://localhost:4321 to see the radar.
Create a Markdown file in the appropriate segment directory under segments/:
segments/
├── cloud/
│ ├── index.md # Segment metadata (title, color, order)
│ ├── kubernetes.md
│ └── terraform.md
├── frameworks/
│ ├── index.md
│ ├── astro.md
│ └── react.md
└── ...
Each technology file uses this frontmatter:
---
title: Kubernetes
ring: adopt # adopt | trial | assess | hold
moved: 0 # 1 = moved in, -1 = moved out, 0 = unchanged
---
Your description in Markdown. Explain why this technology is in this ring,
what your experience has been, and any recommendations.Each segment needs an index.md:
---
title: Cloud
color: "#3b82f6"
order: 1 # Determines quadrant position (1-4)
---Edit src/config.ts to customize:
const config: SiteConfig = {
title: "Tech Radar", // Navbar title
// logo: '/logo.svg', // Optional logo in public/
footerText: "Built with Astro", // Footer text (supports HTML)
editBaseUrl: "https://github.com/...", // "Edit on GitHub" link base
// theme: 'catppuccin-mocha', // Theme name (see below)
socialLinks: [{ label: "GitHub", href: "...", icon: "..." }],
};Themes live in src/themes/ as CSS files defining --radar-* custom properties.
| Theme | Description |
|---|---|
default |
Clean light/dark theme (follows system preference) |
catppuccin-mocha |
Catppuccin Mocha dark theme |
To create a custom theme, copy src/themes/default.css, rename it, adjust the CSS variables, and set theme: 'your-theme' in src/config.ts.
├── segments/ # Technology content (Markdown)
│ ├── cloud/
│ ├── dev-languages/
│ ├── frameworks/
│ └── processes/
├── src/
│ ├── components/ # Astro components (Radar, Legend, Cards, ...)
│ ├── layouts/ # Base HTML layout
│ ├── lib/ # Radar positioning algorithm
│ ├── pages/ # Route pages (index, segments, technology)
│ ├── styles/ # Global styles
│ ├── themes/ # Swappable CSS themes
│ └── config.ts # Site configuration
├── public/ # Static assets (favicon, robots.txt)
├── wrangler.json # Cloudflare Workers configuration
└── astro.config.mjs # Astro configuration
| Command | Action |
|---|---|
npm install |
Install dependencies |
npm run dev |
Start dev server at localhost:4321 |
npm run build |
Build production site to ./dist/ |
npm run preview |
Preview the production build locally |
This project is designed to be forked and customized for your own team or organization.
# GitLab or other hosts
git clone https://github.com/dirsigler/techradar.git my-techradar
cd my-techradar
git remote set-url origin https://gitlab.example.com/your-group/techradar.gitDelete the example content and add your own:
# Remove example technologies (keep index.md files — they define segments)
find segments -name "*.md" ! -name "index.md" -deleteCreate technology files with this frontmatter:
---
title: Your Technology
ring: adopt # adopt | trial | assess | hold
moved: 0 # 1 = moved in, -1 = moved out, 0 = unchanged
---
Why this technology is in this ring and what your team's experience has been.Edit the index.md in each segment directory. You can rename, recolor, or replace segments entirely — just keep up to 4 directories under segments/:
---
title: Infrastructure
color: "#3b82f6"
order: 1
---Update src/config.ts — all GitHub-specific values are in this single file:
const config: SiteConfig = {
title: "ACME Tech Radar",
footerText: "Built by the ACME Platform Team",
repositoryUrl: "https://gitlab.example.com/your-group/techradar",
editBaseUrl:
"https://gitlab.example.com/your-group/techradar/-/edit/main/segments",
socialLinks: [
{
label: "GitLab",
href: "https://gitlab.example.com/your-group/techradar",
// GitLab SVG icon path (24x24 viewBox)
icon: "M23.955 13.587l-1.342-4.135-2.664-8.189a.455.455 0 00-.867 0L16.418 9.45H7.582L4.918 1.263a.455.455 0 00-.867 0L1.387 9.452.045 13.587a.924.924 0 00.331 1.023L12 23.054l11.624-8.443a.92.92 0 00.331-1.024",
},
],
};Note: The
repositoryUrlis used for the license link in the footer. TheeditBaseUrlpowers the "Edit this page" links on technology pages. Both are optional.
The radar builds to fully static HTML — deploy it anywhere:
| Platform | Setup |
|---|---|
| Cloudflare Workers | Connect your repo in the Cloudflare dashboard, build command npm run build, output dist/ |
| GitLab Pages | Add a .gitlab-ci.yml with npm run build and publish the dist/ directory |
| Netlify / Vercel | Connect your repo, build command npm run build, publish directory dist/ |
| GitHub Pages | Use actions/upload-pages-artifact with path: dist/ in a workflow |
| Any static host | Run npm run build and upload the dist/ folder |
| Command | Action |
|---|---|
npm install |
Install dependencies |
npm run dev |
Start dev server at localhost:4321 |
npm run build |
Build production site to ./dist/ |
npm run preview |
Preview the production build locally |
MIT — Dennis Irsigler