Skip to content

TypeScript / JavaScript

The @grokify/prism npm package provides TypeScript-first visualization tools for PRISM capability and maturity models.

Installation

npm install @grokify/prism
# or
pnpm add @grokify/prism
# or
yarn add @grokify/prism

Package Overview

The package is organized into subpath exports for tree-shaking:

Import Path Description Dependencies
@grokify/prism/schema Zod schemas + TypeScript types zod
@grokify/prism/html HTML string renderers zod
@grokify/prism/components Lit web components zod, lit
@grokify/prism/styles CSS stylesheets none

Schemas

Maturity Grid Schema

import {
  MaturityGridDataSchema,
  LayerSchema,
  CategorySchema,
  CapabilitySchema,
} from '@grokify/prism/schema/maturity';

// Validate JSON data
const result = MaturityGridDataSchema.safeParse(jsonData);

if (result.success) {
  const grid = result.data;
  console.log(`Loaded ${grid.capabilities.length} capabilities`);
} else {
  console.error('Validation failed:', result.error.issues);
}

Journey Roadmap Schema

import {
  JourneyRoadmapSchema,
  CapabilityJourneySchema,
  DependencySchema,
  TeamSchema,
  InitiativeSchema,
} from '@grokify/prism/schema/roadmap';

const roadmap = JourneyRoadmapSchema.parse(roadmapJson);

Type Inference

Types are inferred from Zod schemas:

import { MaturityGridDataSchema } from '@grokify/prism/schema/maturity';
import { z } from 'zod';

type MaturityGridData = z.infer<typeof MaturityGridDataSchema>;

Or import types directly:

import type {
  MaturityGridData,
  Capability,
  CapabilityStatus,
  Layer,
  Category,
} from '@grokify/prism/schema/maturity';

import type {
  JourneyRoadmap,
  CapabilityJourney,
  Dependency,
  Team,
} from '@grokify/prism/schema/roadmap';

HTML Renderers

Framework-agnostic functions that return HTML strings. Use with any frontend framework or vanilla JavaScript.

Maturity Views

import { renderDomainView, renderFrameworkView } from '@grokify/prism/html/maturity';
import type { MaturityGridData } from '@grokify/prism/schema/maturity';

const data: MaturityGridData = { /* ... */ };

// Render domain/layer view
const domainHtml = renderDomainView(data, {
  showLegend: true,
  theme: 'light',
});

// Render framework overview
const frameworkHtml = renderFrameworkView(data);

document.getElementById('container').innerHTML = domainHtml;

Roadmap Views

import {
  renderTimelineView,
  renderStoryboardView,
  renderDependencyView,
  renderTeamView,
} from '@grokify/prism/html/roadmap';
import type { JourneyRoadmap } from '@grokify/prism/schema/roadmap';

const roadmap: JourneyRoadmap = { /* ... */ };

// Timeline/heatmap of capability maturity over time
const timelineHtml = renderTimelineView(roadmap, {
  showLegend: true,
  colorScheme: 'heatmap',
});

// Period-based narrative cards
const storyboardHtml = renderStoryboardView(roadmap, {
  orientation: 'horizontal',
});

// Dependency table with critical path
const dependencyHtml = renderDependencyView(roadmap);

// Team hierarchy with capacity
const teamHtml = renderTeamView(roadmap);

Including Styles

The HTML renderers require CSS styles. Include the stylesheet:

<link rel="stylesheet" href="node_modules/@grokify/prism/dist/styles/prism-roadmap.css">

Or import in your bundler:

import '@grokify/prism/styles/prism-roadmap.css';

For SSR or minimal styling:

import { INLINE_STYLES } from '@grokify/prism/styles';

// Inject minimal inline styles
document.head.insertAdjacentHTML('beforeend', `<style>${INLINE_STYLES}</style>`);

Lit Web Components

Interactive web components built with Lit. Requires Lit as a peer dependency.

Available Components

Component Description
maturity-grid Capability grid with maturity overlay
roadmap-timeline Capability journey timeline visualization
initiative-tracker Initiative tracking with filtering and grouping

maturity-grid

# Install Lit peer dependency
npm install lit

// Register the component
import '@grokify/prism/components';

Inline Data

<maturity-grid theme="dark" view="by-layer" show-legend show-view-toggle>
  <script type="application/json">
    {
      "title": "Security Capabilities",
      "layers": [
        { "id": "prevention", "name": "Prevention", "order": 1 }
      ],
      "categories": [
        { "id": "appsec", "name": "Application Security" }
      ],
      "capabilities": [
        {
          "id": "sast",
          "name": "SAST",
          "layerId": "prevention",
          "categoryId": "appsec",
          "status": "operational"
        }
      ]
    }
  </script>
</maturity-grid>

Remote Data

<maturity-grid
  src="/api/capabilities.json"
  theme="light"
  view="by-category"
></maturity-grid>

Attributes

