The Most Powerful and Feature Rich Web-Based Code Editors (IDEs): "
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:
Reader Opinion: What do you think? Are you ready to take the step and use a web based IDE?
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 →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
"
Posted in: 
