Contents
Clarity is a smart contract programming language, built with security and Bitcoin in mind. It has many benefits, but for most developers, it can be intimidating to pick up a new language from scratch.
I know that intimidation firsthand. I first got interested in the Stacks ecosystem and coding with Clarity in 2022. I wrote a simple coding tutorial on my own, but found it challenging to share and demonstrate Clarity code snippets. I needed more resources when it came to writing Clarity.
In particular, a REPL environment in the browser would have been helpful. These environments can be one of the best resources for learning, whether you’re learning a new language or testing out new ideas. It’s a playground where you can easily experiment and get feedback.
That’s what inspired Clarity Playground.
Meet Clarity Playground
Clarity Playground is a new tool to write and run Clarity code directly in the browser. With Clarity Playground, developers can test out concepts, try new ideas, or just, well…play around.
You can easily execute Clarity snippets and contracts from the browser, as well as share those snippets with others. It’s a great resource for devs learning to write Clarity, helping them get familiar with syntax, functions, and best practices.
Under the hood, Clarity Playground works by giving developers access to simnet in the browser, making it possible to:
- Deploy contracts to simnet
- Perform contract calls
- Execute Clarinet commands
- Run any arbitrary Clarity code, such as <code-rich-text>print output<code-rich-text> and <code-rich-text>print event<code-rich-text>
If you get stuck at any time, you can type <code-rich-text>::help<code-rich-text> to learn more.
Play With Clarity Code
Clarity Playground leverages the power of Clarinet and the Clarinet SDK. With Clarity Playground, you’re using the Clarity VM, compiled specifically for the web. This is powerful because you can have higher confidence that the code you run in the playground will run the same when you’re ready to deploy it to devnet, testnet, or mainnet.
An interactive environment for playing with Clarity code. No log-in, no frills.
With the Clarity Playground, you can run code without having to log in or connect your wallet. Try it out for yourself.
In the linked example, we deploy a counter contract and then call the <code-rich-text>get-counter<code-rich-text> function. The <code-rich-text>::set_tx_sender<code-rich-text> can be used to send transactions from another account so that we can perform STX transfers between accounts. Calling the <code-rich-text>increment<code-rich-text> function performs a STX transfer from the caller wallet to the contract owner. Finally, the <code-rich-text>::get_assets_maps<code-rich-text> method confirms the balances of each wallet. Use <code-rich-text>::help<code-rich-text> to see all of the available functions.
Get Started
You can use Clarity Playground anytime by visiting https://play.hiro.so/. Try running some code and sharing that code with a friend! You can also test your knowledge by taking interactive Clarity quizzes that feature problem solving in the Playground.
In the future, we may add additional resources to Clarity Playground, such as learning resources for Clarity or support for Stacks.js. As we consider potential new features, we want to hear your feedback. Let us know what you think of this new playground in the #clarinet channel under the Hiro Developer Tools section on Discord.
