OCPN Studio is a modern web application for designing Object-centric Colored Petri Nets (OCPNs) and generating simulated OCEL 2.0 event logs — making what used to be a complex, StandardML-heavy workflow super easy and smooth, right in your browser.
- Visual OCPN editor — Create and edit places, transitions, and arcs on an interactive canvas with drag-and-drop
- Hierarchical nets — Model hierarchical object-centric Petri nets with substitution transitions, subpages, and fusion places
- Declarations — Define color sets (including record types that directly map to OCEL 2.0 objects), variables, priorities, and functions
- Simulation — Step through or auto-run simulations powered by cpnsim, our own CPN simulator written in Rust and cross-compiled to WebAssembly, running entirely in the browser
- Monitors — Define marking-size, transition-count, breakpoint, and custom data-collector monitors to observe simulation behavior and collect statistics
- State space analysis — Compute the full state space with BFS exploration, SCC decomposition, dead/home markings, place bounds, and transition liveness — with deterministic overrides for models using stochastic distribution functions
- Reachability graph — Visualize the state space as an interactive graph with clickable nodes showing full marking details
- OCEL 2.0 export — Export simulated event logs in the OCEL 2.0 standard format for process mining
- File format support — Open and save
.ocpn(native JSON),.cpn(CPN Tools XML),.pnml(PNML, partial support), and.json(CPNPy) files - Auto-layout — Arrange nets automatically using Dagre, ELK, or our own Sugiyama-based layouting algorithm developed in our research
- Built-in examples — Get started instantly with the Airport Ground Handling process example via the Open button
- AI assistant — Optional AI-powered sidebar for modeling guidance (OpenAI API key required)
The easiest way to use OCPN Studio is the hosted version at elte-dsed.github.io/ocpn-studio.
- Click the ? (Help) button in the top-right corner for an interactive guide that explains the app's functionality in detail.
- Click Open in the top-left corner and select the built-in Airport Ground Handling example to explore a complete OCPN model.
- Use the Feedback button in the app to share your thoughts — feedback is very much welcome!
git clone https://github.com/ELTE-DSED/ocpn-studio.git
cd ocpn-studio
pnpm install| Command | Description |
|---|---|
pnpm dev |
Start the dev server at localhost:5173 |
pnpm build |
TypeScript check + production build |
pnpm lint |
Run ESLint (zero-warning policy) |
pnpm preview |
Preview the production build locally |
pnpm deploy |
Build and deploy to GitHub Pages |
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build | Vite |
| Canvas | React Flow |
| State | Zustand + Zundo (undo/redo) |
| Simulation | @rwth-pads/cpnsim (Rust/WebAssembly) |
| Styling | Tailwind CSS + shadcn/ui (Radix primitives) |
| Layout | Dagre + ELK |
| Linting | ESLint 10 + typescript-eslint |
Contributions are welcome! Feel free to open an issue or submit a pull request — any help is greatly appreciated. The easiest way to reach out is via the Feedback button directly in the app.
This project is licensed under the MIT License. See the LICENSE file for details.
Based on the React Flow starter (Vite + TS) template by webkid GmbH.