Inspiration

I wanted to try out Chialisp myself, but found no quick and simple environment to do so. Instead I had to install the clvm_tools to run the code in the command line. This is fine for everyday development, but a hurdle when starting off.

After someone ported the clvm_tools to Javascript I used my experience with web based code editors and started working on this project.

What it does

The Chialisp Playground provides an editor window for Chialisp in the browser, including basic syntax highlighting. The user can now simply enter a Chialisp program, together with some arguments. The code is then immediately executed in the browser and the user can see the result of the execution.

How I built it

I used the monaco-editor as a starting point for this project, which is the same editor that powers the popular Visual Studio Code. In order to add syntax highlighting in the same format as vscode I had to use some workarounds to support the TextMate format for code syntax grammars. Now I could implement a Chialisp grammar, starting with the one used in the vscode-chialisp extension and extending it.

As the last building block, I imported the clvm_tools-js package, which allowed me to execute the Chialisp code directly in the browser.

Finally, I added Vue.js to the project and worked on the styling and user experience of the app.

Challenges I ran into

The monaco-editor is hard to work with, since the API is rather unintuitive and it has some strange quirks. Also, the clvm_tools-js interface is not very convenient, mostly since it is a ported command line utility and not a native JavaScript library.

However, I was able to work around those shortcomings.

Accomplishments that I am proud of

The immediate feedback on code changes is really snappy and quick. This makes experimentation and playing around with the code very easy and fun!

What I learned

I learned a lot about Chialisp itself and its tooling, since I now had an environment to experiment with and wanted to test the various features myself.

What's next for Chialisp Playground

  • Better code formatting
  • Provide example programs with explanation to try out
  • Support for advanced Chialisp features such as currying
  • Convenience features, e.g. argument history
  • Future ideas: Full fletched Chialisp editor in the browser, deployment to the blockchain when combined with a wallet

Built With

Share this project:

Updates