For those that uses stackblitz as part of their development toolset and want to use it as part of their gatsbyjs stack, I have something help.

Stackblitz apps can now be embedded as part of gatsby markdown using gatsby-remark-stackblitz. Stackblitz is a browser based code editor allowing you to create, edit and deploy fullstack web applications all from the browser. Based on Microsoft's monaco editor, Stackblitz is a very comprehensive code editor with a growing feature set. Although popular in the Angular community, it also has one-click workspaces for react, ionic, svelte, and a wealth of other features.

• Support for 3rd party libraries
• Editor extensions
• Firebase deployments
• GitHub integration
• Source code downloads

And of course it has embed capabilities, allowing you to embed full applications into web pages for demo purposes. However there wasn't a solution for gatsby (at least as simple as the codepen or codesandbox), so I've published and open-sourced a plugin to fill this gap for myself and everyone to use.

How to use

Getting started, you need to install the pluging using

npm install gatsby-remark-stackblitz

In order to configure the plugin, you need to have gatsby-transformer-remark installed in order to leverage Stackblitz apps within your markdown. So ensure this has been added to your gatsby-config.js file.

Secondly, within the plugins collection of gatsby-transformer-remark, add the gatsby-remark-stackblitz config.

Finally to render a stackblitz app in your markdown file, simply paste the full url of the app. The plugin will match the pattern and render the appropriate embed markup (using the height defined in the markup).

E.g. Adding https://stackblitz.com/edit/the-decompositor

Produces this...

And that's it! The source code for the project can be found here. It's open-source and I actively check it for new issues/feature requests/pull requests.

Happy embedding!