The Slant team built an AI & it’s awesome

Find the best product instantly

4.7 star rating

DevelopmentFrontend DevelopmentProductivityText Editor

What are the best programming text editors with built-in live preview?

13

Options
Considered

487

User
Recs.

Nov 22, 2023

Last
Updated

Here’s the Deal

The Best 1 of 11 OptionsWhy?

Best programming text editors with built-in live preview	Price	Platforms	License
91 Visual Studio Code	FREE	Windows, macOS, Linux	MIT, Proprietary (official builds)
89 Atom	Free	Microsoft Windows®, macOS, Linux	MIT
-- LIVEditor	-	-	-
-- WebStorm	$0-$129/YR	Windows; macOS; Linux	-
64 Brackets	-	Windows; macOS; Linux	MIT

Visual Studio Code

Add Video or Image

Top Pro

Open source

It is open source and available on Github under an MIT license. See More

Top Con

Slow launch time

Than it's competitors, e.g. Sublime Text. See More

CompetentXmucane's Experience

It's fast and with a lot of cool extension,It's free too See More

Specs

Platforms:Windows, macOS, Linux

License:MIT, Proprietary (official builds)

Multi Language Support:Yes

Auto Complete:Yes

Top Pro

Active development

It's really nice to see how the code editor evolves. Every month there is a new version with great communication of new features and changes. See More

Top Con

Memory hog

