Free Online HTML Editors

Mychelle Blake
Software Developer

Creating a website using HTML, CSS and other languages "from scratch" requires an HTML editor (also known as a text editor). While there are software programs you can purchase for this, there are many excellent options online that are free to use.

HTML Online

This site has a pleasing graphic interface which allows you to see the WYSIWYG (what you see is what you get) version of your site on the split screen while you work with HTML, CSS and Javascript code. The code is colored by type of syntax which helps with quick reviews to find problems.

You'll also find cheat sheets for beginners and a whole section on typical HTML symbol codes. HTML Online has an excellent blog with tons of "how to" articles for website design using HTML, CSS, Javascript and jQuery.

There are several templates available including wikis, Bootstrap, single scrolling pages and an infinite scroll gallery. Save time with code generators for design elements such as tables, forms, iframes and link anchors. There are similar generators for common CSS styles and jQuery code. Another nice feature is a code clean review that reviews your code for issues before you complete your site. This tool can also be used to import Word documents and translate them to HTML format.

HTML-Online

You can use HTML Online for free, but you must link your site to it in return. There is a paid version but with all the features you receive for free, you may not find a need for the pro version unless you are an experienced coder.

Codepen

Codepen has a similar interface as HTML Online with a split screen where you can view the live version of your site side-by-side with your HTML, CSS and Javascript code. There are many tutorials on the site, both written and in video format, and plenty of code snippets you can use for your projects.

When you create a project, it is known as a "pen." One of the nice features of Codepen is the focus on sharing code with other developers. You can post your pens publicly so anyone can access them. This is a terrific tool for coders who are doing an online search for a specific type of design issue to solve. Active participants can curate their pens into collections where you can see all of their work. This is very helpful if you find an example you like and want to view more of the person's work. You can even "fork" someone's code to work on it on your own, similar to GitHub.

The one drawback that people might not enjoy is that all of your pens are available for anyone to view. They are not private. Codepen's default workspace is black with colored text. If this doesn't work for you, there are a few different themes you can choose instead. You also need to create an account to use Codepen. Codepen gets high marks in reviews.

Codepen Screenshot

Using Codepen is free, although there is a paid version if you want to increase the number of features you can access, such as private pens and team projects. The free version is very robust, however, and is probably the most popular version due to the coding community built around building and sharing work.

CSS Deck

If you're looking for something light, quick and simple, CSS Desk is a good choice. The interface allows you to type in HTML, CSS and Javascript code in three boxes along the left side while the WYSIWYG view is in a larger box to the right.

You have the option of using a code validator and there is a box with tips that will pop up along the left side of the screen. The tips area gives fairly simple advice on writing code; there are no tutorials or help articles on the site. However, there are "codecasts" where your code is recorded on screen as you type and others can watch the videos to see how you put your project together. CSS Deck also supports working in teams on labs and has a sharing section similar to Codepen.

CSS Deck is a much more "no frills" site compared to other editors, but if you are looking for something clean and distraction-free, it's a good choice. Beginning coders may find it harder to use and prefer a more extensive option with more tutorials and resources. CSS Desk received a review of three out of five stars on Crozdesk with a code editor combined rating of 74 out of 100.

Screenshot of CSS Desk

The editor is free through revenue gained by advertising. You do need to create an account in order to save your "labs." Another benefit to creating an account is the ads will be removed.

Best Online HTML Editor

Despite the name, this is probably one of the simplest and most feature-free online HTML editors. The user interface consists solely of a single box for entering your content. You can choose to write in source view, which is pure HTML, or you can use the WYSIWYG option where you type in the text as you would like it to appear on your site. Then, you can use the source code at the end to copy to your webpage.

There are no options to write CSS or Javascript, so any style changes you make to your text will be in inline CSS, which is generally not recommended. You could write a stylesheet based on the inline styles and then delete them afterward. There is also no type of code completion or color delineation with the source code, making this tool more difficult to use for the beginning coder who needs the extra help.

Screenshot of Best Online HTML Editor

The editor is free and does not require, or have, any type of registration or account. You cannot save your work in the editor itself; you will need to copy and paste the source code to a plain text editor on your computer, like Notepad. The site is ad-supported, so you will see ads along the left and right sides of the screen. This could be distracting depending on how clean a workspace you need to focus on your code.

JS Fiddle

Despite the simple interface, JS Fiddle is very popular with developers and like Codepen, your work will be public and users regularly share their projects with others. You can also collaborate with other developers in real time with a chat box where each user can view the code and chat or use audio to give comments and suggestions.

The screen is composed of a grid with two boxes along the top for HTML and CSS, and two boxes along the bottom for Javascript and your "live" version of the site. There is no customization for themes, so if you find a white background with black text harder for your eyes, you may prefer a different online editor with theme customization. It also makes doing a screencast video using JS Fiddle less attractive as the text may be harder to see on a recording.

Another issue is that the WYSIWYG version does not automatically appear as you type. You need to hit the "run" button to get the revised versions to show up each time, which is more time consuming. There are also no tutorials or help options, so JS Fiddle is likely not a first choice for beginners who need more help learning how to code. On the plus side, it has code completion and syntax coloring, and there is a "tidy" feature to help clean up your code.

Screenshot of JSFiddle

JS Fiddle is 100% free and ad-supported. If you dislike advertising on your workspace, though, the ads on JS Fiddle are on the bottom left of the screen and smaller than other ad-supported sites, so it's not as intrusive to your workflow.

Sublime Text

Unlike the other editors listed here, Sublime Text is not an online editor but can be downloaded onto your PC or Mac. The reason for using it over an online editor is the rich feature set that makes it a favorite of many developers.

Sublime Text has the usual helpful features coders enjoy, such as colored syntax, auto-complete, workspace theme customization and split screen interfaces. You can also code in a long list of languages aside from just HTML, CSS and Javascript. It works with many plugins that help increase your efficiency, such as code checkers and delineators. Unlike an online editor, you can have multiple files open at once, which can be very useful if you're developing a series of files and directories in multiple languages. The find and replace feature makes debugging easier.

An important shortcoming, however, is that you cannot see the WYSIWYG version of what you are creating. You need to save all your files and then click "View in Browser" to see your site online. While there are no tutorials or help within the software itself, there is an active online support forum. This may not be the best choice for beginners and the interface may feel more challenging and daunting than the online editors that are limited to only a few languages.

Screenshot of Sublime Text Editor

Sublime Text can be downloaded and used for free. You will occasionally have a pop-up asking you to purchase a license for $70, which removes the pop-up. You are free to use the software as long as you like without purchasing the license so long as you are willing to tolerate the occasional pop-up.

Choosing an HTML Editor

When choosing an editor, you should decide on which features are most important to you before you do your research. Whether you need a simple interface with no additional help, or a more involved workspace and feature-set that includes tutorials, blog posts and more, there are a wide variety of options, and most importantly, 100% free ones. There's no need to buy expensive software to learn and write code. All you need is an online connection and you're ready to start developing!

Free Online HTML Editors