Attribute Type Default Description
theme 'light' | 'dark' 'light' Color theme
view 'by-layer' | 'by-category' 'by-layer' Grouping mode
src string - URL to fetch JSON data
show-legend boolean true Show filter legend
show-view-toggle boolean true Show view toggle buttons

Events

Event Detail Description
view-change { view: ViewMode } Fired when view mode changes

Programmatic Usage

import { MaturityGrid } from '@grokify/prism/components';

const grid = document.querySelector('maturity-grid') as MaturityGrid;

// Change view programmatically
grid.view = 'by-category';

// Listen for events
grid.addEventListener('view-change', (e) => {
  console.log('View changed to:', e.detail.view);
});

roadmap-timeline

Timeline visualization for capability journeys over periods:

<roadmap-timeline theme="dark" show-confidence show-commitment show-legend show-controls>
  <script type="application/json">
    {
      "id": "roadmap-1",
      "name": "Platform Roadmap",
      "periods": [
        { "id": "q3-2026", "name": "Q3 2026" }
      ],
      "capabilityJourneys": [
        {
          "capabilityId": "k8s",
          "name": "Kubernetes",
          "currentState": { "maturityLevel": "M2" },
          "targetStates": [
            { "periodId": "q3-2026", "maturityLevel": "M3", "confidence": 0.8 }
          ]
        }
      ]
    }
  </script>
</roadmap-timeline>

Attributes

Attribute Type Default Description
theme 'light' | 'dark' 'light' Color theme
show-confidence boolean false Show confidence indicators
show-commitment boolean false Show commitment indicators
show-legend boolean false Show maturity legend
show-controls boolean false Show filter controls
color-scheme 'default' | 'heatmap' | 'monochrome' 'default' Color scheme

initiative-tracker

Track initiatives with filtering and grouping:

<initiative-tracker group-by="status" sort-by="name" theme="light">
  <script type="application/json">
    {
      "initiatives": [
        {
          "id": "init-1",
          "name": "Zero Trust Implementation",
          "status": "in_progress",
          "teamId": "platform",
          "periodId": "q3-2026"
        }
      ],
      "teams": [
        { "id": "platform", "name": "Platform Team" }
      ]
    }
  </script>
</initiative-tracker>

Attributes

Attribute Type Default Description
theme 'light' | 'dark' 'light' Color theme
group-by 'status' | 'team' | 'period' 'status' Grouping mode
sort-by 'name' | 'status' | 'team' 'name' Sort order

Status Colors

Status Background Text
proposed #e0e7ff #3730a3
planned #dbeafe #1e40af
in_progress #fef3c7 #92400e
completed #d1fae5 #065f46
on_hold #fce7f3 #9d174d
cancelled #f3f4f6 #6b7280

Integration Examples

React

import { useEffect, useRef } from 'react';
import { renderTimelineView } from '@grokify/prism/html/roadmap';
import type { JourneyRoadmap } from '@grokify/prism/schema/roadmap';

function TimelineView({ roadmap }: { roadmap: JourneyRoadmap }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.innerHTML = renderTimelineView(roadmap);
    }
  }, [roadmap]);

  return <div ref={containerRef} />;
}

Vue

<template>
  <div v-html="timelineHtml"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { renderTimelineView } from '@grokify/prism/html/roadmap';
import type { JourneyRoadmap } from '@grokify/prism/schema/roadmap';

const props = defineProps<{ roadmap: JourneyRoadmap }>();

const timelineHtml = computed(() => renderTimelineView(props.roadmap));
</script>

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@grokify/prism/dist/styles/prism-roadmap.css">
</head>
<body>
  <div id="timeline"></div>

  <script type="module">
    import { renderTimelineView } from '@grokify/prism/html/roadmap';
    import { JourneyRoadmapSchema } from '@grokify/prism/schema/roadmap';

    const response = await fetch('/api/roadmap.json');
    const data = await response.json();

    const roadmap = JourneyRoadmapSchema.parse(data);
    document.getElementById('timeline').innerHTML = renderTimelineView(roadmap);
  </script>
</body>
</html>

Data Format

MaturityGridData

{
  "title": "Platform Capabilities",
  "layers": [
    { "id": "infra", "name": "Infrastructure", "order": 1 },
    { "id": "platform", "name": "Platform", "order": 2 }
  ],
  "categories": [
    { "id": "compute", "name": "Compute" },
    { "id": "storage", "name": "Storage" }
  ],
  "capabilities": [
    {
      "id": "k8s",
      "name": "Kubernetes",
      "fullName": "Kubernetes Container Orchestration",
      "description": "Container orchestration platform",
      "layerId": "infra",
      "categoryId": "compute",
      "status": "operational",
      "owner": "Platform Team"
    }
  ],
  "maturity": {
    "k8s": { "level": 4 }
  }
}

JourneyRoadmap

See the prism-roadmap documentation for the full schema.