Open Source Project #183: Ontology Playground — Microsoft's Zero-Backend Visual Ontology Learning Tool

Microsoft's open-source pure-static web app for learning ontology design and Microsoft Fabric IQ. Visual drag-and-drop ontology designer, RDF/OWL import/export, six industry domain pre-built ontologies, nine structured courses with interactive quizzes, and a one-line embeddable widget. Zero server dependency — runs directly in the browser, deployable to GitHub Pages or Azure Static Web Apps. React 19 + TypeScript + Cytoscape.js. 2.3k Stars, MIT license.

·7 min read·Knowledge Engineering
open-sourceontologyknowledge-graphMicrosoftFabric-IQRDFOWLeducationvisualizationReactTypeScriptsemantic-web

Introduction

"Ontology is the map that lets AI understand what your business actually means. Building that map has always required fighting with dense standards and steep tooling."

This is article #183 in the "One Open Source Project a Day" series. Today's project is Ontology Playground — Microsoft's open-source zero-backend web tool for learning and designing ontologies, with a specific focus on Microsoft Fabric IQ.

Ontology appears constantly across knowledge engineering, semantic web, and enterprise AI domains, but it's notoriously hard to get started with. OWL, RDF, class hierarchies, property constraints — layers of standards and terminology that stay abstract without hands-on tooling. Ontology Playground converts those abstractions into clickable, draggable, live-preview visual graphs, paired with structured courses that go from fundamentals to working domain ontologies.

Zero backend. Zero server. Opens in any browser. 2,300 Stars. MIT license.

What You'll Learn

  • What ontology is and how it relates to knowledge graphs
  • What Microsoft Fabric IQ does, and the role ontology plays in it
  • Four core features: catalogue, designer, school, embeddable widget
  • How to export ontologies in RDF/OWL format for Fabric IQ
  • The embeddable widget: interactive ontology diagrams on any webpage with one line of HTML

Prerequisites

  • Basic knowledge graph concepts (nodes, edges, relationships)
  • Familiarity with data modeling thinking (entities, attributes, relationships)
  • No prior RDF/OWL experience needed — that's exactly what the Playground teaches

What Is Ontology

In philosophy, ontology studies "what exists." In computer science, an ontology is a formal description of knowledge in a domain: what types of entities exist, what properties they have, and what relationships connect them.

A retail domain ontology might describe:

  • Classes: Product, Order, Customer, Warehouse
  • Properties: Product has price (data property), Order placedBy Customer (object property)
  • Constraints: An Order must correspond to at least one Customer
Customer ──[placedBy]──→ Order ──[contains]──→ Product
   ↑                        ↑                      ↑
[Person]              [Transaction]          [StockItem]

This isn't a database schema. It captures business semantics: not just "these tables and columns exist," but "what these entities mean in business logic and what their relationships imply."

Ontology and AI

AI systems — especially LLM-driven agents — need more than data to understand business problems. They need semantic context:

  • "Order cancellation rate dropped 5%" requires the AI to know what an "order" is, what "cancellation" means as an operation, and 5% relative to what baseline
  • Without a semantic layer, the AI guesses or asks the user to re-explain in every conversation

That's the problem Microsoft Fabric IQ addresses.

Microsoft Fabric IQ: Semantic Foundation for Enterprise AI

Fabric IQ is the semantic layer in the Microsoft Fabric data platform. It links raw data lake content to business ontologies so AI agents can understand business meaning when querying data — not just execute SQL.

Without Fabric IQ:

AI Agent: "Show me high-value customer orders from the last 30 days"
→ AI needs to understand what "high-value customer" means
  (Is there a threshold? A customer tier table?)
→ Guesses or asks the user to explain

With Fabric IQ + ontology:

AI Agent: "Show me high-value customer orders from the last 30 days"
→ Queries the ontology: CustomerTier.HIGH_VALUE defined as annual spend > $10,000
→ Generates the correct query directly, no user explanation required

Ontology Playground is the tool for learning how to design and export ontologies for Fabric IQ.

Core Features

1. Ontology Catalogue

Six industry domains, pre-built and ready to explore:

DomainOntologyEntitiesRelationships
RetailFourth Coffee67
E-CommerceOnline Retail56
HealthcareClinical System56
FinanceBanking & Finance56
ManufacturingIndustry 4.055
EducationUniversity System56

