Awesome Open Source
Awesome Open Source

SyncMeta - Near real-time collaborative modeling framework

General information

Join the chat at

For explanations, presentations, demos and links to modeling sandboxes and other stuff please visit the SyncMeta homepage.

Build and Run

First build the Docker image

$ cd syncmeta
$ docker build -t rwthacis/syncmeta .

Then you can run the image like this:

$ docker run -p 8070:8070 -e WEBHOST=<host_address> -e YJS=<yjs_address> -e OIDC_CLIENT_ID=<oidc_client_id> -d rwthacis/syncmeta

After container started to run, application will be accessible via
Also, individual widgets can be accessed via<widget_name>

SyncMeta is using YJS for interwidget communication, therefore it needs y-websocket-server instance. It can be started with following command:

docker run -p 1234:1234  -d rwthacis/y-websockets-server

Then, address of y-websockets-server instance need to be passed to SyncMeta Docker container during initialization with YJS environment variable. If websocket server is started with previous command, its address will be and this value need to be passed to SyncMeta Docker container during initialization.

Following environment variables are needed to be passed to container during initialization:

  • WEBHOST: Url address of SyncMeta application
  • YJS: Root url address of Yjs websocket server. If it is running behind reverse proxy, relative path need to be provided with the YJS_RESOURCE_PATH env variable.
  • OIDC_CLIENT_ID: OIDC client id which is used in SyncMeta for authentication purpose. Client id can be acquired from Learning Layers after client registration

Following environment variables have default values however they can be changed during initialization:

  • PORT: Port which Nginx server is listening locally. This port need to be made accessible to outside with port mapping during initialization. Default value is 8070.
  • YJS_RESOURCE_PATH: Resource path of Yjs websocker server. If websocket server running behind reverse proxy and /yjs path is redirected to websocket server, this env variable need to be /yjs/ Default value is /


When application is up and running, you will see two option in the main page as meta modeling space and modeling space. As their names imply, you can create meta model in the meta modeling space and after creating the meta model, it can be uploaded to modeling space with 'Generate Metamodel' button. Created meta model can be tried instantly in the modeling space with this way.

Library Documentation


Inter-Widget Communication(IWC)

For the local communication between the various widgets of the SyncMeta the new the IWC library from the chair is used.


Syncmeta uses the awesome Yjs framework to provide near-realtime collaborative modeling in the web browser. The previous version of Syncmeta uses the OpenCoWeb OT framework and is still available in the opencoweb-ot branch.

Demo Videos

  • SyncMeta vs. SyncLD SyncMeta vs. Domain-dependent IMS LD Collaborative Authoring Tool, using OT.
  • SyncMeta SyncMeta using Operational Transformation.
  • SyncMeta Nudges SyncMeta with Collaborative Modeling Recommendations, using Operational Transformation.
  • Community Application Editor Model-Driven Web Engineering Framework based on SyncMeta, using Operational Transformation.
  • Community Application Editor Live Coding Model-Driven Web Engineering Framework with model to code synchronization, live coding and live preview, based on SyncMeta, using Yjs.
  • Storytelling Tool Collaborative Storytelling with 3D Objects, realized with SyncMeta using Yjs
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,074,350
Websocket (13,926
Collaborative (6,118
Operational Transformation (95