Skip to content

v0.8.1 Release Notes

Release Date: 2026-07-22

Highlights

  • @grokify/prism npm Package - TypeScript/JavaScript visualization tools for PRISM data

What's New

npm Package

The @grokify/prism npm package provides TypeScript-first visualization tools:

npm install @grokify/prism

Subpath Exports:

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

Zod Schemas

Runtime-validated schemas for maturity and roadmap data:

import { MaturityGridDataSchema } from '@grokify/prism/schema/maturity';
import { JourneyRoadmapSchema } from '@grokify/prism/schema/roadmap';

const grid = MaturityGridDataSchema.parse(jsonData);
const roadmap = JourneyRoadmapSchema.parse(roadmapJson);

HTML Renderers

Framework-agnostic functions that return HTML strings:

import { renderDomainView } from '@grokify/prism/html/maturity';
import { renderTimelineView } from '@grokify/prism/html/roadmap';

const domainHtml = renderDomainView(data, { theme: 'dark' });
const timelineHtml = renderTimelineView(roadmap);

Lit Components

Interactive web components for maturity visualization:

<maturity-grid theme="dark" view="by-layer" show-legend>
  <script type="application/json">
    {"layers": [...], "capabilities": [...]}
  </script>
</maturity-grid>

CSS Styles

Theme-aware stylesheets for consistent visualization:

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

Documentation

Installation

npm install @grokify/prism@0.8.1