With all the talk of Cloud computing at the moment and after reading a short article on Dzones blog a few months back that questioned whether or not It Was the Right Time for Web-Based IDEs? (it was a split poll), we were inspired enough to venture out and find out what web based IDEs (integrated development environment) are available and which actually are the best. The results were a little bit surprising.
What we found was literally hundreds upon hundreds of different web based editors, tools and generators for every possible language you could think of. The problem was that very few met with the criteria of being the powerful and feature rich IDE we were looking for. A lot of these tools had either not been updated in years or did they pack enough features to be deemed useful or functional in the grander scale. Other tools, look like they may have potential, but development has disappointingly slowed down.
As you may have guessed there have been many attempts at browser based IDE’s over the past few years, so what we have compiled for this article is a selection of IDEs that are not only functional, polished and professional, but are also ready to take the next big step and be the best web based code editing solution. Here is our favorite selection of web-based IDEs:
Syntax coloring and code completion are featured to help you during development. It also features an online debugger that allows you to set breakpoints, step through your code, inspect call stack, and other debugging actions.
You could either use the feature-rich and powerful CodeRun as a complete replacement for your desktop IDE, or you could use it to upload existing code and test it in the cloud or for sharing with your peers.
CodeRun Home →
CodeRun Screenshot & Screencast
From Mozilla Labs, Bespin aims to be a ‘top-of-the-line text editor that lives in your browser’. It is based on the latest web standards and does require a “modern browser” with support for HTML5 and specifically the Canvas element with the ability to draw text.
Depending on what you’re trying to accomplish and how much time you’re willing to invest, there are several ways in which you can use Bespin: You can try the IDE directly (Bespin demo), download Bespin Embedded for use in your own applications or you can setup your own Bespin server (not for the faint of heart!).
Bespin Screenshot & Screencast
The very popular, feature rich and very powerful Amy Editor supports syntax highlighting for multiple languages, opening multiple files in different tabs and features an integrated debugging tool, and even allows you manage multiple projects all from within this web-based editor.
Amy Editor →
Amy Editor Screenshot
ecoder is a simple, web-based code editor, which includes a file browser, file uploader, and tabbed system to allow multiple files to be edited at the same time. using this web-application developers can edit code directly online, real-time syntax highlighting is handled by textarea and keyboard short-cuts lend it the feel of a locally installed application.
Codeita is a powerful, easy to use, cloud-based, web development environment. It’s a powerful code editor, an advanced svg image editor, and a useful project management and collaboration tool. It allows users to code, develop, brainstorm, communicate and then publish projects and files to your web server. No more hassles with backups and syncing your laptop with your desktop. Or your personal laptop with your business laptop. Complete with code highlighting, local/live editing, project sharing, image editing and more.
ShiftEdit is currently under development but is functional. It features most of the things you’d expect from an IDE including built-in FTP, tabbed interface and with support to edit HTML, JS, CSS or PHP files.
markItUp! is not a web based IDE nor is it meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites.
jsFiddle – Online Editor for the Web →
Ideone is an online compiler and debugging tool which allows you to compile, run, test and share code online in more than 40 programming languages. It also offers access to the free Ideone API which is available as a webservice, with it’s functionality allowing you to build your own ideone-like service.
CSSDesk is no where near to being a fully featured IDE, nor does it try to be. What it is is a cool, simple and very easy to use testbed for any CSS and HTML experimentation. Have you ever found yourself needing or wanting to try something out in CSS and HTML but don’t want to open up a text editor and throw together all the pieces to get started? That’s where CSSDesk comes in. Simply edit the placeholder code, and you’ll see the result updated live.
PHPanywhere is a complete web based free IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online. It includes a real-time syntax code editor with support for all web formats and a powerful FTP editor.
Are you struggling with all of the new CSS3 and HTML5 properties and features? Rendera can help. Type in your HTML code and see it rendered in realtime, then style it with CSS using any of the HTML 5 or CSS3 tags that your browser supports.
Rendera – HTML5 Editor →
Currently Drawter is available in Pro version (it is still FREE), which means that knowledge of HTML and CSS is essential. The future goal of Drawters development is to build an Amateur version, which will allow you to draw your website without any knowledge of HTML or CSS what-so-ever. Watch out for its launch some time this year.
Drawter.com – DrawAble Markup Language →
If all of the above web based editors, plugins and tools are too much for you, how about just playing about with this little tool. Edit the visible stylesheet and few your results live, its more fun than useful, but will certainly relieve development stress!
Live Style Sheet Editing! →
Live Style Sheet Editing! Screenshot
You might also like…
14 Light and Easy to Use Open-Source Content Management Systems »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
50 Fundamental jQuery Controls, Components and Plugins »
50 jQuery Plugins for Form Functionality, Validation, Security and Customisation »