Embedded Stackblitz apps now available for gatsby
- Chris Wallace
- Tue Nov 19 2019
For those that need to embed stackblitz apps within their gatsby markdown, there's now a plugin to do that.
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
Secondly, within the
plugins collection of
gatsby-transformer-remark, add the
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).
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.