I have built a system where from atomic information of a UI code I could generate a framework specific code. Here is the concept https://github.com/imvetri/ui-editor. For example, the user of this tool will type markup, state, events, reducers and the tool will generate the code of any targeted framework.

How I solved the problem is by assuming each visual variant of an UI component is a state. And each state is caused by transition function, in my terms I call it reducer. A state is a configuration, and I built a configuration to code. What I'm trying to do next is a reverse of it.

Problem statement Given a codebase, how can I convert the code into the inputs that my tool accepts. I ended with following applications based on that idea.

  1. Visualise the data flow
  2. Visualise the control flow
  3. Visualise the codebase function calls so that user events are on the left of the graph, user written functions and browser API on the right.

Challenges I'm trying to solve

  1. Source code reads from top to bottom
  2. Source code is made of string
  3. Source code is bloated by modern frameworks


  1. UI code is a configuration based system of giant tree / graph state of UI elements
  2. Configuration to code is proved.

Similar questions I have that is related

  1. How to reduce a language string down to its grammar
  2. How to trace the control flow
  3. How to reduce a code down to configurations of show / hide of visual elements
  4. Write a code base scanner that scans the code, extracts all unique components, strips out the API data from the code, generalises it, reduces into a configuration.
  5. Is code to configuration possible ?

Here is an visual example of visuals on the tool I builtenter image description here

Here is an example for visual state of a component

enter image description here

Disclaimer : 5 years back I thought of code to configuration problem as impossible, science fiction, so I turned my inspirations towards design tools, existing tools and solved by configuration to code, which I took inspiration from 3d designing and rendering tools and 2d design tool. The potential of configuration to code tool is good, as in, it can be a good tool for designers to be able to build applications.

I realised that I tried to solve one problem, which is, I wanted to build an interface so that I can view the code with less distractions. I got distracted and built something else. I'm revisiting the problem, I have been trying to put it in words, have few hunch in mind, like load the code on the browser, annotate the alphabets as tokens, some tokens as components, recognise the similar subgraphs and optimise them, reduce the graph into an efficient code, visually show to the user in a slow time frame graph node movement as if it moves. Anything that moves will gain attention of the user, also it will look cool to watch the code being able to optimise itself. While it is not, the grammar will do. These are some of the imagination I have, I'm trying to get it built. I have been skipping this idea for a long time, while I'm able to ignore every other ideas I get, this one keeps coming back to me.

I'm looking for a mentor / a teacher on this problem.


  1. Language has grammar
  2. Language is string
  3. Grammar is string
  4. Grammar generates string
  5. Grammar generates language


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.