Skip to content
Glyph JS

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

[0.9.2] - 2026-03-05

Added

  • Syntax highlighting in code blocks: All fenced code blocks now render with full token colors via lowlight + hast-util-to-jsx-runtime. Supports 42 common languages (TypeScript, Python, Rust, Go, SQL, shell, JSON, etc.) plus 28 functional and scientific extras: Scala, Haskell, Clojure, Elixir, Erlang, F#, OCaml, Elm, Scheme, SML, Julia, MATLAB, LaTeX, Coq, Prolog, and more. Token colors are driven by 13 new --glyph-code-token-* CSS custom properties, overridable in any custom theme.
  • Nested ui: components in ui:tabs and ui:steps: Tab and step content fields now compile recursively — any ui: component, code fence, list, or blockquote can be embedded directly inside a content: field using standard Markdown fenced block syntax. Nested blocks are stored in block.children and rendered via the renderBlock prop.
  • GFM strikethrough: ~~text~~ now renders as <del> in prose and in all inline markdown-enabled component fields.

Changed

  • Inline markdown always-on: The markdown: true YAML flag and parseComponentMarkdown compiler option have been removed. Inline markdown parsing is now unconditionally active for all 26 text-heavy components. Existing documents with or without the flag continue to render identically.
  • screenshot viewport-matched max-width: The CLI render command now sets the document max-width to match the --width option (default 1280px) instead of the former hardcoded 64rem. This ensures multi-column layouts render at the requested width.
  • Theme system expanded: GlyphThemeVarKey grows from 53 to 66 required tokens to include the 13 code-token color keys. Custom themes and the Obsidian plugin theme-sync must add these keys (all have sensible built-in fallbacks).

[0.9.1] - 2026-03-05

Added

  • CLI --viewport-height flag (export & render): Controls Playwright viewport height in pixels. Default 1024 for PDF export, 800 for render. Prevents tall blocks from being clipped.
  • CLI --max-width flag (export): Sets the CSS max-width of the content column. Default 64rem; pass none to fill the full viewport width.
  • CLI --device-scale-factor flag (export md): Sets the HiDPI device pixel ratio for block screenshots. Default 2.

Fixed

  • markdown: true runtime validation error: Schema fields that the compiler converts from string to InlineNode[] now accept both types. Previously, the runtime re-validated already-processed IR and logged spurious “Expected string, received array” warnings, falling back to raw (unrendered) data. Affects all 22 markdown-eligible fields across callout, steps, tabs, accordion, card, kpi, comparison, quiz, infographic, timeline, poll, ranker, form, kanban, table, chart, equation, codediff, graph, relation, flowchart, and sequence.
  • serve blank render: React components now hydrate correctly in the browser. Previously the client bundle was not injected into served HTML.
  • serve live-reload injection: Live-reload script is now injected before the last </body> tag rather than the first match. The previous approach matched a literal </body> string inside the DOMPurify bundle, breaking JavaScript parsing.
  • infographic rating description: RatingItem.description now accepts string | InlineNode[] and renders via <RichText>, consistent with markdown: true behaviour on other item types.

[0.9.0] - 2026-03-04

Added

  • Compile-time variables & macros: Scalar substitution via {{key}} from frontmatter vars: keys or ui:vars blocks. Block variables (=varName) bind a rendered block to a name; suppressed block variables (=_varName) compile without rendering. Parameterized block templates (=_name(p1,p2)) combined with {{name("arg1","arg2")}} invocation enable reusable, data-driven block patterns. All expansion is compile-time — the IR remains flat and schema-valid.
  • Layout components — three new primitives for 2D document structure:
    • ui:columns: Horizontal grid. ratio: [2, 1] distributes width as CSS fr units; gap accepts any CSS length. children is an ordered list of suppressed block variable names resolved at compile time.
    • ui:rows: Vertical counterpart to ui:columns. Nestable inside column cells — ratio takes effect when the container height is constrained. height: 100% ensures fr units work in nested contexts.
    • ui:panel: Wraps a single suppressed block variable in a styled container. Four styles: card (default), bordered, elevated, ghost. Accepts any block including ui:columns and ui:rows.
  • 12 starter and community themes in themes/: default, dark, minimal, high-contrast, warm plus community themes catppuccin-mocha, tokyo-night, solarized-dark, gruvbox-dark, nord, dracula, one-dark. Pass via --theme-file in CLI exports.
  • CLI --continuous flag: Renders all blocks in a single continuous page (no page breaks) for PDF export.
  • CLI --padding option: Sets page padding for PDF exports.
  • New diagnostic codes: UNDEFINED_VARIABLE, CIRCULAR_VARIABLE_REF, VARS_BLOCK_INVALID_VALUE, UNDEFINED_BLOCK_VAR, TEMPLATE_ARITY_MISMATCH, LAYOUT_CHILD_UNDEFINED.

