Visual syntax optimized for displaying source code on handheld devices. Try it out here.
The goal is a code editing environment where the creation and the manipulation of the code is done through a touchscreen on a vertically oriented device (usually smartphone).
The majority of this project only exists in conceptual form but I needed some feedback on the visual representation so I created this demo sandbox.
The syntax implements almost all the ES5 features with the exception of: debugger statement, labeled statement, exceptions, do while loop and sequence expression.
The generated AST is a list of js objects wich is given to a vue app that I created custom components for to generate HTML based on the nodes. After that it's just the matter of CSS to have it displayed the way I want.
If you want a more in depth view of the process you may consider checking out the source code.
List of the libraries being used:
- ace editor for the code editor on the demo page
- acorn for the js to ast generation
- vue for generation HTML from the AST
- I also used quite extensively the astexplorer.net to help me construct the AST -> HTML bit of the app