Each ontology has a shareable deep-link URL. Open one and you get an interactive graph — click nodes to inspect properties, follow edges to explore relationships.

2. Visual Designer

Drag-and-drop design interface:

  • Node operations: add classes, set names, add data properties (field + type)
  • Relationship operations: drag connections to create object properties, set relationship names and cardinality constraints
  • Live validation: structural errors shown in real time as you design
  • Undo/redo: 50 history levels
  • Five domain starter templates: avoid blank-canvas paralysis — pick the closest template and modify

Export to RDF/XML (.rdf or .owl) in exactly the format Microsoft Fabric IQ expects. Round-trip fidelity is verified by automated tests.

3. Ontology School: Nine Structured Courses

Fundamentals track (6 articles):

  1. What ontology is and why enterprises need it
  2. RDF and OWL standards introduction
  3. Microsoft Fabric IQ overview
  4. Ontology design patterns
  5. From data model to ontology
  6. Hands-on lab: 15-entity retail ontology from scratch

Seven domain learning paths: Four progressive articles each, from concepts to hands-on practice, with live embedded graphs in every article.

Interactive features:

  • Presentation/slides mode for every article (classroom-ready)
  • Multiple-choice quizzes with immediate feedback embedded throughout

4. Embeddable Widget

One line of HTML puts an interactive ontology graph on any webpage:

<!-- Embed the Healthcare ontology from the catalogue -->
<script
  src="https://microsoft.github.io/Ontology-Playground/widget.js"
  data-ontology-id="healthcare-clinical"
  data-theme="dark"
></script>

Widget options:

  • data-theme: dark or light
  • data-ontology-id: catalogue item ID
  • data-ontology-url: external RDF file URL
  • data-ontology-b64: base64-encoded inline RDF

Useful for embedding ontology diagrams into documentation, blog posts, or internal wikis.

Tech Stack

The entire application is pure static — zero server, zero backend:

LayerTechnology
FrameworkReact 19 + TypeScript 5
Graph renderingCytoscape.js (fcose layout)
State managementZustand
Build toolVite
AnimationFramer Motion
Markdownmarked (build-time)

RDF handling: a custom parser and serializer with full round-trip fidelity for OWL classes, datatype properties, object properties, and cardinality constraints.

Deployment

GitHub Pages (Simplest)

# Fork the repository
# Go to Settings > Pages > enable GitHub Actions deployment
# Every push to main deploys automatically

Azure Static Web Apps

A GitHub Actions workflow is already configured in the repo. Connect your Azure SWA resource to the GitHub repository and it deploys on push.

Local Development

git clone https://github.com/microsoft/Ontology-Playground
cd Ontology-Playground
npm install
npm run dev
# Open http://localhost:5173

Optional: AI Ontology Builder

Enable via environment variable (requires Azure OpenAI):

VITE_ENABLE_AI_BUILDER=true

With this on, describe a business domain in natural language and the AI drafts an initial ontology structure. Then refine it in the visual designer.

One-Click Catalogue Contributions

GitHub device-flow sign-in unlocks a "submit to catalogue" flow: the app forks the repo, creates a branch, commits your RDF file and metadata, and opens a pull request — all automatically.

Resources

Summary

Ontology Playground solves a specific onboarding friction: ontology concepts aren't intrinsically hard, but the lack of immediately usable hands-on tooling has always been the real barrier. RDF/OWL specification documents are dense. Professional ontology editors like Protégé are complete but steep. Opening a browser, dragging out a retail ontology in five minutes, and exporting valid RDF — that difference matters significantly for learners.

The broader context: as AI agents deploy deeper into enterprise settings, "how do we make AI correctly understand business semantics" becomes a genuine engineering problem, not a theoretical one. Fabric IQ is Microsoft's architectural answer. Ontology Playground is the learning path to getting there.

If you're building on Microsoft Fabric for enterprise data, or if you're interested in semantic web and knowledge graphs but unsure where to start, this is worth an afternoon.

Explore PrimeSkills — A marketplace for handpicked AI Agents and skills. Each is validated in real enterprise workflows, stripping away hype and keeping only what truly works.

Welcome to my Homepage for more useful insights and interesting products.

← Back to Blog