DOI: 10.5281/zenodo.15851383
title: Model2Block: Generating Block-Based Web Interfaces from Ecore Metamodels

description: Reproducibility Package for

Model2Block: Generating Block-Based Web Interfaces from Ecore Metamodels



Abstract

We present Model2Block, a command line application that automatically generates Blockly-based visual interfaces from Ecore metamodels. The tool analyzes an input metamodel and produces a corresponding set of Blockly blocks, which are then integrated into a web-based environment. This enables users to build applications visually using blocks that represent valid model elements, ensuring conformance to the original Ecore structure.

Although the current implementation focuses on visual model construction, it does not yet support automated code generation. As a result, any translation from the visual model to executable code, such as through Acceleo templates, must currently be performed manually.

In future work, we plan to enhance the tool by incorporating support for loading existing Acceleo templates and enabling code generation directly from the visual models. We also aim to support multiple metamodels, implement ATL transformations between different models, and add validation through OCL constraints. Additional customization options for the generated blocks and interfaces are also envisioned. These improvements will broaden the tool’s applicability and streamline the model-driven development workflow, building on our current foundation of valid model visualization and construction.



Metamodel to Blockly Generator

Convert Ecore metamodels into Blockly blocks with:





TSX React components generation




Interactive web editor




Stable color generation




TypeScript type safety





Installation

Requirements





Python 3.8+




pip




Node.js and Yarn (for web output)



Steps





Clone this repository:



 

git clone https://github.com/your-org/model2block.git
cd model2block






Install Python dependencies:



 

pip install -r requirements.txt







Usage

Generate TSX Blocks

Generate only the TSX components for integration into a React app:



python Model2Block.py --output tsx your_metamodel.ecore



Generate Web Editor

Generate a full Blockly-based web editor:



python Model2Block.py --output web your_metamodel.ecore



This creates a React app under:generated/[modelname]-visualci



Running the Web Editor





Navigate to the generated app:



 

cd generated/[modelname]-visualci






Install dependencies (first time only):



 

yarn install






Start the development server:



 

yarn start





Open your browser to:http://localhost:3000



Using the Blockly Editor





Drag blocks from the toolbox to the canvas




Connect blocks to form valid models




Use Export XML to save the model




Use Clear to reset the workspace





Features





🎨 Stable Colors: Deterministic color mapping using CRC32




🧩 Typed Blocks: Generates strongly typed TSX components




🧑‍💻 React + Blockly: Web editor with live model-building




🔗 Ecore Relationship Support: Handles references and containments





Quick Start



pip install -r requirements.txt
python Model2Block.py --output web your_metamodel.ecore
cd generated/yourmodel-visualci
yarn install
yarn start





Command Line Options



python Model2Block.py [OPTIONS] <metamodel>







<metamodel>: Path to your .ecore file



Options:





--output {web,json,tsx}





web: full Blockly + React project




tsx: TSX components only




json: raw Blockly block definitions






-h, --help: Show help message





Examples

Generate only TSX blocks



python Model2Block.py --output tsx model.ecore



Generate full web-based editor



python Model2Block.py --output web model.ecore





Output Structure





📄 JSON Output:





blockly_editor.json: Raw block definitions






📦 TSX Output:





generated/[modelname]-blocks.tsx: React-compatible components






🌐 Web Output:





generated/[modelname]-visualci: Standalone Blockly web editor







Development

Customize Block Generation

Edit the logic in:



create_block_from_class.py



Adjust:





Block structure templates




Color assignments




Input/output wiring





Future Work

Planned enhancements:





✅ Support Acceleo template loading and direct code generation




🔁 ATL transformation support between models




✅ OCL constraint validation in the editor




🔧 Customization options for blocks & UI




🧩 Multi-metamodel support