Atom Live Preview In Browser

Seven Atom add-ons

In this article, I'll introduce some packages for the code editor Atom, useful for previewing changes as you type (particularly for web development) and for compiling and executing code without needing to switch out of the editor to a console or IDE. I'll also comment on why using them is a good idea.

Note: Ctrl|Cmd signifies the PC "control" key, or the Mac "command" key, when showing shortcuts.

Visualizing Live Changes

Changing from one program (the one in which you code) to another (the one in which you visualize things) not only has a cost in time, but it also comes at a cognitive expense. That is, it makes you less productive, since you lose focus and mental power as you switch from one task to another. (See "The High Cost of Multitasking: 40% of Productivity Lost by Task Switching" and "The True Cost Of Multi-Tasking", to shed some light on this topic.)

Being able to have immediate feedback for your programming, on the other hand, and seeing changes reflected as you type (for the cases when this is possible) will enable you to save a lot of working time and focus, for you don't need to be switching tasks and applications, and to a large extent the act of programming, visualizing and debugging becomes a single task.

I'll show you some community packages that will enable/disable the visualization of changes with just a key stroke, so that we can keep everything — editing and viewing — within Atom.

WebDev

Unlike Brackets, which is a code editor designed mainly for the web, Atom doesn't come with built-in preview for HTML and CSS code. And this actually is a bit strange, considering that Atom is built on top of Electron, which is a framework that already uses Chromium (the open-source project behind the Google Chrome browser) as part of its engine.

All the same, thanks to Atom "hackability", here are some packages that will bring this functionality to the editor.

Atom HTML Preview

Atom HTML Preview shows a live, as-you-type preview for HTML documents, with support for CSS and JavaScript. This is somewhat basic for today's web development, but it'll do the work just fine for many of us. It's a simple, lightweight package that does exactly what's expected.

To install: apm install atom-html-preview

Browser Plus

Browser Plus is a package that will allow you to open a browser in an Atom tab, which even comes with the Developer Tools for handy debugging!

For the live changes preview, you'll need to click on the thunderbolt icon, but notice that you'll still need to save the file you're editing (Ctrl|Cmd+S) in order to visualize the changes. To enable a "hyper" live preview to show changes as you type, alongside with support to preview changes in JSP/PHP/Express/Django, among other languages and frameworks, you'll need to install the companion package Preview Plus (PP).

To install: apm install browser-plus
To install "hyper" preview and other frameworks support: apm install pp

Bootstrap 3 Support for Atom

Bootstrap 3 Support for Atom, now that we're getting more specific, brings support for Twitter's framework for web development, Bootstrap. It works smoothly with the aforementioned Atom HTML Preview, and it has the following features:

Supports autocompletion of all helper classes in JavaScript, CSS and HTML.
Snippet support for all components.
Autocompletion for Glyphicons, Fontawesome and Octicons

To install: apm install atom-bootstrap3

Preview for Atom

As mentioned before, web development these days involves a lot more than editing HTML, CSS and JavaScript files. It's normal today to use pre-processors such as Less and Sass to generate style sheets, or to code in languages like TypeScript, or CoffeeScript and its derivatives, that would later compile into JavaScript code. The downside with using all these tools is that it makes visualizing and debugging the actual end code a lot trickier. Even highlighting plain JavaScript code will help little if you're making intensive use of frameworks or libraries such as Facebook's React.

Preview for Atom is a very extensive package that comes to deal with these scenarios by allowing you to preview source code in compiled form (that is, the actual end code).

It supports the following languages, frameworks and libraries:

CoffeeScript
Literate CoffeeScript
Less
Jade
DogeScript
TypeScript
Stylus
DSON
React (JSX)
EmberScript
ng-classify
LiveScript

It also plans to support Sass, Markdown, Haml, ClojureScript and Dart in the near future.

Among its features:

