Noir Online

[y-pakorn]

Noir Online: A Comprehensive Web IDE for Noir Development

Summary

Noir Online is a fully open-source, web-based Integrated Development Environment (IDE) designed to streamline Noir programming for zero-knowledge proofs. Unlike basic playgrounds, it offers a complete ecosystem with circuit compilation (supporting Ultraplonk, Megahonk, Ultrahonk), package management, code sharing, and advanced tools: a customized test suite with visualizer and an interactive flamegraph profiler. Built with React, Tailwind, and Next.js, and leveraging the Barretenberg WASM backend, it simplifies setup and enhances usability. By making hard-to-use features accessible, Noir Online aims to boost developer productivity, attract new users, and support the Noir Grants Program’s mission to improve the Noir developer experience (DevEx).

Motivation

Noir’s potential in zero-knowledge development might be hindered by the lack of a dedicated, user-friendly IDE. Existing tools, like the flamegraph profiler, are complex, and basic playgrounds (e.g., noir-playground) focus solely on writing and compiling, leaving gaps in testing and optimization. Community discussions on Noir’s Discord reveal demand for an integrated environment akin to zkREPL. As Noir is preparing for 1.0.0 release and code freeze, a comprehensive and easy to access IDE is critical to drive adoption and gather feedback for its evolution, aligning with the Noir Grants Program’s tooling goals.

Methodology

1. Month 1: Research and Design
   • Collect feedback via Noir Discord.
   • Design UI/UX with React, Tailwind, and Next.js, ensuring Noir-specific workflows.
   • Plan integration with Noir.js client-side compilation and Barretenberg WASM proving backend.
2. Months 2–3: Core IDE Development
   • Implement code editing, syntax highlighting, and compilation with selectable proving schemes.
   • Integrate Noir's Language Server Protocol (LSP) support in the browser to provide advanced language features like code completion, real-time syntax checking, and refactoring tools. This will involve either leveraging a WASM-based LSP implementation or establishing a lightweight server-client architecture within the web environment.
   • Support package management via noir.toml and code export/sharing.
   • Use JavaScript for most features, exploring Rust/WASM for performance-critical tasks.
3. Month 4: Test Suite and Visualizer
   • Develop a test suite to group tests, track status, and visualize results.
   • Explore test coverage metrics.
4. Month 5: Flamegraph Profiler
   • Enhance the profiler for human-readable, opcode-level insights with an interactive graph.
   • Prioritize JavaScript implementation, with Rust/WASM as a fallback for efficiency.
5. Month 6: Testing and Refinement
   • Conduct thorough testing and release a beta to the community.
   • Incorporate feedback and fix bugs.

Business Model

As a fully open-source project, Noir Online will sustain development through:

• Community Contributions: Encourage code, documentation, and feature contributions via GitHub.
• Sponsorships: Partner with zero-knowledge organizations for funding and visibility.
• Additional Grants: Seek further funding from open-source and zk-focused programs.

Timeline and Deliverables

Month	Deliverable
1	UI/UX designs
2–3	Core IDE with editing, compilation, proving, and package support
4	Customized test suite with visualizer
5	Interactive flamegraph profiler
6	Finalized IDE with bug fixes and community feedback

Team

We are co-founders of Tetration Lab, a research and development lab focused on zero-knowledge proofs, cryptography, and web3 technologies.

