Browser live preview



When I work with CSS/HTML spend much time with Chrome Dev Console to change/add/remove css and html attributes.

It would be very useful a feature that splits editor into two windows, one with browser and the other with my files. If change something in the files see the result on browser window.

Display Browser in a tab
Display Websites Inside Atom?
What's the recommended way to show the local site you're working on in Atom?
Local server for Atom
Can Atom be a browser?
Browser-style webpage rendering
As atom is built ontop of Chromium , we really need url browsing support
Web maintenance

Love this idea.

The live preview should have a location bar as well, rather than just render the page you call the browser from. Developing in Jade/HAML, we need it to process before we can preview. The location bar would help with that.


This was one of the first things I looked for when I opened Atom. It seems like the technology is available in Atom, it just needs to be implemented. I’d love to see this!


Yep, this is great. And this is one of the advantage of Atom (which is build right upon a browser)


Oh man, I’d love to see this. I wish I had the time to implement it myself right now.


I’ve been using the butterfly terminal in Chrome:

It’d be really awesome to be able to open a webkit panel in Atom, navigate to localhost:575757 and have this terminal to work with. So far, butterfly works better than the experimental atom-terminal plugin.


I thought this one one of the built-in features of Atom :s I’m a web dev and unless it does live HTML preview I don’t see a reason for me to move away from Sublime Text.


Likewise, this is a feature I really enjoyed about Sublime and am hoping will be implemented in Atom as well!


You can use Grunt and set up live reload


I have to agree with @drifterz28 here, this seems better suited for guard with live reload.


Livereload is good, but it’s a limited vision. With a feature like this we’d conceivably be able to open any web page in a panel, not only the site being worked on.

I’d love to have my web-based terminal in a tab. Or Pivotal Tracker, or some other TODO list, or any other number of webapps. The possibilities are endless.


Yep, add me to the list. I already use LiveReload and Grunt with sublime but having a built in web preview window would enable easier window arrangement.

Web Browser Package

Not just that, with a tight integration you can also inject new code into a website or web app, so you can see changes that you make without having to reload (and therefore without losing all state). Brackets, LightTable and WebStorm do this and it’s quite neat.


There’s a feature equivalent to what you’re talking about in Adobe’s Brackets (Edge Code). But I would really like to see it natively implemented in Atom.


(forgot to mention)

A Chrome Dev console inside Atom could be useful also for javascript debugging. :smile:


You can bring up the Developer Tools (with JavaScript Console) with alt+cmd+i. Or select View > Developer > Toggle Developer Tools.


This would be a neat plugin. But I don’t think this should come as a default/core feature.

Interestingly enough, you can set the window.location, so this doesn’t look too far off!


Here is a package headed in this direction:


While I agree with the need of a tighter feedback loop when it comes to browser testing, I feel sad when I see all this webkit monoculture. What I experience everyday is new websites that are broken in everything but Chrome. Is it really what we want as web developers? Chrome is great, but making it the new IE6 isn’t something I can agree on. And I don’t think the answer is an editor, based on a browser, that offer to build a website without opening another browser once.
I do appreciate to actually being able to hack my editor using the same skills I use everyday when building websites, but I’m not sure that this is the kind of thing we should favor if we want to build a better web.

My 2 cents


I would also really like seeing this as a feature in Atom.