Fixed

  • CLI PDF full-bleed theme background: Theme background color now fills the entire page, not just the content area.
  • Obsidian plugin Reading View rendering: Fixed blank render caused by enhance.js crash; switched to post-processor approach.
  • Obsidian plugin BRAT discovery: Added root manifest.json for BRAT plugin manager.
  • Obsidian plugin CI: Cross-repo publishing to glyphjs-obsidian dist repo now uses DIST_REPO_PAT.

[0.8.0] - 2026-03-03

Added

  • Two-tier theme system: Reduced required CSS variables from ~155 to 53 semantic tokens (GlyphThemeVarKey). Component-specific variables are now optional CSS-only overrides that cascade from the Tier 1 tokens via built-in fallback chains — no TypeScript required. Breaking for theme authors: drop the ~100 removed component-specific vars and add the 4 new --glyph-color-* state vars.
  • Semantic state tokens: --glyph-color-success, --glyph-color-warning, --glyph-color-error, --glyph-color-info — a universal palette for state-bearing components (KPI, Kanban, Steps, Comparison, Quiz, Callout, Form).
  • Shared palette: --glyph-palette-color-1..10 replaces the old --glyph-chart-color-N and --glyph-timeline-color-N variables. One palette drives charts, timelines, infographics, architecture diagrams, and graph groups.
  • --glyph-radius-xs: Extra-small border radius token (0.25rem).
  • Obsidian plugin (@glyphjs/obsidian-plugin): Renders all 28 ui:* component types natively in Obsidian notes (Reading View + Live Preview). Automatically maps Obsidian theme CSS vars to GlyphJS Tier 1 tokens. Includes a Settings tab with debug logging. Distributable via BRAT.
  • glyphjs lint command: Validates ui: blocks in a Markdown file and reports diagnostics. Supports --format json for structured output suitable for LLM tool loops, --strict to promote warnings to errors, and --quiet for exit-code-only use in scripts. Exit 0 = clean, 1 = errors, 2 = unreadable input.

Changed

  • GlyphThemeVars type now contains exactly 53 required keys (was ~155). Custom themes must be updated.
  • --glyph-chart-color-1..10 renamed to --glyph-palette-color-1..10.
  • Dynamic CSS var templates in Kpi, Callout, Comparison, and Kanban components replaced with static color maps keyed by sentiment/type. The old vars remain valid CSS overrides; TypeScript no longer requires them.

Removed

  • ~100 component-specific CSS variables removed from GlyphThemeVarKey (still work as optional CSS overrides): all --glyph-callout-*-bg/border, --glyph-kanban-*, --glyph-steps-*, --glyph-kpi-*, --glyph-comparison-*, --glyph-chart-bullish/bearish, --glyph-timeline-*, --glyph-relation-*, --glyph-infographic-*, --glyph-table-*, --glyph-poll-*, --glyph-rating-star-empty/hover, --glyph-slider-*, --glyph-annotate-*, --glyph-form-error, --glyph-grid, --glyph-edge-color, --glyph-node-*, --glyph-icon-*, --glyph-blockquote-*, --glyph-codediff-gutter-bg.
  • Dropped entirely (no longer valid CSS overrides): --glyph-shadow-glow, --glyph-text-shadow, --glyph-backdrop, --glyph-gradient-accent.

