A Markdown-to-interactive-UI rendering engine.
Write enhanced Markdown with embedded ui: components and render rich, interactive documents in React.

---

Install

npm install @glyphjs/compiler @glyphjs/runtime @glyphjs/components

Requires React 18+ and ReactDOM 18+ as peer dependencies.

Quick Start

import { compile } from '@glyphjs/compiler';
import { createGlyphRuntime } from '@glyphjs/runtime';
import { defaultComponents } from '@glyphjs/components';

const markdown = `
# Hello Glyph

\`\`\`ui:callout
type: tip
title: It works!
content: This Markdown is now a rich, interactive document.
\`\`\`
`;

const { ir } = compile(markdown);
const runtime = createGlyphRuntime({
  components: defaultComponents,
  theme: 'light',
});

function App() {
  return <runtime.GlyphDocument ir={ir} />;
}

Features

• 29 Interactive Components — Rich catalog covering content, data visualization, diagrams, and interactivity
• Markdown Support — Enable inline markdown formatting (bold, italic, links, code) in component text fields
• Smart Graph Interactions — Configurable interaction modes prevent accidental zooming when scrolling
• Type-Safe — Full TypeScript support with Zod schema validation
• Themeable — Built-in light/dark themes with CSS custom properties
• SSR Compatible — Server-side rendering support for Next.js, Astro, and more
• Extensible — Plugin API for custom components and runtime extensions

Packages

Package	Description
@glyphjs/types	TypeScript type definitions for IR, AST, plugins, and runtime
@glyphjs/schemas	Zod schemas for all built-in UI components
@glyphjs/parser	Remark plugin for parsing ui: fenced code blocks
@glyphjs/ir	IR utilities: validation, diffing, patching, migration
@glyphjs/compiler	End-to-end Markdown-to-IR compiler
@glyphjs/runtime	React rendering engine with theming, layouts, and plugins
@glyphjs/components	29 built-in UI components
@glyphjs/brand	Logo assets and palette constants

Components

29 built-in components covering content structuring, data visualization, diagramming, and interactivity:

Category	Components
Content	Callout, Tabs, Steps, Accordion, Card, KPI, Annotate
Data	Table, Chart, Comparison, CodeDiff, Matrix
Diagrams	Graph, Relation, Flowchart, Sequence, MindMap, Architecture, FileTree
Narrative	Timeline, Infographic, Equation
Interactive	Quiz, Poll, Rating, Ranker, Slider, Form, Kanban

Browse the full catalog in the component docs.

Documentation

Full documentation is available at vledicfranco.github.io/glyphjs.

• Getting Started -- Install and render your first document
• Authoring Guide -- Markdown syntax and ui: block reference
• Components -- Full component catalog with live examples
• Playground -- Try Glyph JS in your browser
• IR Spec -- Intermediate Representation reference
• Plugin API -- Extend the runtime with custom components
• Theming -- Customize colors, typography, and spacing

Development

pnpm install          # Install dependencies
pnpm build            # Build all packages (Turborepo)
pnpm test             # Unit tests (Vitest)
pnpm lint             # ESLint + Prettier check
pnpm typecheck        # TypeScript type check

License

MIT