Tech Radar logo

Backstage Tech Radar Plugin

Visualize the your company's official guidelines of different areas of software development.

Created by Spotify

Available on Roadie

Set up Backstage in minutes with Roadie

A screenshot of the Tech Radar plugin.

Installation steps

Install the plugin into Backstage.

yarn add @backstage/plugin-tech-radar

Modify your app to include the plugin component exported from the tech radar, for example

// packages/app/src/App.tsx
import { TechRadarPage } from '@backstage/plugin-tech-radar';

const routes = (
    {/* ...other routes */}
      element={<TechRadarPage width={1500} height={800} />}

Found a mistake? Update these instructions.

Things to know

How do I load in my own data?

To pass own data to plugin use a getData prop which expects a Promise<TechRadarLoaderResponse> signature.

For example:

const getData = () =>
    quadrants: [{ id: 'infrastructure', name: 'Infrastructure' }],
    rings: [{ id: 'use', name: 'USE', color: '#91c49d' }],
    entries: [
        moved: 0,
        ring: 'use',
        url: '#',
        key: 'firebase-function',
        id: 'firebase-function',
        title: 'FireBase Function',
        quadrant: 'infrastructure',

<TechRadarComponent width={1500} height={900} getData={getData} />;

Set up Backstage in minutes with Roadie