🤫🔍 ZKTools.dev - Online ZK debugger for learners and builders Infrastructure User Experience

The problem ZKTools.dev solves

This is an easy to use web debugging tool for ZK developers and learners (like us!). We wanted to provide a simple UI (inspired by the great evm.code) for everyone to get important information about the process of working with ZK files.

The frontend also adds a lot of tooltips and explanations that are great for people who are getting started with the ZK technology.

Challenges you ran into

  • Most JS libs related to ZK are not easy to run in the browser, for instance, circomjs or r1csfile. We lost a fair amount of time trying to setup the build for these libs. We ended up using the very great snarkjs lib but even the file import/read could be improved. We can send PR to these repos to improve the whole JS “flow”.
  • snarkjs loads the file with fetch, therefore, we can not directly use the file uploaded by the user. As a workaround, we create presets. A long term solution would be to adjust the snarkjs lib to accept not only a string (path to a file to fetch) but also a node File object or Bytes buffer.
  • The whole “zk” flow is quite hard to grasp, as the user needs to work with many files, generated at different stages (such as ceremonies, etc.). It was a great learning experience for us and also make us confident that this tool can help users, learnings, developers, to get around this complex flow.

Technology used

  • Next.js - for the React framework.
  • Vercel - for the easy deployment.
  • snarkjs - for interacting with the zk related files.
  • circom - to write and compile circuits.
  • Monaco Editor - to edit JSON files.

Future improvements

  • We can connect the debugger to the blockchain to fetch the verification directly.
  • Adjust the file reading mode so we can easily read file from users device.
  • Add more explanation and interactive UI.
  • Make all files updatable. At the moment, we had to prepare a few files (“preset mode”) to simplify the process, ultimately, we want users to be able to load their own files.