Services to host source code and embed running applications – Gist, Codepen, JSFiddle, Glitch, StackBlitz
If you want to show source code in a page or blog, create examples of running HTML/CSS/JavaScript code, or sample React/Angular/Node.js applications – you can use external services that allow hosting, versioning, embedding and even running applications.
I have checked several of them and each solution has both advantages and drawbacks. I don’t think it is possible to select a single service and use it for all cases, because they were created to fulfill different needs and different complexity.
In this article I present Github Gist, Codepen, JSFiddle, Glitch and StackBlitz, giving examples of what they could be used for.
Hosting services
There are numerous options to host and share source files. I have tried the following ones:

E-book: How to set up free WordPress platform for IT blogs
Do you want to set up a typical blog but you don’t know how to start, which plugins to use or how to customize the site? I spent a few weeks in total doing that from scratch – from learning the ecosystem to adjusting the platform to my very specific needs. Now I want to share with my experience and make the start easier for you.
Name | Social features | Formatting | Line numbers | Line highlights | File name | File types | Execute |
Yes | Yes | Yes | No | Yes | Arbitrary | No | |
Yes | Yes | No | Only by link, not in embedded | No | Limited | Yes, static files | |
Yes | Yes | No | No | No | Limited | Yes, simple applications | |
Yes | Yes | Yes | No | Yes | Arbitrary | Yes, applications | |
Yes | Yes | Yes | No | Yes | Arbitrary | Yes, applications |
Explanation (all except the first and last refer to the source code being embedded on my site):
- Social features – easy to share with and expand by others (so-called fork)
- Formatting – coloring of code according to the file format
- Line numbers – display line number in every row
- Line highlights – allow highlighting selected lines for attention
- File name – display file name
- File types – how many file types are supported; “limited” means usually HTML, CSS and JS.
- Execute – ability to run the source code, edit files anonymously and immediately observe changes and embed runnable scripts
Let me summary the services briefly:
GitHub Gist
Good for sharing a single file, with versioning and discussion. There is no possibility to execute the code and see live result.
Why not suitable for embedding to me: I didn’t like the formatting.
Edit Embedded
Codepen, JSFiddle
Good for sharing static web examples, consisting of one HTML, one CSS and on JavaScript file (with variants, e.g. SASS instead of CSS or TypeScript instead of JavaScript), sometimes with external libraries available. Both services allow to execute the “application” to see the result and immediately experiment with source code.
Codepen:
Edit Embedded
JSFiddle:
Edit Embedded
Why not suitable for embedding to me: lack of line numbers, limited file types (how to show JSON? XML?).
Glitch, StackBlitz
They are great for creating more complex examples or applications, consisting or any amount of files. Glitch offers more Node.js applications, whereas StackBlitz is the only to offer Angular applications. Again, a user can interact with the files to see the results immediately.
Glitch:
Edit Embedded
StackBlitz:
Edit Embedded
Why not suitable for embedding to me: they load slowly (iframe
) and seem to be an overkill for sharing a code snippet.
Summary
All of the online tools I just listed are great for their specific tasks and I keep using some of them for hosting bigger samples or applications. However, for displaying source code in my blog I chose something different. I write about it in WordPress for developers – displaying source code and review of code sharing services.