DEV Community

Cover image for Code generation: transform JavaScript into visual programming language and back
Vitaliy Stoliarov
Vitaliy Stoliarov

Posted on • Updated on

Code generation: transform JavaScript into visual programming language and back

I would like to introduce to you Rete Studio, a general-purpose code generation tool that seamlessly bridges the gap between textual and visual programming languages

The implementation of this solution proved to be more challenging than expected. The primary focus was finding the scalable method to convert the Abstract Syntax Tree (AST) of the programming language (JavaScript was used as the foundation) into a user-friendly node editor. Later on, the task became even more complex, requiring the conversion back into code

GitHub logo retejs / rete-studio

A general-purpose code generation tool powered by Rete.js

Rete Studio

Made in Ukraine Discord

Rete.js application

Introduction

Rete Studio is a general-purpose code generation tool powered by Rete.js. Its primary goal is to seamlessly bridge the gap between textual and visual programming languages. With Rete Studio, you can transform a textual programming language into a visual representation, which can then be transformed back into textual language.

codegen

Key features

  • Playground: input your code and check its graph representation
  • Lab: debugging tool for code transformation into a graph and back
  • Editor: open your local project to edit code visually as a graph

Roadmap

Currently, JavaScript is the only supported language. Considering the complexity of the transformation process, our current priority is building a robust application. Once we have fine-tuned our methodologies and algorithms (including different programming languages), we will introduce them as a separate plugin for Rete.js.

If you believe in the potential of this project to revolutionize the way code

Top comments (0)