Explainer: Parsing

[bvisness]

This explainer visualizes a language grammar like a flamegraph, allowing the user to drag-and-drop a list of tokens and instantly see they fit into a toy language.

Figma link: https://www.figma.com/file/Ba0jBreapnyhOKloA0dSXu/Education-Wireframes?type=design&node-id=7%3A177&mode=design&t=7e9UWAd2mXHXBVHj-1

The grammar for this demonstration is extremely simple. We make no attempt to support a "real" programming language grammar.

Rather than entering their program textually, users will drag and drop tokens into a list. This Scratch-like design avoids the possibility of lexing errors and emphasizes the idea that parsing is performed on a stream of tokens, not a stream of text.

Functional requirements:

• Support all the behaviors described in the Figma.
• Support both desktop and mobile.
• The grammar should ideally be customizable so we can adjust it to fit the content, and reuse the same demonstration with multiple different grammars within the same article. (The grammar need not be customizable by the user, only by the authors of the article.)

Remember - explainers do not have to be pretty at this stage. They only have to meet the functional requirements.