What is StackBlitz? How to use it in your article
Tags: react, stackblitz, tutorial, codepen
Published: 2022-05-23 22:45:00

<p><br></p><p><span style="font-size: 24px;"><span style="font-weight: 700;">Overview</span></span></p><p><span style="font-size: 18px;">﻿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 <a href="https://www.anaconda.com/blog/pyscript-python-in-the-browser" target="_blank">PyScript</a>, 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!</span></p><p><span style="font-size: 18px;">For front-end development within the browser, developers have plenty of options. One of my favorite options is StackBlitz!</span></p><hr><p><span style="font-size: 24px; font-weight: 700;">What is StackBlitz?</span></p><p><span style="font-size: 18px;"><a href="https://stackblitz.com/" target="_blank">StackBlitz</a> is an online developer environment that mimics&nbsp;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.</span></p><p><span style="font-size: 18px;">Here are some of the features of StackBlitz:</span></p><ul><li><span style="font-size: 18px;">Debugging Node.js with Chrome Dev Tools</span></li><li><span style="font-size: 18px;">Run your backend (Node.js) within the frontend</span></li><li><span style="font-size: 18px;">Zero latency editor</span></li><li><span style="font-size: 18px;">Work offline, no internet connection is required</span></li><li><span style="font-size: 18px;">GitHub integration</span></li></ul><p><span style="font-size: 18px;">Here at <a href="https://lateeflab.com/embed-stackblitz-in-markdown/" target="_blank">LateefLab</a>, 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.</span></p><p><br></p><hr><p><span style="font-size: 24px; font-weight: 700;">What is Markdown?</span><br></p><p><span style="font-size: 18px;">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 <a href="https://summernote.org/" target="_blank">Summernote</a>) and paste it in a Markdown editor and it will keep the same format!</span></p><p><span style="font-size: 18px;">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:</span></p><pre style="line-height: 1.42857;"><span style="font-size: 18px;">&lt;iframe height="300" style="width: 100%;" src="https://stackblitz.com/edit/web-platform-3a6hc3?embed=0"&gt;&lt;/iframe&gt;</span></pre><p style="line-height: 1.42857;"><br></p><hr><p><span style="font-size: 24px;"><b>Example</b></span></p><p><span style="font-size: 18px;"><iframe height="300" style="width: 100%;" src="https://stackblitz.com/edit/react-ookyr6?file=src/App.js?embed=0"></iframe></span></p><p><span style="font-size: 18px;">Check out the full example at <a href="https://lateeflab.com/embed-stackblitz-in-markdown/" target="_blank">LateefLab</a></span></p><p></p>