A beautiful, interactive web-based playground for learning how programming languages work!
Welcome to the Mini Programming Language Playground! This project is a modern, browser-based environment for writing, running, and visualizing code in a custom-designed language. With a gorgeous interface and instant feedback, you can:
- ✍️ Write code in a live editor
- ⚡ Run code and see output instantly
- 🌳 Visualize the Abstract Syntax Tree (AST)
- 🎨 Enjoy a clean, responsive UI
Whether you're a student, teacher, or just curious about interpreters and compilers, this project is for you!
- 🖥️ Intuitive Web GUI: Write, edit, and run code in your browser—no command-line needed.
- 🔥 Live Output: See results instantly as you run your code.
- 🌳 AST Visualization: Click a button to see your code's structure as a tree.
- 🎯 Simple, Educational Syntax: Great for learning and teaching.
- 📱 Responsive Design: Works on desktops and tablets.
- 🧩 Modular Codebase: Easy to extend and customize.
- Node.js (v14 or higher recommended)
- A modern web browser (Chrome, Firefox, Edge, Safari)
git clone <repo-url>
cd mini-program-collab-master
npm installnode server.jsOpen your browser and go to:
http://localhost:3000
- Write your code in the editor panel on the left.
- Run your code by clicking the Run Code button. The output will appear below the editor.
- Visualize the AST by clicking Show AST. The right panel will display a tree diagram representing your code's structure.
- Experiment! Try different expressions, assignments, and print statements to see how the interpreter and AST visualization respond.
💡 Tip: The more you experiment, the more you'll learn about how programming languages parse and execute code!
The mini programming language is designed to be simple and approachable. Here’s what you can do:
- Variables: Assign values using
= - Arithmetic: Use
+,-,*,/for calculations - Print: Output values with
print(expression)
x = 5
y = 10
z = x + y * 2
print(z)
25
The AST (Abstract Syntax Tree) panel shows how your code is broken down by the parser. Each node represents an operation, assignment, variable, or literal. This is a great way to learn about language parsing and interpretation!
- 🟩 Green nodes: Program root
- 🟧 Orange nodes: Assignments
- 🟥 Red nodes: Print statements
- 🟦/🟪 Blue/Purple nodes: Variables and numbers
- 🎨 Other colors: Arithmetic operations
📚 Why ASTs?
ASTs are a core concept in compilers and interpreters. Visualizing them helps you understand how code is structured and executed under the hood!
| File | Purpose |
|---|---|
lexer.js |
Tokenizes your code into meaningful pieces |
parser.js |
Turns tokens into an AST |
interpreter.js |
Walks the AST and executes your code |
server.js |
Express server for the web GUI |
app.js |
Handles frontend logic for running code and AST visualization |
style.css |
Styles for the web interface |
main.js |
(No longer used for CLI; see code comments) |
Q: Can I use this project from the command line?
A: No, all command-line functionality has been removed. Please use the web interface for all features.
Q: Can I add new features or syntax?
A: Absolutely! The codebase is clean and modular. Check out lexer.js, parser.js, and interpreter.js to extend the language.
Q: Is this project suitable for teaching?
A: Yes! The visual AST and simple syntax make it perfect for classrooms and workshops.
- Project Maintainer: Anuj Chib, Sidhant Kaistha, Rudra Bhardwaj, Anirudh Rawat
- Contributions: PRs and suggestions are welcome! Feel free to fork and improve.
- Need Help? Open an issue or start a discussion.
MIT
Created for educational and demonstration purposes. Have fun exploring and visualizing your own mini programs!