• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Choosing a WooCommerce Theme? Here’s What Most Store Owners Get Wrong

      May 9, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

20 Online Code Editors and Tools for Developers

12
  • by Gavin
  • In DEVELOPMENT · RESOURCES
  • — 26 Sep, 2013

Developers like to write code for web applications with web based online tools. However such web-based code editors perform bit slow while comparing with desktop tools and applications. But nowadays such applications are focusing on providing a similar or better experience with desktop based ones.

If you are a developer and you seeking for some useful online code editors then you are at right place, I have gathered 20 online code editors and tools that would help you out with your development tasks. Following online code editors let you write your ideas into code easily in various languages ( php, html, javascript, css, Ajax etc.) and help you to simplify your development tasks quickly. I hope you will find the list handy and according to your requirements. Enjoy!
 

If you like the article you might be interested in our other article on JavaScript Code Editors and IDE for Developers.

1. BluePen Editor

bluepen
BluePen Editor is a PHP-powered CSS editor that can be installed to any static or dynamic website and makes live CSS editing possible. Once triggered (with a bookmarklet), it opens the editor widget and makes all HTML elements hoverable so that blupePen can locate the CSS rules of them (like Chrome Dev Tools).
 
Source  

2. Dirty Markup

dirtymarkup
Dirty Markup is a free web-based application for cleaning up such code very easily. It has support for HTML(5), CSS and JavaScript by combining the powers of the popular HTML Tidy, CSS Tidy and JS Beautify.
The editor used is the simple + functional AceEditor and there are multiple options for each beautifier to get the best results.
 
Source  

3. Rendra Online HTML5 Editor

Rendera-online-html5-editor
Rendera is an online HTML5 editor which renders a realtime preview of your current work also transform your current work into CSS, Rendera supports HAML and SASS. Rendera makes learning HTML5 and CSS3 easy and it is built with CoffeeScript and Sinatra.
 
Source  

4. Maqetta

Maqetta-html5-editor
Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads. Maqetta is available under a commercial-friendly open source license. You can download the source code and install it on your own server, customize the code to fit your needs and/or contribute improvements to the open source project.
 
Source  

5. Amy Editor

amyeditor
Amy Editor is a collaborative text and source code editor for developers. It support JavaScript, Ruby, PHP, C#, Java, HTML, YAML, etc… programming languages. It has Syntax Highlighting, Smart indentation for each language, Code folding, Unlimited undo/redo, Customizable key shortcuts, etc… You can easily change the color themes of the editor easily.
 
Source  

6. JS Bin

jsbin
JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.
JS Bin allows you to edit and test JavaScript and HTML. Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.
 
Source  

7. CSSDesk

css-desk
CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live. I had very high ambitions for the project. There are line numbers and syntax highlighting appear live in the text box as you type. One of the greatest things is that it allows users to share their code with others as well.
 
Source  

8. Editpad

editpad
EditPad is simple and minimal. No syntax highlighting, no project management…Just a plain page to type your text without any distractions.
 
Source  

9. RegExr

regexr
RegExr is an online tool for editing and testing Regular Expressions (RegExp / RegEx). It provides a simple interface to enter RegEx expressions, and visualize matches in real-time editable source text. It also provides a handy RegExp snippet sidebar with descriptions and usage examples to make it easier to learn Regular Expressions through trial and error.
 
Source  

10. Codeanywhere

codeanywhere
Codeanywhere is a code editor in a browser with an integrated ftp client, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML).
 
Source  

11. 9ne

9ne
9ne (Pronounced Nine) is a nice online text editor, based on the well known GNU Emacs. 9ne provides most of the basic Emacs functionalities and currently supports XML and Javascript syntax highlighting modes.
 
Source  

12. Drawter

drawter
Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.
 
Source  

13. Shift Edit

shift-edit
Shift Edit provides code completion, syntax highlighting, live editing, revision history and many more.
 
Source  

14. Darkcopy

darkcopy
DarkCopy is a simple, full-screen text editor for distraction free writing. DarkCopy is for anyone who enjoys the simplicity of a typewriter, and wants to increase productivity by focusing only on writing.
 
Source  

15. jsFiddle

jsfiddle
jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks. You can select the framework & the version of your choice (MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla). Also, if there is, you can add a complimentary framework like jQuery UI or MooTools More A great feature is the ability to save & share the code created with a unique URL generated. Optionally, jsFiddle has an embedding feature too. It is an almost perfect platform for trying & sharing your JavaScript code without the need of a website.
 
Source  

16. Cloud9IdE

cloud9ide
Cloud9 IDE is an open source application that aims to provide a powerful and focused IDE for JavaScript developers. It is powered by the Ajax.org platform + makes use of HTML5, node.js, socket.io and many other projects. The application has a pretty fast text editor with bundled syntax highlighting support for JS, HTML, CSS and mixed modes. Cloud9 IDE has integrated debuggers for node.js and Google Chrome which can be started, paused and stopped from the IDE.
 
Source  

17. Dabblet

dabblet
Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.
 
Source  

18. JS Hint

js-hint
JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. The goal is to help JavaScript developers write complex programs without worrying about typos and language gotchas.
 
Source  

19. jsdo.it

jsdoit
jsdo.it is a coding community for front-end engineers such as web designers, mark-up engineers, and JavaScript engineers. 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. Don’t worry even if you are not confident in your skill! Arrange shared codes and learn cutting-edge techniques.
 
Source  

20. Gist Box

gistbox
Finally I am adding Gist Box which lets you easily organize code snippets. Your library is saved to the cloud for backup. Never worry about snippets getting lost in the shuffle. GistBox was built on standard HTML5 technologies. On the go or at the office, you’ll always have GistBox.
 
Source  

Share

Tags: best code editorscode editorhtml code editoronline code editor

— Gavin

A Web addicted Geek stuck inside Tron.

  • Previous story 12 Fresh jQuery Plugins You Shouldnt Miss
  • Next story 10 Web Development Tools for Developers

You may also like...

  • 25 Code Snippet Resources and Repositories for Developers
  • 12 Best Password Managers
  • JQUERY DATEPICKER 16 jQuery Date Picker Plugins to Plan Your Tasks
  • Tools and Resources for Creating Gantt Charts

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • DEVELOPMENT
    • 20 Online Code Editors and Tools for Developers
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM