Drag blocks to write real code — and drop real code back onto the canvas.
A desktop visual programming environment built on Blockly and Electron. Snap blocks together to generate Python, Web, Kotlin, Go, or C, run it without leaving the window, and — unusually — import existing source files back into blocks.
Most block editors are a one-way street: blocks become code, and that's where the relationship ends. Open a real .py file and the canvas has nothing to say about it.
Visual Program Studio is bidirectional. Point it at a source file you already have — a pygame game, a Go CLI, an Android MainActivity.kt — and it parses the real AST and rebuilds it as blocks. Anything it cannot express as a block is preserved verbatim in a raw block instead of being silently dropped, so a round trip never loses your code.
That makes it useful past the beginner stage: you can read unfamiliar code visually, restructure it by dragging, and generate it back out.
Five target languages. Python, Web (HTML/CSS/JavaScript), Kotlin, Go, and C. The toolbox reshapes itself for whichever language is selected.
Import code back into blocks. Python, JavaScript, TypeScript, Go, Kotlin, and HTML files can each be loaded onto the canvas. Constructs with no block equivalent land in a raw-code block, and a warnings panel tells you exactly what fell back.
Run it in place. An embedded terminal (xterm + a real PTY) runs your program in the same window — stdin included, so input() works. Web projects open in a live preview window.
Batteries for Python. Block libraries for pygame-ce, turtle, PyQt6, NumPy, os, sys, random, and math, plus dictionaries, exception handling, and timers.
A visual PyQt6 designer. Drag QLabel, QPushButton, QLineEdit, QSlider, QProgressBar and friends onto a form; the layout becomes blocks, and the blocks become PyQt6 code.
Ship a standalone .exe. Python projects can be packaged into a single-file executable through PyInstaller without touching a command line.
(To be added.)
Grab the portable .exe from the Releases page. No installer, no admin rights — download and run.
Requires Node.js 18 or newer.
git clone https://github.com/rendychen0331/visual-program-studio-electron-edition.git
cd visual-program-studio-electron-edition
npm install
npm start # run in development
npm run dist # build the portable .exe into dist/The editor itself needs nothing extra — writing blocks and generating code works out of the box. External toolchains are only needed to run or import a given language, and only the one you actually use:
| You want to… | You need |
|---|---|
Run or import Python, or package an .exe |
Python 3 on PATH (PyInstaller for packaging) |
| Run JavaScript or preview Web | Nothing — the app runs it itself |
| Import TypeScript or Kotlin | Nothing — bundled |
| Run or import Go | Go toolchain on PATH |
| Run Kotlin | kotlinc on PATH |
| Run C | gcc on PATH (e.g. MinGW-w64) |
If a toolchain is missing, only that language's Run button is affected — everything else keeps working.
- Pick a language from the selector in the toolbar.
- Drag blocks from the left palette onto the canvas.
- Press Generate Code to see the source, or Run to execute it in the terminal below.
- Press Save to keep the workspace as a
.jsonfile you can reopen later.
To go the other way, press the Import button for the current language and choose a source file. The canvas fills with blocks; the warnings panel lists anything that could not be represented natively.
| Path | Contents |
|---|---|
main.js |
Electron main process — running code, spawning parsers, packaging |
src/blocks/ |
Block definitions (core, pygame, turtle, PyQt6, DOM/events, audio, stdlib) |
src/*_generator.js |
Blocks → source code, one per target language |
src/*_to_blockly.* |
Source code → blocks, one per importable language |
src/ui-designer.js |
The visual PyQt6 form designer |
tests/fixtures/ |
Real source files the importers are exercised against |
The importers deliberately run out-of-process (go run, node, python) so each language is parsed by its own real parser rather than a hand-rolled approximation.
Issues and pull requests are welcome. The most valuable contributions are usually new blocks, or importer coverage for a construct that currently falls back to raw code — tests/fixtures/ is where you add a source file that reproduces the gap.
ISC.