[0.6.0] - 2026-02-07

Added

  • Interaction modes for Architecture component: Added zoom/pan interaction modes (modifier-key, click-to-activate, always) to Architecture component, completing the interaction modes feature across all diagram components
  • interactionMode and showZoomControls schema fields for Architecture component
  • Interactive overlay and zoom controls for Architecture diagrams
  • Storybook stories demonstrating all three interaction modes for Architecture

Changed

  • All 4 diagram components (Graph, Flowchart, Relation, Architecture) now support consistent zoom/pan interaction modes with the same API

[0.5.1] - 2026-02-07

Fixed

  • TypeScript compilation error with xmlns attribute in ForeignObjectText component

[0.5.0] - 2026-02-07

Added

  • Extended markdown support to 10 additional components: Tabs, Kanban, Table, Chart, Equation, CodeDiff (standard components) and Graph, Relation, Flowchart, Sequence (diagram components)
  • Total components with markdown support increased from 17 to 27 (68% coverage)
  • measureText utility for dynamic text measurement in SVG diagrams
  • ForeignObjectText component for rendering rich text in SVG contexts using foreignObject
  • inlineToText utility for converting InlineNode[] to plain strings for SVG text elements
  • Markdown support in diagram node labels, edges, and titles
  • Dynamic node sizing in graph layouts based on label content
  • Storybook examples demonstrating markdown in Tabs, Graph, Flowchart, and Sequence components

Changed

  • Graph, Relation, Flowchart, and Sequence components now support string | InlineNode[] union types for labels
  • Chart component now supports markdown in axis labels and series names
  • Table component now supports markdown in column labels
  • Updated component documentation to reflect 27 components with markdown support

[0.4.0] - 2026-02-06

Added

  • Markdown support in component text fields: Enable inline markdown formatting (bold, italic, links, code, strikethrough) in component text fields by setting markdown: true in component YAML or using the parseComponentMarkdown compiler option. Supports 17 components including Callout, Card, Accordion, Steps, Timeline, Quiz, Poll, and more. (#74)
  • RichText component in @glyphjs/runtime for rendering string | InlineNode[] union types
  • parseInlineMarkdown() utility function in compiler for parsing markdown strings to InlineNode arrays
  • Compiler option parseComponentMarkdown to enable markdown parsing globally for all components
  • Configurable interaction modes for graph visualizations: Add three interaction modes to prevent accidental zooming when scrolling past graphs: modifier-key (Alt+scroll to zoom), click-to-activate (click to enable zoom/pan), and always (traditional behavior). Includes button-driven zoom controls (+/-/reset) for all visualization components (Graph, Flowchart, Relation)
  • useZoomInteraction hook for managing D3 zoom behavior with mode-specific filters
  • InteractionOverlay component for visual feedback (tooltips, activation prompts)
  • ZoomControls component with accessible button-driven zoom controls
  • E2E tests for all interaction modes and zoom controls (30 tests total)

Changed

  • Component data TypeScript interfaces now support string | InlineNode[] union types for text fields, enabling both plain strings and formatted content
  • All 17 interactive component schemas now include optional markdown: boolean field (defaults to false for backward compatibility)
  • BREAKING: Default interactionMode for Graph, Flowchart, and Relation components changed from 'always' to 'modifier-key'. To restore old behavior, set interactionMode: 'always' in component data. See migration guide for details

[0.1.0] - 2026-02-02

Added

  • Initial monorepo setup with 8 packages
  • 8 UI components: Callout, Tabs, Steps, Table, Graph, Relation, Chart, Timeline
  • Architecture component for interactive architecture diagrams
  • Compiler pipeline: markdown → AST → IR → React components
  • Zod-based schema validation for all components
  • Theming system with light/dark modes
  • Animation, navigation, and diagnostics systems
  • SSR support
  • Storybook stories for all components
  • Astro/Starlight documentation site
  • Playground for live editing
  • GitHub Actions CI/CD (lint, test, e2e, a11y, bundle size, docs deploy, npm publish)
  • Changesets for version management