Luke, how many stars are there in these galaxies?

There is nothing like an interactive exercise to make a learning experience memorable. Today, technical blogs and websites could benefit from runnable code snippets so readers could see the output live in their browser. This kind of snippet is usually limited to a handful of languages. Tech.io’s widget is not.

The Problem

Meet Jane.

Jane is doing her usual daily skim through HackerNews. While reading articles, she often comes across code snippets used to help readers understand the programming concepts of the article. What if Jane could just hit a “run” button and see how the code works, all within the same article? Consuming technical knowledge would be more interactive and enjoyable.

In the article What’s New in C# 7.0, Jane learns first how to use out variables.

Out Variables as explained in the article “What’s New in C# 7.0”

Out variables are really useful, but Jane’s fresh eyes may not be able to understand them just by looking at them.


Yes, this “Run” button is clickable 😉
(but you have to correct the code to validate the exercise)

Convinced?

Create Your Own Runnable Code Snippet

  1. First, you need to create a playground. A playground is just an article that will contain the code snippet.
    You could use one of our templates as is for a working code snippet example.
  2. Write the code, commit and push your changes.
    The playground will be automatically updated.
  3. Check the preview of your playground and see that the code works the way it should.
  4. Click on the “embed” button on the right of the code editor and copy the script.
  5. Paste the script on your blog post and check how it renders.

Done!

Note: You don’t have to publish the playground for this to work.

What’s Next?

Our platform uses Docker images to run the code, so you can use code snippets in virtually any technology. A lot of contributors have already made the most of our technology and have crafted playgrounds of impressive quality.

Tech.io is still in beta, and we’re working hard to provide a great experience on the platform. Nevertheless, you may run into some bugs. If so, please don’t hesitate to reach out to us, or if you have any other questions at all. We’ll be glad to help!

We have just released the embeddable widgets feature, and we are thinking about how to improve it in the coming weeks. Feel free to let us know what you think of it and what feature updates you’d like to see!