These sites allow you toshare 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.
On CodePen, you can demo your code in what are calledPens. 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’spopular Pensfor inspiration.
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.
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.
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 itsEcho API.
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.
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 themost viewed demoson Plunker.
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.
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.
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.
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 inChrome Developer Tools. Oh, and also JS Bin hascodecasting.
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.
SQL Fiddle is for demoing your SQL statements. It can execute MySQL, MS SQL, PostgreSQL, Oracle Database, and SQLite statements.
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:
It haslive preview
The user cansave their workand be able to share a unique link to it
No sign-up neededto 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:
Runnable— on this site, you can demo not just your front-end code, but also your server-side code (PHP, .NET, MySQL, Rails, and a host of others)
Compilr— a nice online code editor with demoing capabilities.
Python Fiddle— a platform for demonstrating Python code.
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behaviour or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional
Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
