Gallery
The gallery showcases practical Glyph Markdown examples organized by use case. Each example includes the raw source so you can copy it into your own documents or paste it into the Playground to see it render live.
Technical Documentation
Use callouts and steps to build migration guides and tutorials.
View Glyph Markdown source
# Migrating to v2
```ui:callouttype: warningtitle: Breaking Changes Aheadcontent: | The v2 release includes several breaking changes to the compiler API. Please read this guide carefully before upgrading.```
```ui:stepssteps: - title: Update Dependencies status: completed content: Bump all @glyphjs packages to ^2.0.0 and run pnpm install. - title: Replace Deprecated Imports status: active content: Replace renderSync with the async compile function. - title: Run Tests status: pending content: Execute your test suite to verify nothing is broken.```
```ui:callouttype: tiptitle: Need Help?content: Open an issue on GitHub or visit the discussion board.```Installation Guides
Tabs organize variant content like platform-specific instructions or language alternatives.
View Glyph Markdown source
## Getting Started
```ui:tabstabs: - label: npm content: | Install the core packages using **npm**:
npm install @glyphjs/runtime @glyphjs/compiler @glyphjs/components
Then import the compiler and runtime in your project to start rendering Glyph documents. - label: pnpm content: | Install the core packages using **pnpm**:
pnpm add @glyphjs/runtime @glyphjs/compiler @glyphjs/components
Then import the compiler and runtime in your project to start rendering Glyph documents. - label: yarn content: | Install the core packages using **yarn**:
yarn add @glyphjs/runtime @glyphjs/compiler @glyphjs/components
Then import the compiler and runtime in your project to start rendering Glyph documents.```
```ui:callouttype: tiptitle: Recommendedcontent: We recommend pnpm for its speed and efficient disk usage.```Data Visualization
Charts and tables bring data to life directly inside your documents.
View Glyph Markdown source
## Quarterly Revenue
```ui:charttype: barseries: - name: Revenue data: - { x: "Q1", y: 120 } - { x: "Q2", y: 185 } - { x: "Q3", y: 210 } - { x: "Q4", y: 290 }xAxis: { key: x, label: Quarter }yAxis: { key: y, label: "Revenue ($k)" }```
```ui:tablecolumns: - key: quarter label: Quarter - key: revenue label: Revenue sortable: true - key: growth label: Growth sortable: truerows: - { quarter: Q1, revenue: "$120k", growth: "—" } - { quarter: Q2, revenue: "$185k", growth: "+54%" } - { quarter: Q3, revenue: "$210k", growth: "+14%" } - { quarter: Q4, revenue: "$290k", growth: "+38%" }```Architecture Diagrams
Graph and relation components visualize system architecture and data models. The architecture component supports nested zones and built-in icons.
View Glyph Markdown source
## System Architecture
```ui:graphtype: flowchartnodes: - id: client label: Browser Client - id: api label: API Gateway - id: auth label: Auth Service - id: db label: PostgreSQL - id: cache label: Redis Cacheedges: - from: client to: api label: HTTPS - from: api to: auth label: JWT - from: api to: db label: SQL - from: api to: cache label: Cache```Platform Architecture
View Glyph Markdown source
```ui:architecturetitle: Platform Architecturechildren: - id: cloud label: Cloud Region type: zone children: - id: frontend label: Frontend type: zone children: - id: cdn label: CDN icon: cloud - id: lb label: Load Balancer icon: loadbalancer - id: services label: Services type: zone children: - id: api label: API Gateway icon: gateway - id: auth label: Auth icon: server - id: worker label: Workers icon: function - id: data label: Data type: zone children: - id: db label: PostgreSQL icon: database - id: cache label: Redis icon: cache - id: queue label: Queue icon: queue - id: users label: Users icon: useredges: - from: users to: cdn label: HTTPS - from: cdn to: lb - from: lb to: api - from: api to: auth - from: api to: db label: queries - from: api to: cache label: reads - from: api to: queue type: async - from: queue to: worker type: async - from: worker to: dblayout: top-down```Data Model
View Glyph Markdown source
```ui:relationentities: - id: users label: User attributes: - name: id type: uuid primaryKey: true - name: email type: string - name: name type: string - id: posts label: Post attributes: - name: id type: uuid primaryKey: true - name: title type: string - name: authorId type: uuidrelationships: - from: users to: posts cardinality: "1:N" label: writes```Project Timelines
Track milestones and project progress with timelines and steps.
View Glyph Markdown source
## Product Roadmap 2026
```ui:timelineorientation: horizontalevents: - date: "2026-01" title: Alpha Release description: Core pipeline working end-to-end. - date: "2026-03" title: Beta Release description: All 8 components, theming, and layout modes. - date: "2026-06" title: v1.0 GA description: Production-ready with docs, playground, and npm packages. - date: "2026-09" title: MCP Integration description: LLM agents can create and edit documents via MCP tools.```Kitchen Sink
A comprehensive example combining multiple components in a single document.
View Glyph Markdown source
# Sprint 12 Retrospective
```ui:callouttype: infotitle: Sprint Summarycontent: | Sprint 12 focused on performance optimization and bug fixes. We closed 23 issues and shipped 2 new features.```
## Issue Breakdown
```ui:tablecolumns: - key: type label: Type - key: count label: Count sortable: true - key: closed label: Closed sortable: truerows: - { type: Bug, count: 12, closed: 11 } - { type: Feature, count: 5, closed: 4 } - { type: Chore, count: 8, closed: 8 }```
## Next Steps
```ui:stepssteps: - title: Review open bugs status: active content: Triage remaining 1 bug from Sprint 12. - title: Plan Sprint 13 status: pending content: Prioritize backlog items for next sprint. - title: Ship release status: pending content: Deploy v1.3.0 to production.```Want to try these examples yourself? Head to the Playground and paste any of the Markdown snippets above.