Services to host source code and embed running applications – Gist, Codepen, JSFiddle, Glitch, StackBlitz

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:

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.

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:

JSFiddle:

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:

StackBlitz:

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.

Leave a Reply

avatar
  Subscribe  
Notify of