# Ontology-Playground | Microsoft | Knowledge Base | Instagit

Free, open-source web app for learning about ontologies and Microsoft Fabric IQ. Explore a catalogue of pre-built ontologies, design your own visually, export as RDF/XML, and share interactive diagrams. Zero backend, fully static.

GitHub Stars: 2k

Repository: https://github.com/microsoft/Ontology-Playground

---

## Articles

### [How Accessibility Themes Are Contrast-Checked in Ontology Playground: A WCAG 2.1 Implementation Guide](/microsoft/Ontology-Playground/how-are-accessibility-themes-contrast-checked)

Learn how Ontology Playground automatically contrast-checks accessibility themes against WCAG 2.1 standards. Discover the automated testing process for reliable accessibility.

- Tags: how-to-guide
- Published: 2026-07-23

### [How the Path Finder Panel Computes Entity Relationships Using Breadth‑First Search](/microsoft/Ontology-Playground/what-algorithm-does-the-path-finder-panel-use-to-compute-entity-relationships)

Discover how the Path Finder panel computes entity relationships using Breadth-First Search BFS algorithm. Find shortest paths in ontology relationship graphs level by level.

- Tags: internals
- Published: 2026-07-23

### [How Catalogue Ontologies Are Compiled in Microsoft Ontology-Playground](/microsoft/Ontology-Playground/how-are-catalogue-ontologies-compiled-during-the-build-process)

Learn how Microsoft Ontology-Playground compiles catalogue ontologies at build time. The TypeScript compiler validates metadata, parses RDF/OWL, and outputs a single JSON artifact.

- Tags: internals
- Published: 2026-07-23

### [How to Build a Mobile Responsive Layout with Panel Drawers in React](/microsoft/Ontology-Playground/how-is-the-mobile-responsive-layout-achieved-with-panel-drawers)

Learn how to build a mobile responsive layout with panel drawers in React. This article explains using state-driven rendering and CSS media queries for optimal mobile experiences.

- Tags: getting-started
- Published: 2026-07-23

### [How Microsoft Ontology Playground Implements Its Theme System Using CSS Custom Properties](/microsoft/Ontology-Playground/what-is-the-implementation-of-the-theme-system-using-css-custom-properties)

Discover how Microsoft Ontology Playground uses CSS custom properties for its theme system. Learn about overriding variables and instant theme switching for a dynamic UI.

- Tags: internals
- Published: 2026-07-23

### [How the Guided Tour Feature Uses localStorage for Persistence in Ontology-Playground](/microsoft/Ontology-Playground/how-does-the-guided-tour-feature-use-localstorage-for-persistence)

Learn how Ontology-Playground uses localStorage for persistence in its guided tour. It stores a dismissal flag to conditionally render the tour component.

- Tags: internals
- Published: 2026-07-23

### [Supported Import and Export Formats in Microsoft Ontology Playground: RDF, JSON, and YAML](/microsoft/Ontology-Playground/what-are-the-supported-import-export-formats-and-how-do-they-work)

Explore supported import and export formats like RDF, JSON, and YAML in Microsoft Ontology Playground. Learn how to use these formats for your ontology projects.

- Tags: api-reference
- Published: 2026-07-23

### [Data Structure for Learning Paths and Courses in Ontology School: A Technical Deep Dive](/microsoft/Ontology-Playground/what-is-the-data-structure-for-learning-paths-and-courses-in-ontology-school)

Explore Ontology School's data structure for learning paths and courses. Discover how LearnCourse and LearnArticle objects organize content from Markdown into typed JSON manifests. Learn more at Microsoft Ontology Playground.

- Tags: deep-dive
- Published: 2026-07-23

### [Zustand Store Structure for Managing Application State in Ontology-Playground](/microsoft/Ontology-Playground/what-is-the-structure-of-the-zustand-store-for-managing-application-state)

Explore the Zustand store structure in Ontology-Playground. Discover how the app organizes state into Ontology, UI, Quest, and Query slices with dedicated actions for efficient management.

- Tags: internals
- Published: 2026-07-23

### [RDF Parser/Serializer Implementation for Round-Trip Support in Ontology-Playground](/microsoft/Ontology-Playground/what-is-the-implementation-of-the-rdf-parser-serializer-for-round-trip-support)

Explore the RDF parser/serializer implementation for round-trip support in Ontology-Playground. Learn how custom OWL annotations preserve metadata during RDF/XML conversion.

- Tags: internals
- Published: 2026-07-23

### [How Ontology Playground Handles GitHub Pages Deployment Base Path Configuration](/microsoft/Ontology-Playground/github-pages-deployment-handle-base-path-configuration-ontology-playground)

Learn how Ontology Playground automatically configures GitHub Pages deployment base paths using a custom Vite function. Discover how it detects repository names and allows manual overrides for seamless deployment.

- Tags: how-to-guide
- Published: 2026-07-21

### [How Domain Starter Templates Are Structured in Microsoft Ontology Playground: Retail, Healthcare & Finance](/microsoft/Ontology-Playground/how-domain-starter-templates-structured-ontology-playground-retail-healthcare-finance)

Explore the structure of domain starter templates like Retail, Healthcare, and Finance in Microsoft Ontology Playground. Learn how folder structure and metadata files organize OWL ontology definitions.

- Tags: how-to-guide
- Published: 2026-07-21