SpatialDSL Studio

Developed at the MICSS (Modeling Intelligent Complex Software and Systems) lab
AnSyMo (Antwerp Systems and Software Modeling) group
University of Antwerp

Overview

A full-stack model-driven engineering platform for designing domain-specific languages and working with models end-to-end.

Live demo: https://dsl-studio.micss-lab.be

You can:

• Define metamodels (classes, attributes, references, constraints)
• Import and export common EMF Ecore metamodels and XMI instance models
• Create models that conform to those metamodels
• Define Sirius-style viewpoints and diagram representation descriptions
• Project models into 2D and 3D views
• Define metaclass-level fallback notation and representation-specific notation overrides
• Define transformation rules (LHS/RHS/NAC)
• Build code generation projects with templates
• Manage access with roles and resource sharing

SpatialDSL Studio is Sirius-inspired, not currently file-compatible with Sirius Desktop projects. Ecore/XMI semantic interchange is supported with limits; Sirius .odesign and .aird import/export are not implemented yet. See Sirius Desktop Compatibility.

Multi-Layer Architecture

Spatial DSL Studio implements a multi-level modeling architecture based on Model-Driven Engineering principles (MOF). The application provides tools for defining metamodels, creating conforming models, visualizing them in both 2D and 3D spaces, applying model transformations, and generating code from models.

The tool follows a four-layer architecture:

• Meta-Metamodel Level (M3): Core language definition. Metamodels must conform to meta-metamodels
• Metamodel Level (M2): Domain-specific languages defined as instances of the meta-metamodel
• Model Level (M1): Concrete models conforming to their metamodels
• View Level (M1): 2D and 3D projections of model content
• Code Generation Level (M0): Auto code generation from the designed models(Template-based)

Tech Stack

• Frontend: React + TypeScript + Material UI
• Backend: Node.js + Express + TypeScript
• Database: PostgreSQL + Prisma ORM
• Visualization: Konva (2D) and Three.js / React Three Fiber (3D)
• Deployment: Docker Compose (frontend + backend + database)

Repository Structure

• frontend/ - React application, editors, dashboards, user workflows
• backend/ - Express API, business services, auth, RBAC, sharing
• shared/ - Shared type contracts used by frontend and backend
• docker-compose.yml - Full-stack container orchestration

Quick Start

Option A: Docker (recommended)

docker compose up --build

The Docker backend applies Prisma migrations before it starts. Development Docker also runs the seed script by default; set ADMIN_EMAIL and ADMIN_PASSWORD in the root .env if you want that seed to create or promote an admin account.

Then open:

• App: http://localhost:3000
• API: http://localhost:3002

Option B: Local development

Run backend and frontend in separate terminals:

# backend
cd backend
npm ci
npm run dev

# frontend
cd frontend
npm ci
npm start

For complete setup requirements (database, env vars, migrations), see the getting started docs.

Documentation

Start Here

• Documentation Hub

Getting Started

• Local Setup
• Docker Setup
• Environment Configuration

User Guides

• Metamodels
• Models
• Views (2D and 3D)
• Viewpoints and Representation Descriptions
• Transformations
• Code Generation
• Roles and Sharing

Technical References

• API Reference
• Data Model
• Architecture
• Sirius Desktop Compatibility