Language Explorer

Language Explorer is an interactive tool that allows you to compare and debug different language constructions visually.

Setup

git clone https://github.com/woznia93/LanguageExplorer
cd LanguageExplorer
cd api
python parse.py

Now in a new terminal

cd LanguageExplorer
cd frontend
npm install
npm run dev

Inspiration

We were inspired by Compiler Explorer, an industry standard tool to peek at assembly code generated by compilers. We wanted to make something similar to peek at the internal workings of languages.

What it does

Language Explorer takes a set of tokens, defined as regular expressions, and a set of grammar rules. It takes these rules alongside a provided source file and parses the file according to those rules. it then provides a visual representation of the source tree alongside other useful data.

How we built it

We used Vite + React to build the frontend and display the token and grammar rule input fields. We have a python FastAPI backend to generate the grammar from the user input and parse the source file into an Abstract Syntax Tree using the LARK library. We then return the parsed AST representation to the frontend to display.

Challenges we ran into

Rendering the interactive tree for the AST visualization was a challenge. Generating a grammar from the user inputs was difficult, since the format of the user input can vary greatly.

Accomplishments that we're proud of

We're proud that we got the AST visualization to work. We are also proud of the user interface, as it is very clean and usable in our opinion.

What we learned

We gained more experience in full stack development. We also gained more experience with parsing and learned new things about language parsing when building the broject.

What's next for Language Explorer

Features coming for Language Explorer could include more info inside of each AST node, syntax highlighting, and perhaps highlighting in the source text to show what text corresponds to each AST node.