Need a crash course on Bitcoin layers?
→ READ OUR FREE GUIDE
Need a crash course on Bitcoin layers?
→ READ OUR FREE GUIDE
Need a crash course on Bitcoin layers?
→ READ OUR FREE GUIDE
Need a crash course on Bitcoin layers?
→ READ OUR FREE GUIDE
Need a crash course on Bitcoin layers?
→ READ OUR FREE GUIDE

Meet Clarity Playground

As a developer, sometimes you just want to open up a tab, write a bit of code and see if it runs. That’s why we built Clarity Playground, an online REPL environment where you can write and run Clarity code in the browser.

Type
Announcement
Topic(s)
Stacks
Published
July 1, 2024
Author(s)
Software Engineer
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.

Product updates & dev resources straight to your inbox
Your Email is in an invalid format
Checkbox is required.
Thanks for
subscribing.
Oops! Something went wrong while submitting the form.
Try Clarity Playground
Copy link
Mailbox
Hiro news & product updates straight to your inbox
Only relevant communications. We promise we won’t spam.

Related stories