As a web developer, having a place to quickly test code or work on an
idea before going live might be very important. As time go by, more
online code editors are created that can help you code from any computer
with internet access. These tools let you combine CSS, HTML and often
Below you will find some useful free code playgrounds and sandboxing tools for testing, debugging and sharing your code snippets.
CSSDesk is a very simple tool that focuses purely on HTML and CSS. It consist of three resizeable sections: HTML, CSS and live preview. You have the option of changing the background of the preview pane, which is useful when you have a hard time scoping out the outcome of your CSS/HTML work due to low foreground/background contrast.
In addition, you can also turn on or off the syntax highlighting function and there’s no effort or setup here, just load the page and start creating.
Another important feature is the ability to create your own JSBin account where you can save your bins for future reference and sharing. Registration is simple and you can even leverage your Github credentials via Github's OAuth functionality.
JS Fiddle is probably the most popular free sandbox tool for HTML, CSS and JS that has a wonderful set of features: it supports the inclusion of libraries such as
Prototype and jQuery. You can include additional external resources to JS/CSS files into each testing document. Incredibly this tool also supports XHR Ajax where you can pass data back-and-forth between the server and client browser window.
One of my favorite code snippets playground has recently become CodePen. It's probably the most popular code snippet editor available on the web.
CodePen includes some awesome features to write CSS faster. You can select to include Normalize.css or Reset.css in your CSS by simply clicking a radio button. You can also
choose to use -prefix-free or Autoprefixer as well. This way there is no need to take the time to link to an external file (which is also possible, if you wanted to).
Originally created by Steven Hazel, Codepad is a web-based compiler/interpreter for server-side and software programming languages like PHP, C++ and more.
The output screen displays any error messages associated with your code, and I believe any software engineer who need to collaborate and debug their more confusing programs will find Codepad very useful.
This is an online editor where you can try running your codes as you write. You can save your codes online as well as show them to the public as your work.
It has a slick interface, an auto-updating preview pane and the ability to include open source JS libraries. One unique feature is the "Smart phone preview" command that opens a new browser window with the viewport sized equivalently to mobile phones.
The registration process requires connecting into any other social network such as Facebook, Twitter, Google, or Github. Select a username, then you start coding.
Ideone is a popular online compiler and debugging tool. It’s one of the best and most reliable options for snippet testing.
This tool allows you to compile secure code and execute it online in more than 60 programming languages.
Choose a programming language, enter your source code and input data into text boxes. Then check or uncheck run code (whether to execute your program) and private (whether not to list your code in the recent codes page) checkboxes, click the submit button and watch your snippet being executed.
Practicode is another online tool for editing your code snippets with support for HTML, CSS and VBScript. Though it’s meant to be used alongside their guides and tutorials for practicing and testing code snippets while you’re reading their material, it can be used for testing code snippets as well.
Dabblet, created by Lea Verou, is an “interactive playground” for trying out snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code, and you can save your work in Github gists, embed it into other websites or share it with others.
You can change things up with the controls shown below. The split can be vertical, horizontal or taken out completely. There’s also an interesting “behind code” mode where your result is simply the background for the coding area.
It has resizable panels, so that you can write your code (or weave, as we call it) the way you want. Liveweave also has built-in context-sensitive code-hinting for HTML5 and CSS3 tags/attributes, that makes life a lot easier.
RegExr is a HTML/JS based tool for creating, testing, and learning about Regular Expressions (RegExp/RegEx). It provides a simple interface to enter RegEx expressions, and visualize matches in real-time editable source text.
You can play with regexr in a helpful environment and make sure your syntax is correct before pushing it live.
A tool created by Paul Dixon, then sold to Jeroen Vader, a Dutch serial Internet entrepreneur. Pastebin is a simple and clutter-free HTML/JS open source sandbox tool.
It also has keyboard shortcuts that conveniently allow you to navigate efficiently between tabs and code panes. The auto-updating preview pane is a bonus. Plus in the case of the HTML, Tinkerbin will even highlight tags that aren’t matched.
Google Code Playground
Google Code Playground is a sandbox tool that gives you the ability to test and experiment with Google’s awesome APIs. When I talk about APIs I mean that you can pull data from the biggest Google products. Listing blog posts from Blogger, markers from Google Maps, and even video players directly from YouTube. As you click through these different examples the live preview box will update accordingly.
The simple Google Code Playground interface has three main areas of the screen. The "Pick An API": this menu provides access to Google's numerous APIs. When an item is selected (clicked) in the menu, relevant code appears in the "Edit Code" window and the code is automatically executed to fill the "Output" window with the results of running the example code. Any changes/tweaks made to the code are reflected in the Output window once you select the Run Code button at the top of the Output window.
To use the tool, simply enter the code into the main text area and click “run code”. This is particularly useful to run PHP, which would otherwise require a local server which supports PHP.
D3.js Playground allow you to play with the D3.js library in an interactive manner. Every edit made (that results in valid code) affects the playground in real-time. Because CSS is such an important part of visualizations, you can edit CSS live, too.
It enables developers to write colorized, syntax-checked code from virtually any web browser on virtually any device, including iOS, Android, Windows 8 and Blackberry. It offers support for most popular web programming languages, and enables developers to collaborate in real-time.
SQLFiddle is an online SQL query processing tool. You can run your SQL statements online without having a locally installed database. It works similarly to jsfiddle, except for SQL database syntax.
This site offers support for lot of popular databases, allows you to build your database schema online and execute SQL query on the fly. It's a great resource to learn and practice SQL queries online. Apart from many sweet feature, it also allows you to share your problem with community. If you are writing a complex query and stuck in middle, looking for help, you can create your schema on SQLFiddle and can share with your query to any forum or question answer website like StackOverFlow or any forum.
The HTML5 Playground is a tool developed by HTML5Rocks, it provides developers with a web based code editor, and a library of sample code and snippets to use as starting points for creating HTML5 based apps. Any developer can use these sample code example to modify or build their own code. Also this tool allows developers to preview their code instantly, and share it via a permalink, and/or other social networking tools.
HTML Code Editor
This will be the last tool on the list, and it's developed by us. Though this tool might not have some feature like other above listed option, but you can find it very useful when you need a simple tool to test your CSS and HTML before including it to your project. As time goes, we intend to improve the tool functionality.
Personally, I find myself hanging out mostly in codepen and jsfiddle. Do you have a favorite web-based sandboxing tool not mentioned above? Or, is there another must-use tool I don't include? Feel free to share it in the comment section.
*Please confirm the email sent to your inbox after clicking "Sign Up!".