Noirlings.app: Web-Based Interactive Playground for Learning Noir, Fast ⚡️

[0xandee]

Summary

Noirlings.app is an open-source, web-based interactive tutorial platform for the Noir programming language. It builds on the existing Noirlings CLI (inspired by Rust's Rustlings and Starknet's Starklings App) to provide interactive Noir coding exercises directly in the browser, with immediate exercise verification, and helpful hints - no local setup required. Developers can seamlessly write, compile, generate proofs, and verify Noir circuits all in Noirlings Playground.

The goal is to accelerate onboarding of Noir developers by making the learning process engaging and frictionless. This tool targets both beginners and experienced developers aiming to sharpen their Noir skills through practice. Noirlings.app will be thoroughly documented, include a comprehensive suite of tests for each exercise, and be released under a permissive open-source license (MIT).

By lowering the entry barrier and improving the Noir developer experience, Noirlings.app aligns with Noir's core focus on developer experience and the NRG#4 Developer Tools Grant's aim to deliver standalone tooling with long-term ecosystem value.

Live at noirlings.app

Repo: https://github.com/0xandee/noirlings-app

---

Motivation

Noir is a relatively new DSL for zero-knowledge (ZK) proofs, with a rapidly growing community (1.1k GitHub stars as of 2025). However, learning resources for Noir are currently limited to documentation and example code. New developers face setup overhead (installing Rust, Noir, tooling) and a steep learning curve for ZK concepts, creating demand for accessible and practical interactive tutorials.

Interactive learning platforms have proven effective in growing developer communities in other ecosystems - Rustlings (58,000 stars on GitHub), CryptoZombies (400,000+ users) indicating strong demand and usage. Cairo (Starknet's language) benefited from Starklings.app which lowered the barrier for new Cairo developers and significantly boosted developer acquisition and proficiency through engaging, hands-on exercises.

Providing Noirlings.app in-browser will:

• Remove environment setup friction, enabling instant learning.
• Reinforce foundational Noir concepts through interactive practice, complementing official documentation.
• Attract hands-on learners, expanding the Noir developer base.

Noirlings.app directly addresses a critical gap in Noir's developer ecosystem: the lack of an interactive, beginner-friendly learning platform. Released during NoirHack 2025, Noirlings.app demonstrated strong initial traction (200 sign-ups and sustained 10 DAU after NoirHack 2025 with only 35 lessons), Noirlings.app leverages proven educational techniques to foster a larger, more skilled Noir developer community aligned with Aztec's developer-centric objectives.

---

Methodology

Frontend & Compiler Integration:

• React-based frontend application leveraging Noir's official WebAssembly compiler (@noir-lang/noir_wasm and NoirJS bindings) for in-browser compilation.
• Embedded Monaco editor provides robust syntax highlighting and developer-friendly coding environment.

Interactive Exercises:

• Pre-filled starter code from the Noirlings CLI curriculum enables users to actively complete tasks.
• Add step-by-step tutorials and forkable templates to build DeFi, swaps, voting, NFTs, and identity use-cases.
• Real-time compilation and test execution deliver immediate feedback, guiding continuous improvement.

Advanced Circuit Visualization:

• Constraint Graph Generation: Converts Noir code into ACIR bytecode, displaying interactive DAGs directly in-browser.
• Graph Rendering & Interactivity: Utilizes D3.js and Cytoscape.js for dynamic visualization and intuitive interaction.
• Gate Count & Heatmap Visualization: Real-time circuit complexity metrics and heatmaps pinpoint high constraint-density areas.
• Witness Probing & Execution Tracing: Runtime witness value probing via noir_js allows visualization of intermediate computational states.
• Side-by-Side Code Inspector: Integrated Monaco editor and graph visualization provide seamless navigation between code and constraints.

Developer-focused UX:

• Clean, responsive UI optimized for diverse devices and enhanced accessibility.
• Comprehensive documentation, integrated hints, progress tracking, and direct links to official Noir resources.

---

Business Model

Noirlings.app is primarily a public good enhancing the Noir ecosystem, prioritizing long-term ecosystem impact over immediate revenue generation, these schemes below will provide additional funding streams for ongoing content creation and platform development:

• NRG Grant: Funds initial 4-year development cycle.
• Supplementary Revenue: Optional premium NFT profile-picture (PFP) certificates minted upon completion
• Partnerships: with hackathon organizers to create relevant Noir learning tracks related to the specific topic of the event.
• Open-Source Community: Encourages contributions via permissive MIT licensing and proactive community engagement.

Core IDE functionality, exercises, and templates will remain free and openly accessible.

---

Timeline & Deliverables

Month	Milestone & Key Tasks	Deliverables
Jun - Jul 2025	Curriculum & Template Expansion (30+ exercises on hashes, Merkle, Groth16; DeFi, voting, NFT tutorials; visualizer prototype)	New exercises and tutorial guides
Aug - Oct 2025	Circuit Visualizer & Inspector (interactive graph view, gate counting, witness probing, side-by-side code inspector)	Visualizer & Inspector tooling
Nov 2025	Gamification MVP (XP progression, JSON badges, leaderboard, accessibility enhancements)	Gamification tooling
Dec 2025 to 2028	NFT PFP Certificates and OSS expansion ($5,000 per year for the next 3 years for OSS contributors development)	100% uptime & final report

---

Team

Name	Role	Experience	Contact
Andee Vo	Founder & Lead Developer	4 years Solidity; 3 years ZK (Cairo, Starknet); 6 months Noir; Starknet/OnlyDust Ambassador & Starknet Vietnam Lead	Signal: @andeebtceth.99 / Telegram: @andeebtceth / X: @andeebtceth

---

Start Date

June 1, 2025 – ready to start immediately upon grant approval.

[Savio-Sou]

Hi @0xandee, thank you for submitting the proposal! A few thoughts if it helps:

1. For the interactive exercises part, I personally love your work but have to mention the possibility that this might leans towards more an educational app than a developer tool. Similar to https://github.com/orgs/noir-lang/discussions/8443, I will have to discuss further with the judging committee on if this can be considered in scope for NRG#4

2. For the advanced circuit visualization part, it seems like something that Noir developers might find very useful, but I don't understand how they intend to work enough to tell. Great if the proposal could elaborate on the design and intended user flows, even better if with mock ups / diagrams!

[0xandee]

Hi @Savio-Sou, thanks a lot for the thoughtful feedback! Super appreciate it!

I get the point about it leaning educational. With features like forkable templates, real-world circuit scaffolds, and visual debugging are meant to help devs quickly prototype, test, and improve Noir circuits. We’re aiming to turn it into a full dev workspace in the browser.

I'll add more details to the proposal about the circuit visualizer .

Thanks again! Excited to hear back from the committee, happy to tweak anything if needed.

[cbrinicombe13]

Hey @Savio-Sou. Very cool!

Gamification MVP (XP progression, JSON badges, leaderboard, accessibility enhancements)

We're building something that could help with some of this if it helps: trophy