We previously developed multiple open-source cryptography libraries, focused on primitive cryptography implementation on smart contract (EVM) and Rust (Arkworks) (Ref: https://github.com/Tetration-Lab)

We also won multiple hackathon building novel privacy application utilizing ZK and FHE technology, the notable one includes “zkVM”, a simple ZK vm that simplifies process of turning simple vm into a provable vm with privacy components using ZK through Noir. Another one is “ZTF”, A on-chain ctf with claimable bounty using ZK through Risc-0 by proving malicious state transition of EVM contract state. (More: https://www.tetrationlab.com/)

Additionally, we won Zama bounty to implement the most efficient ECDSA signing in TFHE-rs. (Ref: zama-ai/bounty-program#45)

• @yoyoismee - Signal: yoyoismee.48
• @yoisha (https://yoisha.dev/) - Signal: @yyyoisha.64

Start Date

1 June 2025

[Savio-Sou]

Hi @y-pakorn, thank you for your early proposal!

Curious have you come across developers more recently that could vastly benefit from a full fledged in-browser IDE?

Since your screenshots from ~2 years ago, the Noir community has come up with i) https://www.noirlings.app/ for in-browser education / experiments, and ii) Developer Containers + GitHub Codespaces for more rigorous in-browser project development.

Wonder if there is substantial developer demand from the Noir community to support the project idea.

[yoyoismee]

Hi @y-pakorn, thank you for your early proposal!

Curious have you come across developers more recently that could vastly benefit from a full fledged in-browser IDE?

Since your screenshots from ~2 years ago, the Noir community has come up with i) https://www.noirlings.app/ for in-browser education / experiments, and ii) Developer Containers + GitHub Codespaces for more rigorous in-browser project development.

Wonder if there is substantial developer demand from the Noir community to support the project idea.

Hi @Savio-Sou, thanks for your early comment! 😄

Our original vision isn't just to build an IDE but to create tools that help people write/build better Noir code. The IDE itself is the platform, but our focus is on the tools we add to it—visualizers, analyzers, debuggers, etc.

We believe there's a significant gap between simple online edit/compile/run platforms and a veteran's fully configured local environment (with plugins, configs, etc.). Our main target audience is beginner to intermediate-level Noir developers who want to advance their skills. Based on our experience running bootcamps and teaching, we see several benefits:

• For beginners: Fast and insightful feedback is key to learning (and makes it more fun). Just knowing "can it compile" or "do tests pass" is fine, but could be much better. Spending time setting up complex environments isn't preferable at this stage. A good out-of-the-box online environment lowers the barrier to entry, provides stronger feedback, enables faster learning, and creates an overall better dev experience.

• For slightly more experienced devs: When building toy projects, joining hackathons, or creating PoCs, an online platform that offers functionality beyond beginner needs is valuable. The ability to quickly prototype, debug, and interact (e.g., Remix-like functionality) and share with teammates would be beneficial.

• For experienced users: People ask us for help frequently, often sharing their notebooks with just basic editors and no tools at all, which is challenging. The ability to simply upload their code to an online IDE with helpful features would save significant time and energy.

I hope this gives you a better view of our vision. As this is an early draft, we're happy to receive feedback and adjust scope/priorities based on community input. 😄

[Savio-Sou]

Thanks @yoyoismee 🙌 that makes sense; a few follow ups if you don't mind:

1. Can you elaborate on what you mean by a "visualizer" and an "analyzer"? As in what would they do?
2. On debugger, did you have the chance to explore how would porting / rewriting the debugger in browser work? Maybe it's easy, but sounds like quite a challenge at first sight
3. Note that noir_wasm compiler does not handle dependencies correctly #7823 is a known issue with NoirJS, might have to include addressing it as a part of the project's scope

Appreciate your insights in advance!

[y-pakorn]

Thanks @Savio-Sou for the mention of dependencies problem!

After I review some of the current noir_wasm code, I would say that we can try to tinker the current code in js/ts first, because seems like file system and dependency resolver will be resolve in client (js) side.

And about rewriting debugger, I think you mean lsp? there's some solution of running vscode compatible lsp on browser so I don't think this will be a much of the issue.

Other than that there's some ultimate solution being developing a serverless compiler, accepting noir code + Nargo.toml then compile and return artifacts, referring to this quote.

In the meantime, we recommend using nargo on the CLI and then loading the build artifacts into your JS code (this should be the preferred workflow even beyond this fix being applied as the wasm compiler will always be slower and less flexible in comparison).

Albeit not cost effective in the long run (need to host this somewhere, although it might cost low to very low maintenance fee due to serverless + written in rust, but we would try to target all client side first)

About visualizer and analyzer scope, @yoyoismee will elaborate this further.