What is StackBlitz? How to use it in your article

Overview

A tech blog site (such as this) strives to make learning how to code as simple and seamless as possible. Here at Lateef Lab, we're focused on teaching and practicing web development, both frontend and backend. With the announcement of PyScript, backend development will be coming to web browsers in the near future. This may allow writers/teachers to explain and guide readers on how to use whatever technologies that are covered within an article, all without leaving their browser tab!

For front-end development within the browser, developers have plenty of options. One of my favorite options is StackBlitz!

---

What is StackBlitz?

StackBlitz is an online developer environment that mimics the look of Visual Studio Code. If you use Visual Studio Code as your primary IDE, you'll feel right at home using StackBlitz. StackBlitz uses "WebContainers" to run Node.js within the browser.

Here are some of the features of StackBlitz:

• Debugging Node.js with Chrome Dev Tools
• Run your backend (Node.js) within the frontend
• Zero latency editor
• Work offline, no internet connection is required
• GitHub integration

Here at LateefLab, we like to show React tutorials. To make the learning experience better for readers, we want to show readers how to properly structure their React projects. With displaying StackBlitz within our article, we can cut down on the confusion and ensure a great learning experience. We display our projects within our articles using StackBlitz by embedding the StackBlitz project within the Markdown of our article.

---

What is Markdown?

Markdown is a markup language for creating formatted text within a text editor. Big publications such as Medium and Dev.to use Markdown to edit their articles (LateefLab is open source, check out the GitHub repo and take a look at how we use Markdown within this site). Luckily, we can take the HTML code view of an article from the editor we use here at LateefLab (thanks to Summernote) and paste it in a Markdown editor and it will keep the same format!

To embed StackBlitz within your own Markdown supported articles, embed the StackBlitz URL in the src attribute within an iframe element, here is an example:

<iframe height="300" style="width: 100%;" src="https://stackblitz.com/edit/web-platform-3a6hc3?embed=0"></iframe>

---

Example

Check out the full example at LateefLab

Comments

[Sylwia Vargas]

Ohhhh I love this post!

By the way, did you know that you can also embed StackBlitz examples on Dev? You'd do that by using Liquid tag: {% embed + StackBlitz link + %} like this:

{% embed https://stackblitz.com/fork/react-ookyr6?file=src/App.js %}

which then is rendered as: