An AST-based interface for composing and editing javascript on the phone

Grasshopper is an Android application which teaches people JavaScript through a series of coding puzzles. As part of this application, we developed an AST-based JavaScript editor for the phone. The visual representation of the code is built using the AST as the source of truth, and user actions modify the AST rather than a code string, much like a block code editor. At the same time, we style this visual representation to look as similar as possible to syntax-highlighted, formatted JavaScript code in a text based editor. This paper outlines the system, the reasoning behind this design, and some early observations from users interacting with it.