Spatial DSL Studio

Overview

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

You can:

• Define metamodels (classes, attributes, references, constraints)
• Create models that conform to those metamodels
• Visualize and edit diagrams in 2D and 3D
• Define transformation rules (LHS/RHS/NAC)
• Build code generation projects with templates
• Manage access with roles and resource sharing

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
• Visualization Level (M1): 2D and 3D representations of models
• 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

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
• Diagrams (2D and 3D)
• Transformations
• Code Generation
• Roles and Sharing

Technical References

• API Reference
• Data Model
• Architecture