OntoKit Web

The web frontend for OntoKit — a collaborative OWL ontology curation platform.

Genesis

OntoKit grew out of a collaboration between two open-source projects that share a common need: making rules and laws accessible through structured, community-driven ontologies.

• FOLIO (Free Open Legal Information Ontology) — a structured vocabulary for governmental rules and laws (GitHub)
• Catholic Semantic Canon (Catholic Digital Commons) — a structured vocabulary for the rules and laws of faith (GitHub)

Both projects benefit from grassroots-level collaborative ontology editing — the kind of tooling that didn't exist in a modern, accessible form. That shared need is what drove OntoKit's creation.

Features

• Modern React-based UI with Next.js 15
• Real-time collaborative editing
• Class hierarchy visualization
• Multi-language support (i18n)
• Dark mode support
• Responsive design

Tech Stack

• Framework: Next.js 15 (App Router)
• UI: React 19, Tailwind CSS, Radix UI
• State: Zustand, TanStack Query
• Auth: NextAuth.js with Zitadel
• i18n: next-intl
• Visualization: D3.js

Quick Start

Prerequisites

• Node.js 22+
• npm or pnpm

Development Setup

# Clone the repository
git clone https://github.com/CatholicOS/ontokit-web.git
cd ontokit-web

# Install dependencies
npm install

# Copy environment configuration
cp .env.example .env.local
# Edit .env.local with your settings

# Run the development server
npm run dev

The app will be available at http://localhost:3000

Docker

# Build the image
docker build \
  --build-arg NEXT_PUBLIC_API_URL=http://api:8000 \
  --build-arg NEXT_PUBLIC_WS_URL=ws://api:8000 \
  -t ontokit-web .

# Run the container
docker run -p 3000:3000 ontokit-web

Project Structure

ontokit-web/
├── app/                    # Next.js app router pages
│   ├── [locale]/          # Internationalized routes
│   ├── api/               # API routes (BFF)
│   └── globals.css        # Global styles
├── components/
│   ├── ui/                # Reusable UI components
│   ├── editor/            # Ontology editor components
│   └── collab/            # Collaboration components
├── lib/
│   ├── api/               # API client
│   ├── collab/            # WebSocket collaboration
│   ├── ontology/          # OWL type definitions
│   └── i18n/              # Internationalization
├── messages/              # Translation files
├── public/                # Static assets
├── tailwind.config.ts
├── next.config.ts
└── README.md

Scripts

# Development
npm run dev         # Start development server
npm run build       # Build for production
npm run start       # Start production server

# Quality
npm run lint        # Run ESLint
npm run lint:fix    # Fix ESLint issues
npm run type-check  # TypeScript type checking

# Testing
npm run test        # Run tests
npm run test:coverage  # Run tests with coverage

Environment Variables

Variable	Description
NEXT_PUBLIC_API_URL	Backend API URL
NEXT_PUBLIC_WS_URL	WebSocket URL for collaboration
ZITADEL_ISSUER	Zitadel OIDC issuer URL
ZITADEL_CLIENT_ID	Zitadel client ID
ZITADEL_CLIENT_SECRET	Zitadel client secret
NEXTAUTH_URL	NextAuth.js callback URL
NEXTAUTH_SECRET	NextAuth.js secret key

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

License

MIT License - see LICENSE file for details.