Dreamweaver Style Preview in Atom?


Let me start out by saying I am new to Atom, but I love it so far. However, there is one thing that I would absolutely love to see implemented, if it hasn’t been already.

So my mom asked me to do some rearranging and updating on her business website, as she doesn’t know how, and she has lost contact with the guy she hired to build it. It seems the guy used Dreamweaver to make it, because all the heaps of code are crammed together in highly illegible unspaced lines, and it is an absolute nightmare trying to find every little random div in a div in a div just to add a picture or a paragraph to a page. It’s doable, but a lazy person such as myself need not be subjected to such foolishness.

Now, I seem to recall years ago, back when I “acquired” Dreamweaver, there was a live preview function that allowed you to click directly on elements in the preview and drag them around or edit them in the code window (similar to Firefox’s “Pick an element from the page” in the inspector). I used this on the very same website and others like it, and while it was a little sloppy, it made it super easy to arrange things or find the right line of code. But as I no longer like to “acquire” software like I used to, I would love to see this feature in a free open source program like Atom. I’ve checked out Preview Plus, and the included Markdown Preview, but neither allow for preview editing, nor do they even render the page properly, which is most disappointing (maybe I’m doing it wrong?).

Anyway, I guess to summarize, my question is this:

Is there a package for Atom that allows you to display a rendered page preview, and click on elements in the preview to edit or arrange them?

Thanks for helping a game developer / wannabe web developer through such fumblings :slight_smile:


I don’t think it matters, but I’ll mention that I am using Lubuntu Linux.


I might be out of topic here, but if your main problem is the messy code, you can give atom-beautify a try. It will rearrange your code according to the code grammar.


That atom-beautify seems like it could help quite a bit, and I will definitely give it a try. However, there’s got to be something out there that allows visual editing of html/css styling, especially considering Dreamweaver, Firefox, and even most word document editors seem to have have exactly that. Maybe I’m asking a lot, but it sure would be nice.


Adobe bracket. The bidirectional preview (instant preview of code in browser, click browser to target code fragment) is probably the most recognizable feature of this free & open source software.

There’s been many discussion about bringing this to atom and current state is “not quite there”.
In some way it’s understandable than an editor that specialize in web get some thing better for that than a general purpose one.


Brackets is probably your best bet. Now, it’s also worth examining exactly what you’re needing to do and how much each tool can help you. WYSIWYG editors are notoriously sloppy, even the sane ones. Document processor style input does not necessarily lend itself well to the tidy trees of information that HTML uses (how often have you dragged to select some text, italicized it, and then realized that you missed a few characters?) so a program has to be very smart to not bloat up the page tremendously. It has to be even smarter to know how humans like to read code, and it doesn’t care about keeping design and structure separate unless someone teaches it how to do that.

What do Firebug and its clones do? They let you edit the code, they give you live previews, but they don’t save anything. They leave the writing of the code to the human and they serve as useful guides in figuring out what code needs to be written. Atom uses Webkit, so it has the same inspector that Chrome does. You can enable this by opening a window in developer mode (View -> Developer -> Open In Dev Mode…) and then right-clicking anywhere in the editor. Combined with a package to preview your HTML, you can make live edits just like you do in Firefox.

Use preview and live editing features as tools, but don’t come to rely on them too much. You should still touch every part of your code, even if you use a program to figure out what dimensions you want on your header.


Atom uses Chromium, so technically it uses Blink, not Webkit. They’re still pretty similar for now, but diverging more and more.


Good to know.


Hi Joel

You could use a plugin in your browser. This is not dependant on what you use to code with.

In Firefox there is one called Auto Reload, which reloads your web page when any file in the same folder is saved. Don’t know about other browsers, but wouldn’t be surprised if there were similar plugins available.

The advantage is that you’ll see how your code behaves in an actual browser, as opposed to a preview inside an application.


Very good info here. I didn’t realize Adobe made products for Linux. I think I’ll give Brackets a try, and maybe save Atom for my more from-scratch projects.

Don’t get me wrong, I’m very strict about organizing my code down to the last semicolon, but I also like nifty little toys that allow me to quickly mess with other people’s code without having to go all OCD and start counting the line breaks between divs and functions (yes, I have a system for line spacing :wink:).


Hello guys.
I am highly interested in this feature as well.
It would make Atom COMPLETE!
Is there a package started for this or any plan for a project?
I’d very much like to contribute with whatever I can/know.