The Most Powerful and Feature Rich Web-Based Code Editors (IDEs)
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:
CodeRun – A free, Cross-Platform Browser-Based IDE
CodeRun – A free, Cross-Platform Browser-Based IDE is a free and open-source web based IDE, which features native support for C#/.NET (3.5), PHP (5.1), JavaScript, HTML and CSS. C# support includes ASP.NET, WCF, Silverlight and WPF browser application development and deployment. Database support includes SQL Server 2005 and Amazon SimpleDB.
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 →
Demo →
CodeRun Screenshot & Screencast
Bespin
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 →
Demo →
Bespin Screenshot & Screencast
Kodingen
Kodingen Screenshot
Amy Editor
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
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.
ecoder →
Download ecoder via SourceForge →
ecoder Screenshot
Codeita
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.
Codeita →
Codeita Screenshot
ShiftEdit
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.
ShiftEdit →
ShiftEdit Screenshot
Workspace
Workspace is a complete online development environment that gives you complete management of your Web-based projects. With a syntax highlighting editor built right in, you can edit text, PHP, JavaScript, HTML, Java, Perl, SQL and other types of files directly on a remote server. Finding and managing those files is made easy with a cutting-edge file management utility embedded right in the app. With this utility, users can connect to, and manage the files on an arbitrary number of ftp sites simultaneously.
Workspace →
Workspace Screencast
markItUp!
markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.
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.
markItUp! →
markItUp! Screenshot
jsFiddle – Online Editor for the Web
jsFiddle is an editor that allows you to you save and run your applications all within the web browser. It currently supports JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML and CSS.
jsFiddle – Online Editor for the Web →
jsFiddle Screenshot
Ideone.com
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.
Ideone.com →
Ideone Screenshot
CSSDesk
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.
CSSDesk →
CSSDesk Screenshot
PHPanywhere
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.
PHPanywhere →
PHPanywhere Screenshot
Rendera – HTML5 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.
You may want to learn HAML and SASS, it support those too. You can also try out some Javascript interactions as well. They’ve loaded jQuery, jQuery Tools and jQuery UI so you can experiment with those libraries too.
Rendera – HTML5 Editor →
Rendera Screenshot
Drawter.com – DrawAble Markup Language
Drawter is a web based editor (written in JavaScript and based on jQuery library) that quite literally allows you to draw your website’s code, with each tag being presented as a layer you have drawn.
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 →
Drawter Screenshot
Live Style Sheet Editing!
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 »
30 Pure CSS Alternatives to Javascript »
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 »
15 Javascript Web UI Libraries, Frameworks and Toolkits »
50 jQuery Plugins for Form Functionality, Validation, Security and Customisation »
One of the most important aspects of a practical web design layout is intuitive and easy to use navigational aids. Naturally, this starts with the homepage navigation menu, but it should be pushed to the forefront in all areas of a web site. “Cookie crumb” navigation trails at the top of the page look classy and are helpful if the reader needs to quickly go back to a specific area.
Typography is at least 50% of good web design. Eye-catching fonts that aren’t overly distracting allow designers to do a lot with a little. Varying the size and font of different headers, sub-headings and content is a great way to “set off” different components for easy recognition. It’s a simple tactic to differentiate sections from one another and to keep the viewer from getting bored with your layout. Speaking of which…
A clean and well-organized layout ensures that users don’t get lost amidst a confusing maze of links and interrelated pages. Sketch out beforehand how you want to present your information and media, as well as how you want to tie it all together. You’ll save yourself time and effort down the road by coming up with a layout strategy before you get started.
User interaction and a smooth, non-gimmicky interface that facilitates ease of use of your website is a must nowadays. Sliding photo galleries, jQuery or MooTools enabled animations and actions and other AJAX-powered elements on your site allow for smooth intake of data. Such features allow your audience to interact with the site without breaking their reading flow or concentration.
Color selection makes a huge difference when it comes to crafting a memorable and attractive web page. An incoherent color scheme that “clashes” looks gaudy and can inhibit the viewer from fully enjoying everything your site has to offer. Choosing colors that go well together and compliment your design is more art than science and can take awhile to get the hang of, but the time invested in mastering this skill is well worth it.
Speed and responsiveness are both a front-end and a back-end issue. Javascript loading can severely bog down any site. It’s no wonder that the fastest growing browsers like 
Implementing a clear vision and focus is important as it gives you a rough master plan of how to go about designing your site. Ask yourself what your site is trying to accomplish and what message you want to communicate to your audience, and you’ll have a better idea of how to proceed.