Allegedly, VS Code is "lightweight". Yet, running multiple instances of it at once, you may get many "out of memory" messages from Windows despite 16 GB RAM. (While of course also running other things. The point is the comparison with some other IDEs/editors where running them alongside the same number of other applications doesn't cause Windows to run out of memory) See More

UnbiasedBaalat's Experience

I don´t see why VS Code is mentioned in this list because it does NOT have built in live preview. Live preview can be a nightmare for a beginner, having to configure firewall and extensions , and compability with your actualö system to make it work. See More

Top Pro

Cross platform

It supports Windows, Linux, and Mac. See More

Top Con

High resource usage

It consumes a lot of resources (reported by many users on github issues). You sometimes need to restart your machine. See More

ConvivialWagyl's Experience

While not exactly "built-in", you can very easily download an extension that shows you live reloads of your webpage on every save. Would def. recommend! See More

Top Pro

Integrated debugging

VSC includes debugging tools for Node.js, TypeScript, and JavaScript. See More

Top Con

Embedded Git isn't powerful enough

You can do nothing but to track changes, stage them and commit. No history, visualization, rebasing or cherry-picking – these things are left to git console or external git client. See More

Top Pro

Embedded Git control

Visual Studio Code has integrated Git control, guaranteeing speed, data integrity, and support for distributed, non-linear workflows. See More

Top Con

File search is extremely slow

It's absolutely not possible to use this tool with big projects given how long it takes to search for files. See More

Top Pro

Built-in terminal

There's no need to press alt+tab to go to a terminal: it is directly integrated into the editor. See More

Top Con

Have no good default js style analyzer

In WebStorm there is analyzer that checks for warnings and highlight this in yellow, here you cannot find or add it even with plugins. It is possible to have it as errors with linter but while you are actively changing file that's not very nice. See More

Top Pro

Extendable through plugins

Visual Studio Code comes fairly complete out of the box, but there are many plugins available to extend its functionality. See More

Top Con

Emmet plugin often fails on even simple p tags

Top Pro

Huge community behind it

The ease of getting assistance and finding tutorials is increasing as the community grows. See More

Top Con

A "me too" offering from MS, far behind other well established editors that it attempts to clone

Other IDEs specific to a language often offer better tools for deep programming. See More

Top Pro

Good support of extensions

It has excellent extension support which lets you handle all kinds of different aspects of any project. For example, there are plugins for git, code syntax highlighting, code formatting, code folding, Intellisense and so on. See More

Top Con

Poor error fix suggestions

Error detection and suggestions/fixes are poor compared to IntelliJ platforms See More

Top Pro

Ready to use out of the box

You don't need to configure and add plugins before being productive. However, you can add plugins if needed but for the basics you're well covered. See More

Top Con

Very bad auto import

Top Pro

Free

Top Con

Project search limits results

Because file search is so slow your results are limited in order to simulate a faster search. See More

Top Pro

Great performance

For a 'wrapped' web-based application, Visual Studio Code performs very well. See More

Top Con

The autocomplete and code check is not as powerful as the one on WebStorm

Sometimes it doesn't tell you if you made a typo in a method name or if a method is not used, and is also missing several other important features. See More

Top Pro

Fast and powerful

VS-Code has the speed of Sublime and the power of WebStorm. Perhaps this is the best software that Microsoft has ever created. See More

Top Con

Generalized

VS Code is a general code/scripting IDE built to be lightweight and for people familiar with their language of choice, not directly comparable to Visual Studio in power or scope. See More

Top Pro

JavaScript IntelliSense support

JavaScript IntelliSense allows Visual Studio Code to provide you with useful hints and auto-completion features while you code. See More

Top Pro

TypeScript integration

There is very solid TypeScript integration in Visual Studio Code. Both are developed by Microsoft and VSC itself is written in TypeScript. See More

Top Pro

It has gotten really good

All it takes is one stop for all the features many people need. See More

Top Pro

Good support for new Emmet syntax

Top Pro

Clean and professional user interface

Top Pro

Extensions (aka plugins) are written in JavaScript

Extensions are written in either Typescript or JavaScript. See More

Top Pro

Python support

Excellent Python plugin, originally created by Don Jayamanne, now hired by Microsoft to extend and maintain the extension. See More

Top Pro

JS typechecking

It leverages TypeScript compiler functionality to statically type check JS (type inference, JSDoc types) with "javascript.implicitProjectConfig.checkJs": true option. See More

Top Pro

Integrated task runners

Task runners display lists of available tasks and performing these tasks is as simple as a click of the mouse. See More

Top Pro

ESLint integration

ESLint integrates great. You can define your rules trough .eslintrc.* as usual and vs code will autofix your code on save. So your code is always in style. See More

Top Pro

Custom snippets support

Snippets are templates that will insert text for you and adapt it to their context, and in VSC they are highly customizable. See More

Top Pro

High fidelity C# plugin

The Omnisharp plugin is very powerful providing full sln, csproj, and project.json support. See More

Top Pro

Inline definition picking and usages finding

These features allow you to have a glance at code without opening it as a whole in a separate tab. Moreover, editing is allowed. See More

10 Other Options Considered

Atom

Add Video or Image

Top Pro

Open source

Atom is developed with the community on Github. See More

Top Con

Live preview feature isn't built in

The feature is added with an extension. See More

QuickSilver151's Experience

Specs

Platforms:Microsoft Windows®, macOS, Linux

Multi Language Support:Yes

Auto Complete:Yes (plugin)

Top Pro

Free

Atom is completely free to use. See More

Top Con

Slows down exponentially with plugins

Extending it needs sacrificing responsiveness. See More

Top Pro

Beginner friendly

One of the goals of Atom is to be a text editor for both experienced and beginner programmers. You can add keyboard shortcuts, change themes, install plugins, and change core settings by clicking through a GUI, or by manually editing config files the old fashioned way. It has the added advantage of being built using the same engine that powers Google Chrome, so actions like opening and closing tabs feel familiar even to new or non-programmers. See More

Top Con

Very slow startup time

Atom is very slow to startup, which is a big disadvantage if you are accustomed to using it to make quick changes on your files. See More

Top Pro

Multiplatform

Runs on Mac, Windows, and Linux. See More

Top Con

Has difficulty with large text files

Tends to crash or hang with large >(10MB) text files, making it less useful as a general text editor. See More

Top Pro

Themes

You can theme and customize Atom to your liking. See More

Top Con

High memory usage

Atom has a relatively high memory usage, especially when compared to some other text editors not based on Electron. For those who develop on the go, this also tends to mean shorter battery life. See More

Top Pro

Multi-line select and edit

Multiple cursors and column selection allow versatile ways of editing. ctrl + d will select the current word and each time the command is repeated, add the next occurrence of the word to the selection. ctrl + click or middle-mouse click will place another cursor in the place that's clicked. Cursors can then be controlled together. This also allows selecting vertically. See More

Top Con

Abysmally slow, poor interactivity

Responses to keystrokes have painfully long latencies, which will make fast typists very unhappy. See More

Top Pro

Easily hackable

It's built on web technologies (JS, HTML, and CSS), so hacking for JS devs feels natural. See More

Top Con

Doesn't handle RTL (right-to-left text) well

Text can't be highlighted and manipulated properly, cursor isn't displayed visually according to where it is logically (you have to type to find out), and similar issues. See More

Top Pro

No need to restart Atom after a new plugin install

You don't have to restart Atom after you install a new plugin in order to activate it. It automatically starts working. See More

Top Con

Not known when a new window will open

It's not really clear why and when a new window is opened when you open a file out of the tree view. See More

Top Pro

Embedded Git control

Will highlight folders, files, and lines that have any uncommitted edits made. It also integrates really well with GitHub. See More

Top Con

Slow

Atom is not a native application. As such performance is subpar and the lag is especially noticeable on larger projects. It also opens a surprising amount of sub-processes and leaks a considerable amount of memory. See More

Top Pro

Markdown editing easy to set up and flexible

Various plugins needed to be installed, but you have feature granularity, such as markdown previews, PDF generation, and even editor styling. See More

Top Pro

Instant file switching

Ctrl or Command + T and using fuzzy search you can look for a file in your project. See More

Top Pro

Extendable

Due to its modular design, almost any aspect of the editor can be changed. Even seemingly core packages, like those taking care of search and replace functionality, can be forked on GitHub, and changed and replaced in the editor. The documentation for creating new plugins is also great, making it easier for developers to jump in and create plugins for Atom. See More

Top Pro

Extensive list of packages

Atom has a built-in package manager and an extensive list of packages. Packages are written in CoffeeScript. See More

Top Pro

Modern feel and very customizable and extendable

Top Pro

Vim plugin turns Atom into a modernized vim

Top Pro

Could also be used as an IDE

Atom qualifies to be a good IDE because of the packages like linters, atom browser and hydrogen. See More

Top Pro

Command palette support

The Command Palette permits fuzzy searching all available functions, settings, snippets, etc. See More

Top Pro

Built-in package management

Atom was built from the ground up with the community in mind. Package management is therefore a first class feature. See More

Top Pro

Command line integration out of the box

Installing Atom adds two command line commands - atom and apm. The first one runs the application itself and the second one is the Atom Package Manager that's used to add and remove various components from the package listing. While these features can be set up with other editors as well, Atom takes care of them out of the box. See More

Top Pro

Best support for Arduino with Platformio

Arduino is the most important platform for developing embedded systems. See More

Top Pro

Node.js integration

The editor is built on top of Node. As such anything that can be done in Node can be done in the editor. See More

LIVEditor

Add Video or Image

WebStorm

Add Video or Image

Top Pro

Code refactoring support

To make sure your code can be easily maintained, you must first be sure to make it clean and tidy. This is the part where WebStorm really helps you. It automatically refactors your code by performing functions on it, such as extraction of variables, moving files, inline variable extraction, etc. See More

Top Con

Not open source

This application is proprietary, and thus cannot be modified, freely distributed, or trusted for security. See More

Specs

Platforms:Windows; macOS; Linux

Multi Language Support:Yes

Auto Complete:Yes

Bracket Matching:Yes

Top Pro

Maintains a local history

The local history feature in Webstorm tracks all your local changes in the source code that you are making. You can use it to view changes that you've made to your code and roll back whenever necessary. See More

Top Pro

Integrated code quality tools

WebStorm comes bundled with JSHint and JSLint. JSCS, ESLint, and Closure Linter can be installed via npm. They register as inspections and are customizable through IDE settings. They run automatically and will highlight potential issues. Pressing alt+enter on an issue will allow the user to view suggested fixes. See More

Top Pro

Compilers for compile-to-JavaScript languages

WebStorm has built-in support for CoffeeScript and Dart. See More

Top Pro

Supports a wide range of plug-ins

Top Pro

Support for all major VCS systems

Webstorm supports not just Git and Mercurial, but Subversion, CVS, and Perforce as well. See More

Top Pro

Supports many JavaScript frameworks

WebStorm includes support for Meteor, Angular, and React. See More

Top Pro

Gulp support

Top Pro

Has a built-in terminal

The IDE comes with a built-in terminal, a feature lacking in some lighter editors. See More

Top Pro

Server and client-side debugger

WebStorm has a powerful debugger, with support for conditional breakpoints. See More

Top Pro

Built-in terminal/run tools

WebStorm (and really all of the IntelliJ IDEs) support the plugins throughout their plugin ecosystem which leaves you with 100s of tools to handle your automation tasks. There is a wide range of build-related plugins that help you by having pre-defined commands to execute with the click of a button. Out of any other IDE, WebStorm has by far the most coverage when it comes to tools for your development workflow. See More

Top Pro

CSS pre-processor support

WebStorm has built-in support for Sass which is one of the most stable and powerful CSS extension languages. See More

Top Pro

Multi-line select and editing

Top Pro

Really good configurable code formatting

This integrates with other community tools like ESLint and editorconfig. See More

Top Pro

Different configurations for different projects

It is able to specify for example node versions, which will be used to run task for current project. See More

Top Pro

Typescript support

WebStorm offers typescript support for building typed JavaScript applications which improves refactoring and code completion, as well as helping to find bugs. See More

Top Pro

Interactive theme (color scheme) editor

Makes adjusting an existing or creating new themes a breeze. Especially due to things like inheritance, as well as easily exporting/distributing/importing the color settings which really only store where on deviates from the defaults (thus the resulting files are very small and relatively human-readable). See More

Top Pro

Webpack support

Assists with configuration and understands module resolution. See More

Top Pro

Powerful Code Templates

Code Templates are powered by Apache VTL (Velocity Template Language) and allow for includes, custom variables, conditional blocks, iterators, and live templates. See More

Top Pro

Built-in web server

WebStorm has a built-in webserver that allows you to run projects from http://localhost:63342/ProjectName. See More

Top Pro

Node.js integration

WebStorm integrates with Node.js to allow for running, debugging, and unit testing of Node.js apps. See More

Top Pro

Intelligent code completion

WebStorm has two types of autocompletion: structural completion and word expansion. Structural autocompletion makes predictions based on its understanding of JavaScript objects, while the latter tries to predict the word currently being typed based on previously typed words. Word expansion also works in comments and docstrings and it's similar to vim's omnicompletion. Both types of autocompletion work extremely well, have little to no problems and are quite fast even when loading suggestions on the go. See More

Brackets

Add Video or Image

Top Con

The live preview is very buggy, making it unreliable

Top Pro

Free, open source and cross-platform

Brackets is entirely free and open source. See More

GraciousCheimon's Experience

Brackets is the best HTML Live Editor Bar None, but it is being depreciated by Adobe :(( See More

Specs

Platforms:Windows; macOS; Linux

Extension language:JavaScript

Collaborative editing:No

Top Con

Adobe is depreciating the program

Top Pro

Built-in browser live-updating

Brackets will automatically refresh the browser and load the latest saved version of a file open in the browser. Works with php as well. Editing css will even highlight the tag that's currently worked on. It only works with Chrome though. See More

PoliteAkmon's Experience

i like it See More

Top Con

Still missing some elementary text editor commands

Some gaps have to be filled by plugins, while these features should be built in. For example: Jump to matching brace (bracket / parenthesis); Gutter selection of lines; Recall previous searches / replacements; Autofill of search field with text under caret (text has to be selected); Show whitespace / end of lines / indentation guides / right margin; Selection to upper / lower case; and some more. See More

Top Pro

Popup previews

Hovering over colors hex codes or image paths will pop up previews of corresponding colors and images. See More

EnchantingTonacacihuatl's Experience

Brackets is super easy to set up and use. You can go from clicking "Download" to working in minutes See More

Top Pro

Built-in extension manager

Functionality of Brackets can be extended via a simple to use extension manager. The extension manager also has a considerable number of extensions and themes. See More

Top Pro

Can be hacked by any front-end developer

The editor is built using html, css and javascript making it extendable by any front-end developer. See More

Top Pro

Actively developed

Brackets is being actively maintained and developed. See More

Top Pro

Lightweight

It is easy on the memory usage and starts quickly. See More

Top Pro

Support for Adobe PSD content

Default extension allows extraction of PSD resources, such as images and styles. Good integration for placing extracted resources into source. See More

Top Pro

Can style a tag without switching over to the stylesheet

A feature called quick edit allows selecting a tag in, for example, an html file and edit the associated style without switching over to the css document. It also supports SASS and LESS pre-processors. See More

Light Table

Add Video or Image

Top Pro

Plugin manager

LT has a built-in plugin manager which connects to LT's own registry of plugins, so whenever you want assistance while writing your HTML, JS, or even Python, just open up the plugin manager, search for it, and click the little install button beside it's name. Your plugin will then be installed. See More

Specs

Platforms:Windows, Linux, Mac

Integrated Debugger:REPL

Plugin Manager:Yes

Top Pro

Inline evalution

With LT's inline evaluation, you don't have to re-compile your whole source file. Each time you want to see an output, all you have to do is hover your cursor over the line you'd like to evaluate and press ctrl+enter; LT will evaluate that line of code for you. See More

Top Pro

Built-in web browser

Emacs

Add Video or Image

Top Pro

Integrates planning in your development process

You can jump straight from your org-mode files to programming tasks - and back - and build a seamless workflow. See More

Specs

Platforms:Unix-like, macOS, Windows, Cygwin

License:GPL-3.0-or-later

Multi Language Support:Yes

Auto Complete:Yes

Top Pro

Supports inline-LaTeX preview with org-mode

Overlays allow customizations of the presentation which go well beyond typical live preview. See More

Top Pro

GTK+ widgets support

Since version 25 you can run GTK widgets inside Emacs buffers. One of these is the WebKitGTK+, which allows the user to run a full-featured web browser inside Emacs with JavaScript and CSS support among other things. See More

Top Pro

Enormous range of functionalities (way beyond simple "text editing")

Through its programmability, a very broad range of functionalities can be integrated in emacs, turning it even into a "single point of contact" with the underlying operating system. See More

Top Pro

Cross-platform

Works on Linux, Windows, Macintosh, BSD, and others. See More

Top Pro

Provides org-mode

Advanced planning and publication which can start as a simple list. See More

Top Pro

Support multi-line editing, multiple frame, powerful paren, crazy jumping style

Review the "Emacs Rocks" video. See More

Top Pro

Ubiquity

Fully compliant GNU-emacs is available on many platforms, and they all understand .emacs configuration files. See More

Top Pro

Free

Licensed under GNU GPL. See More

Top Pro

Works in terminal or as a GUI application

You can use Emacs' command line interface or graphical user interface. See More

Top Pro

It's also an IDE

You can debug, compile, manage files, integrate with version control systems, etc. All through the various plugins that can be installed. See More

PyCharm

Add Video or Image

Top Pro

Catches run-time information when running the code

PyCharm can leverage run-time information when running your application with the built-in debugger to figure out what types can possibly be passed to which functions, etc. See More

Specs

Multi Language Support:Yes

Auto Complete:Yes

Bracket Matching:Yes

Integrated Debugger:Yes

Top Pro

Automatically figures out what test to run based on the method the cursor rests at a given time

PyCharm, based on what method or class the cursor rests, can figure out what tests to run and perform them with a keyboard shortcut or two, without breaking up the flow and need to switch to a command line interface. See More

Top Pro

Excellent refactoring support

There are many refactoring options including renaming and changing signature across entire projects. It also includes the an ability to preview changes before committing and exclude anything unwanted. See More

Top Pro

Excellent integration with debugging tools

All the debugging can be done inside the IDE. Breakpoints in the code can be added using keyboard shortcuts or the mouse. When the code is executed through the debugger a toolbar pops up with all the relevant context needed for the debugging process. The whole process is smooth and painless and you don't even have to switch windows to do the debugging. See More

Top Pro

One of the best autocompletion engines around

PyCharm has two types of autocompletion: structural completion and word expansion. Structural autocompletion makes predictions based on its understanding of Python and JavaScript objects, while the latter tries to predict the word currently being typed based on previously typed words. Word expansion also works in comments and docstrings and it's similar to vim's omnicompletion. Both types of autocompletion work extremely well, have little to no problems and are quite fast even when loading suggestions on the go. See More

Top Pro

Free version available

There's a community edition (with limited features) that's free to use. You can also get a 30-day trial of the Professional edition. See More

Top Pro

Great for navigating large codebases

PyCharm has amazing code navigation implementations. It supports both goto symbol and goto declaration. The former finds classes, variables, functions, etc by name. While the latter is used by moving the cursor on top of a symbol and by using the mouse or a keyboard combination it finds the declaration of that symbol and takes you there. Both of these features are extremely helpful when consulting large code-bases and when trying to understand an API written by someone else. See More

Top Pro

Version control integration

PyCharm has CVS, Git, Subversion and Mercurial integration. See More

Top Pro

Great pip support

PyCharm offers great pip integration. When opening a project it automatically checks for a requirements.txt file in the root of the project. If it's found, it checks if all the libraries are available in the interpreter. If one or more libraries are missing, it issues a warning and asks whether you want to install any missing libraries. See More

CoffeeCup

Add Video or Image

Top Pro

In-live preview

Top Con

Not free if you need more features

DreadnoughtDev's Experience

Honestly, in terms of features, the free version isn't too far off from being a simple HTML text editor. However, it has a live preview, which is one thing I have not seen with other code editors. This, along with a built-in FTP client, is all I really need, which is why I recommend it. See More

Specs

Platforms:Windows

License:Proprietary

Top Pro

There is a free version

Top Con

It's commercial

Many features that appear to be available in the free version are actually locked, and can only be accessed by buying the paid version of CoffeeCup. This normally doesn't matter much, but some the features that are blocked would have been really useful in the free version. For example, one of these paid features is a built-in code cleaner; another is a tab full of a variety of code samples for you to use, among other features. See More

Top Pro

Built-in FTP client

Sublime

CodeLobster IDE

See flagged products

Built By the Slant team

Find the best product instantly.

4.7 star rating

Try it now - it's free

Vetted.ai illustration