Menu

Demo Your Code on These Sites

These sites allow you to share and show off your code. They all have live previews so other people can see your code in action. They’re sometimes referred to as "code playgrounds" or "sandboxes".

More than simply places to demo your source code in, many of them are also great tools for code collaboration and actual coding work. For example, if you need help debugging your source code, use one of these sites to share your problematic code, and then provide the link to your viewers. Doing this gives them a convenient way of being able to review your source code and offer solutions.

CodePen

On CodePen, you can demo your code in what are called Pens. A Pen can consist of HTML, CSS, and JS. CodePen has many features that make it easy to show off your code. For example, it supports Sass and Less syntax, and the option to "Quick-add" popular JS libraries like jQuery and Angular. Check out the site’s popular Pens for inspiration.

CodePen

Liveweave

Liveweave is an excellent online source code editor. It’s also, according to the site, the ultimate playground for web designers and developers, and a great tool to test, practice and share your creations. What I like about Liveweave is how simple it is to add a third-party dependency to your demo. You can add Bootstrap, jQuery, or other popular web development packages in two clicks.

Liveweave

dabblet

This code-demoing platform slants a little more towards CSS, but it does have HTML and JavaScript capabilities. A nice touch is that it uses the -prefix-free JS library by default, which means you don’t have to worry about vendor-prefixing your CSS properties.

dabblet

JS Fiddle

JS Fiddle has a ton of features for your JavaScript code demos. It has multiple versions of dev libraries such as jQuery, MooTools, and React. It has an implementation of the code analysis tool JSHint built into its interface. JS Fiddle even allows you to simulate Ajax requests using its Echo API.

JS Fiddle

<kodtest/>

A highlight of this code-demoing app is its ability to scale your live preview to the dimensions of mobile devices and other common screen sizes. This feature can help you debug your responsive breakpoints.

Related: How to Test Responsive Designs

<kodtest/>

Plunker

Plunker is an online community for creating, collaborating on and sharing your web development ideas. Its code editor is rich in features. The code editor has: live streaming so people can watch you code in real-time, code-forking, user-contributed development stacks/templates, a built-in code-linting interface, and more. See the most viewed demos on Plunker.

Plunker

CSSDeck

CSSDeck has a clean user interface. If you’re looking for a simple tool to show off your source code, this is a good candidate. People who look at your code demo can leave comments on it, but to do so, they must register an account or sign-in with their GitHub account.

CSSDeck

code.reloado.com

This is another simple tool for showing off your code. It has many JS libraries available at your disposal. jQuery, Bootstrap, Prototype, Backbone, TwitterLib, Zepto, and much more.

code.reloado.com

Ideone

This simple code-sharing tool allows you to demo your server-side code (PHP, Perl, and so forth). It handles software programming languages like C++ too. When you run your code, Ideone will show you (and your code reviewers) the output of your code. It will also display the compilation errors it finds.

Ideone

codepad

codepad is another option for demoing your server-side code. It supports programming languages such as PHP, Ruby, C, C++, Python, and more.

codepad

JS Bin

JS Bin is a feature-packed tool for your source code demos. It even has a console (command-line interface) for debugging and inspecting code. The console works much like the one in Chrome Developer Tools. Oh, and also JS Bin has codecasting.

JS Bin

Tinkerbin

Tinkerbin is a simple code playground that has all the features you’d expect. Tinkerbin supports CoffeeScript besides JavaScript, Sass/SCSS/Less besides CSS, and HAML besides HTML.

Tinkerbin

jqversion

This is a great testing ground for jQuery code. jqversion has multiple versions of jQuery — it even has release-candidate versions.

Related: 11 Things You Might Not Know About jQuery

jqversion

SQL Fiddle

SQL Fiddle is for demoing your SQL statements. It can execute MySQL, MS SQL, PostgreSQL, Oracle Database, and SQLite statements.

SQL Fiddle

Why These Sites?

There are a lot of sites out there which allow you to show off your source code. It’s not possible — or even useful to you — if I were to cover them all.

To make this list more manageable, I created a reasonable set of requirements the site had to meet. These requirements make the site user-friendly for coders who want to share their code demos.

The site had to meet these criteria:

  1. It has live preview
  2. The user can save their work and be able to share a unique link to it
  3. No sign-up needed to access the two features above. Account-creation adds an extra step to the process of sharing code. Also, this criterion gives coders who need or prefer anonymity the option of not disclosing any personal information.

Here are other great sites to check out. They don’t meet the "no sign-up need" criterion above, but they’re great sites to look into nonetheless:

Where Do You Demo Your Code?

If you’re already using one or more of these sites please share your tips and stories in the comments.

Additionally, if your favorite site wasn’t mentioned here, please talk about it in the comments. I might as well ask you to like our Facebook page too.

Related Content

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

This was published on Jun 10, 2015

13 Comments

Justin Chaloupka Jun 10 2015

For simple examples, hosting on GitHub.com is always an option. Personally, I’ve found that CodeAnywhere.com is fantastic for demonstrating proof-of-concept for larger scale projects that span multiple stack layers (i.e. data-to-display, or front-to-back).

    Jacob Gube Jun 10 2015

    I see GitHub more as a source-code-hosting site more than a site for demoing code. I would not classify GitHub or Bitbucket along with the sites covered in this article.

    But GitHub does have demoing capabilities because of GitHub Pages and super easy code-snippet-sharing because of their Gists service.

    P.S. Join me on GitHub.

    Jacob Gube Jun 10 2015

    By the way, CodeAnywhere.com looks great. Thanks for the tip!

Feditor.IO Jun 10 2015

Instant code editor for front-end developers & designers

Cathy Mayhue Jun 10 2015

Great looking tools! May I know, if I can share my php and .net code in any of them?

Cathy

Antonio Jun 10 2015

great post, thank you for remembering us those services!

Did you guys forget Cloud9? c9.io

Love that site.

What about Codeply? http://codeply.com

It’s an editor with responsive frameworks like Bootstrap, Foundation, Skeleton, Materialize, etc.. built-in.

Alice Scott Jun 12 2015

This is a great post and it will be very helpful for designers and developers. Can you please clarify me that either these editors are development language specific ?

    Jacob Gube Jun 12 2015

    Most are for front-end code (HTML, CSS, JavaScript). Some of them can handle server-side code and software programming code.

tankist Jun 15 2015

Also you can take a look at http://repl.it/
A lot of languages, even not so popular
But primitive IDE

This comment section is closed. Please contact us if you have important new information about this post.

Partners