Skip to main content

Intro to the Code Playground

· One min read
Josh Crites

This post provides an introduction to the live code editor that is included as a feature in this blog. It allows you to see working examples of things like connecting to the Celo network with Metamask and initiating user transactions with the SDK.

If you have any suggestions for examples that you'd like to see, or if you'd like to create one yourself and have it included in the blog, please reach out to me at josh@clabs.co or on Discord at joshc#0001.

Live coding

This is a live, editable code block. You can update the code right on this page and it will be compiled and executed as you updated it. This is a powerful feature for learning and testing code in real time--you get immediate feedback about what works and what doesn't.

note

The code is rendered using React Live. This means that the code is rendered as a React component, which gives you access to React features like hooks, but also limits what is possible.

Hello World

Try it out:

Live Editor
Result
Loading...

Edit the code to return some new text. Try rendering different HTML.

You can see that the result is a simple rendering of the return statement, which is just HTML. The component must include a return statement, although you can return an empty string. You can also log stuff to your browser console from the environment.

Logging

See this example that returns an empty string and logs the browser Window object.

Live Editor
Result
Loading...

Cool!

This is just a small preview into what code sharing and learning experiences we can build with this tool. Check out this post about Connecting to Metamask to learn more.