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.
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
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