Preview source code in compiled form in separate tab
Live updating of preview
Shows loading and error messages
Updates on tab change
Highlights using active Atom theme
Users can manually change the default preview renderer
SpacePen views can live preview

To install: apm install preview

Markdown

Markdown is a lightweight markup language to create rich text using just plain text, and since it's very human-readable it is often used to format README files, and messages in online forums that will be rendered later into HTML.

Markdown Preview

Atom comes with built-in support for editing and visualizing these files, provided by the Markdown Preview package that you don't need to install. Files with the .md extension will automatically be highlight with the Markdown syntax, and to toggle the preview tab on, you can use the default shortcut Ctrl|Cmd+Shift+M.

To install: (bundled, no action)

Markdown Preview Plus

Markdown Preview Plus (MPP) is a community extension to the previous package that comes with some additional features:

Opening a preview. Drop-in replacement for the Ctrl|Cmd+Shift+M shortcut.
LaTeX equation rendering. Extends the syntax of GitHub flavored markdown with equation blocks.
Pandoc support. Richer functionality including support to define custom pandoc arguments, and enable citation replacement.
On-demand synchronization. Synchronize the positions of the Markdown source editor and preview on demand.

To install: apm install markdown-preview-plus

Executing Interpreted and Compiled Code

Script is an extension with a simple name that brings functionality that you'll find more generally on specialized IDEs, and that will save you quality time for testing and debugging. Basically, it allows you to execute code for interpreted languages such as PHP or Python, and even for compiled languages such as C or Java, and to see the results on a different pane within Atom, right next to the code you're editing. Additionally, for most languages, it allows you to execute (or compile, then execute) the file you're editing in full, or just a selection of it (as when you select a piece of text).

It comes with a number of shortcuts to run (with and without a compilation profile, and with options) and kill processes, and to close the view of the output — everything with just a few key strokes. The output can be optionally timed to see how long it took for the script/program to execute.

You can also conveniently pass tags such as {FILE_ACTIVE} or {PROJECT_PATH} that will be replaced at compilation or execution time.

Surprisingly, the installation is as simple as with most Atom packages. You'll just need to make sure the interpreters or compilers you'll need are all available in your PATH environment variable.

The list of supported languages and compilers is very comprehensive: 1C (BSL), Ansible, AutoHotKey, AppleScript, Babel ES6 JS, Bash, Batch, Behat Feature, BuckleScript, C, C#, C# Script, C++, Clojure, CoffeeScript (normal and literate), Crystal, Cucumber (Gherkin), D, Dart, DOT (Graphviz), Elixir, Erlang, F#, F*, Fish, Forth (via GForth), Fortran (via gfortran), Gnuplot, Go, Groovy, Haskell (normal and literate), Hy, IcedCoffeeScript, Inno Setup, ioLanguage, Java, JavaScript, JavaScript for Automation (JXA), Jolie, Julia, Kotlin, LaTeX (via latexmk), LilyPond, Lisp (via SBCL), LiveScript, Lua (normal and WoW), Makefile, MATLAB, MIPS, MongoDB, MoonScript, NCL, newLISP, Nim (and NimScript), NSIS, Objective-C, OCaml, Octave, Oz, Pandoc Markdown, Perl, Perl 6, PHP, PostgreSQL, PowerShell, Processing, Prolog, Python, R, Racket, RANT, Reason, Ren'Py, RSpec, Ruby, Ruby on , Rails, Rust, Sage, Sass/SCSS, Scala, Scheme, Shell Script, Standard ML, Stata, Swift, Tcl, TypeScript, Zsh.

This is what executing code with Script looks like:

To install: apm install script

What to Do Next

Mastering your code editor — whichever it happens to be — is a key aspect of being a proficient programmer, as it will dramatically boost your workflow. So if you haven't already, go and get familiar with the shortcuts, and google the actions you do the most to check if there's a simplification for them. Or, if you're dealing with a hackable editor such as Atom, search packages, or consider writing one yourself if it will save you and other people time in the long run.