#A.t.o.m. show install#
#A.t.o.m. show code#

Install the package by following the steps described earlier and searching for atom-browser.Īfter installation, open the browser for regular browsing by going to Packages > Atom Browser > Toggle. This makes it very convenient to look up documentation as you work, or to follow a coding tutorial for example. The real standout perk of this package though, is you can use the inline preview window as a regular browser. Unfortunately previews are via a file:// protocol, but it does include live reload. The atom-browser package allows you to easily preview your HTML in a browser window embedded inside Atom, similarly to atom-html-preview. Rather, as you type your preview will be updated on an ongoing basis. When using atom-html-preview, files don’t need to be saved in order for the preview to be updated.

#A.t.o.m. show code#

You’ll then see your work space split, with your code showing in the left pane and your live preview in the right pane. Once installed, open the HTML file you want to preview, then go to Packages > Preview HTML > Enable Preview. To install this package follow the same instructions as we went over for the package above, but search for “atom-html-preview” instead. Rather than opening a preview in your default browser, the atom-html-preview package gives you an inline preview of any HTML page within the Atom editor. If you need to switch from previewing one project to another, first stop the server, then drag and drop the project you want to preview to the top of the sidebar, and restart the server. If you have multiple projects open in the sidebar, whichever is at the top will the be one previewed. If you need to stop the server again go to Packages > atom-live-server > Stop Server. From here go to Packages > atom-live-server > Start Server and a preview of your site will open up in your default browser. To use the package you’ll need to have a project folder added to the Project sidebar. Then search for “atom-live-server” and hit the package’s Install button when you find it.

To install it go to Packages > Settings View > Install Packages / Themes.

It spins up a local preview with an protocol and automatically refreshes when changes to any of the files being used in your project are saved. The atom-live-server package is my personal “go to” when I need a quick and easy way to preview some static code. Note: If you don’t have Atom yet, you can grab it from atom-live-server In this quick tip I’ll show you three of the best Atom packages for quickly and easily setting up live reloading local previews. All you need to do is install your preferred package, activate it, and you’re ready to go. There are multiple ways to setup local previews, but one of the easiest ways is to just operate directly through the Atom code editor, taking advantage of its excellent ecosystem of extension packages. And even better yet, if it allows you to view your site via a protocol, given that sometimes things don’t work quite as expected when viewed over a file:// protocol. What’s even better is if this local preview has a live reload function so you automatically see your changes take effect as you work. When working on a static site your life can be made much easier if you have a simple way to activate a local preview of your design.