Ontology Playground (Preview) ☕

Note: This project was developed with AI-assisted coding.

Try it live → microsoft.github.io/Ontology-Playground

A free, open-source web application for learning about ontologies and Microsoft Fabric IQ. Explore pre-built ontologies, design your own in a visual editor, export as RDF/XML, and share interactive diagrams — all from a fully static site with zero backend dependencies.

Features

Interactive Graph Exploration

Cytoscape.js-powered graph that renders any ontology as an interactive node-and-edge diagram. Pan, zoom, click nodes to inspect properties, and use the live search bar to filter entities and relationships.

Ontology Catalogue

A curated library of official and community-contributed ontologies spanning six domains (Retail, E-Commerce, Healthcare, Finance, Manufacturing, Education). Browse by category, search by name or tags, load any ontology with one click, and view its RDF source. Every ontology has a shareable deep link (/#/catalogue/official/cosmic-coffee).

Visual Ontology Designer

A full-screen, split-pane editor for creating ontologies from scratch or editing existing ones. Add entity types with icons, colors, and typed properties; define relationships with cardinalities; see a live graph preview that updates as you work. Includes undo/redo (50 levels), real-time validation, and export to RDF/XML or JSON.

RDF Import & Export

Full round-trip support for RDF/XML (OWL classes, datatype properties, object properties with cardinalities). Import .rdf / .owl files, export in the exact format Microsoft Fabric IQ expects, and verify fidelity with automated round-trip tests.

One-Click Catalogue PR

Sign in with GitHub (device flow) and submit your ontology to the community catalogue directly from the designer — the app forks the repo, creates a branch, commits the RDF + metadata, and opens a pull request automatically.

Embeddable Widget

A self-contained JavaScript file (ontology-embed.js) that renders an interactive ontology viewer on any web page with a single <script> tag. Supports dark/light themes, multiple loading methods (catalogue ID, URL, inline base64), and click-to-inspect.

Ontology School

A structured learning hub (/#/learn) with 9 courses spanning conceptual learning paths and hands-on labs:

• Ontology Fundamentals — 6 articles covering core concepts (What is an Ontology? → RDF/OWL → Fabric IQ → Build Your First → Design Patterns → Contributing)
• 7 Domain Learning Paths — Fourth Coffee, E-Commerce, Finance, Healthcare, Manufacturing, University, and HR System. Each path has 4 progressive articles that build an ontology step-by-step, with live embedded graphs showing new entities at each stage.
• IQ Lab: Retail Supply Chain — A 7-step hands-on lab that builds a 15-entity ontology from scratch.

Every article supports presentation mode (slides split at ## headings) and includes interactive quizzes with instant feedback. Ontology embeds load live graphs from the catalogue with optional diff highlighting.

Quest System

Five progressive quests that guide users through ontology concepts with multi-step instructions, hints, progress bars, and achievement badges.

Natural Language Query Playground

Type natural language questions ("Which customers placed orders?") and see how they map to ontology entities and relationships — a preview of Fabric IQ's NL2Ontology capability.

Command Palette & Keyboard Shortcuts

Press ⌘K / Ctrl+K anywhere to open a searchable command palette. Jump to the Catalogue, Designer, Ontology School, Import/Export, Help, and more without leaving the keyboard. Press ? for quick help access.

Starter Templates

The designer offers five domain templates (Retail, Healthcare, Finance, IoT, Education) so new users never face a blank page. Each template creates 3 entities with properties and 2 relationships, ready to customise.

Interactive Onboarding Tour

First-time visitors get a 5-step guided tour with a spotlight overlay that highlights the Header, Graph, Quests, Inspector, and Designer in sequence.

Getting Started

Prerequisites

• Node.js 18+
• npm 9+

Installation

cd Ontology-Playground
npm install

Development

npm run dev

Production Build

npm run build

The build pipeline compiles the catalogue, compiles learning content markdown, type-checks, bundles the app, and builds the embed widget. Output is in build/.

Running Tests

npm test            # single run
npm run test:watch  # watch mode

Deployment

Azure Static Web Apps (primary)

The repo ships with a GitHub Actions workflow that deploys to Azure SWA on every push to main.

1. Create a Static Web App in the Azure Portal
2. Connect to your GitHub repository
3. Copy the deployment token and add it as the GitHub secret
4. Push to main — the workflow handles the rest
5. PR preview environments are created automatically for pull requests

GitHub Pages (for forks)

A separate workflow deploys to GitHub Pages, ideal for forks:

1. Fork this repo
2. Go to Settings → Pages → Source and select GitHub Actions
3. Push to main

Technologies

• React 19 + TypeScript 5
• Cytoscape.js — Graph visualization (fcose layout)
• Zustand — State management
• Vite — Build tool
• Framer Motion — Animations
• Lucide Icons — Icon library
• marked — Markdown compilation (build-time)

License

MIT