A visual desktop editor to create and manage programming blocks intuitively. ROSBLOCKS allows you to develop programming logic using a block-based interface, with support for automatic Python code generation.
Watch the demo to understand the main features:
See how to navigate the workspace, select packages, create blocks, and generate Python code automatically.
- Visual Editor with Blockly: Intuitive block-based interface for visual logic
- Workspace Management: Support for multiple workspaces and packages
- Python Code Generation: Convert your blocks into Python code automatically
- Node Editor: Detailed editor for configuring each block
- Desktop App: Electron application for Windows, macOS, and Linux
- Monaco Editor: Integrated code editor to view/edit generated code
rosblocks/
├── src/
│ ├── app/ # Main React application
│ │ └── main.tsx # React application entry
│ ├── electron/ # Electron code
│ │ ├── main.ts # Main process
│ │ ├── preload.cts # Preload script
│ │ └── util.ts # Utilities
│ └── types.d.ts
├── public/
│ └── editor.mp4 # Demo video
├── dist-electron/ # Compiled Electron build
├── dist-react/ # Compiled React build
├── package.json
├── tsconfig.json
├── vite.config.ts # Vite configuration
└── electron-builder.json # Packaging configuration
┌─────────────────────────────────────┐
│ User Interface Layer (React) │
│ (Editor, SelectPackage, NodeEditor) │
└──────────────┬──────────────────────┘
│
┌──────────────▼──────────────────────┐
│ Block Logic Processing Layer │
│ (Blockly, BlockGenerator, NodeMgmt) │
└──────────────┬──────────────────────┘
│
┌──────────────▼──────────────────────┐
│ Code Generation Layer │
│ (blocksToPython.ts) │
└──────────────┬──────────────────────┘
│
┌──────────────▼──────────────────────┐
│ Electron/System Layer │
│ (IPC, Filesystem, Processes) │
└─────────────────────────────────────┘
- Workspace Selection: User selects a valid workspace (with
_wssuffix) - Package Loading: System loads available packages from workspace
- Block Editing: User edits blocks in Blockly editor
- Code Generation: Blocks are converted to Python code
- Persistence: Changes are saved to filesystem via Electron IPC
| Component | Responsibility |
|---|---|
| SelectWorkspace | Allow workspace selection and validation |
| SelectPackage | Manage package list and create new packages |
| NodeManager | Manage package nodes/blocks |
| NodeEditor | Visually edit blocks with Blockly |
| blocksToPython | Generate Python code from blocks |
| EditorHeader | Top bar with general options |
- Node.js >= 18
- npm or yarn
- Git
# Clone the repository
git clone https://github.com/ferssor/rosblocks.git
cd rosblocks
# Install dependencies
npm installTo run the application in development mode with hot-reload:
npm run devThis command:
- Starts the Vite server for the React application (
dev:react) - Compiles and executes Electron in development mode (
dev:electron) - Allows real-time editing with automatic reload
To create production builds:
# General build (compiles TypeScript and React)
npm run build
# Distribution for macOS (arm64)
npm run dist:mac
# Distribution for Windows (x64)
npm run dist:win
# Distribution for Linux (x64)
npm run dist:linuxWhen you open the application, you'll see the Workspace Selection screen.
- Click on "Select Workspace"
- Choose a folder with the
_wssuffix (e.g.,my_project_ws) - The system will validate the workspace structure
After selecting a valid workspace:
- A list of available packages will be loaded
- Click on a package to edit it
- Or create a new package by clicking "New Package"
On the editing screen:
- Blockly Editor (left): Drag blocks from the toolbox to create your logic
- Node Manager (right): View and configure all nodes in your package
- Node Editor: Double-click on a node to edit its properties
- Python code is generated automatically from your blocks
- View the generated code in the integrated code editor
- The code can be exported or copied for use in other projects
All changes are saved automatically to the workspace.
- React 18: UI framework
- Vite: Fast build tool
- Blockly: Visual blocks engine
- react-blockly: React integration for Blockly
- Ant Design: UI components
- Monaco Editor: Advanced code editor
- Electron 35: Desktop application framework
- TypeScript: Typed language
- electron-builder: Electron application packaging
- ESLint: Code linting
- npm-run-all: Parallel script execution
- TypeScript: All TypeScript code with explicit types
- React: Functional components with Hooks
- CSS Modules: Component-scoped styles
- Naming: camelCase for variables/functions, PascalCase for components
- Make sure the folder ends with
_ws - Verify that the workspace structure is correct
- Reload the application (
F5orCtrl+R) - Verify that blocks are correctly defined in
customBlocks.ts
- Verify that all blocks are correctly connected
- Validate block structure in
blocksToPython.ts
This project is based on research and has been published in an academic paper. For more details about the design and implementation, please refer to:
Visual Programming Editor for Robotic Systems
Published at: SCITEPRESS - Science and Technology Publications
DOI: 10.5220/0013714000003982
If you use this project in your research, please cite the associated paper.
@conference{icinco25,
author={Fernando Costa Nogueira and Dieisson Martinelli and Lucas Alexandre Zick and André {Schneider de Oliveira} and Vivian Kalempa},
title={ROSBLOCKS: A Visual Programming Interface for ROS2 Robots},
booktitle={Proceedings of the 22nd International Conference on Informatics in Control, Automation and Robotics - Volume 2: ICINCO},
year={2025},
pages={267-274},
publisher={SciTePress},
organization={INSTICC},
doi={10.5220/0013714000003982},
isbn={978-989-758-770-2},
issn={2184-2809},
}