Preview pane for CSS3/FlexBox grid layouts?


I started using ATOM a couple of days ago, after viewing someone editing a webpage (styles) with mainly Flexbox code.

I cannot view the latest result in the preview pane …
Grid lines, grid-gaps, padding/margins, etc. are not shown.

Are there any Packages that would help me ?

Otherwise, I have to view the pages in Mozilla FireFox Developer.
A lot of time wasted.

cheers :confused:


Atom’s dev tools are for inspecting Atom itself. They’re not going to show you the contents of the preview pane separately from the rest of Atom’s DOM.


Maybe you should have asked for clarification.

I am trying to follw a training course where the course lessons are held on GitHub.
The lecturer recommends Atom, a lot of people are using it to create their own web pages.
It is extremely frustrating not being able to use it the same way the lecturer is demonstrating in his videos.


If the instructor isn’t providing sufficient information for you to replicate his package configuration, then I might be able to help you figure out what he’s using.


Thanks for the offer …
PeterSommerhoff is the instructor on Udemy. He has 2 Flexbox courses there.
He is clearly using Atom and the Preview seems to change as he codes.
Preview shows everything (grid, boxes, grid-gaps, margins, padding, borders, content) clearly.
So a lot of time is saved, compared to jumping back and forward… Atom <> FireFox Developer


Screenshot? Link?


Screenshot of what ?


Here’s an example of a course lesson on YouTube …


Just had a response from PeterSommerhoff … says it’s to do with FireFox, not Atom. …

"… It’s a Firefox plugin, I have “Auto Reload” and “css-live-reloader” installed, but they’re legacy extensions so not sure if you can still install them. In any case, you can try searching for a plugin like “css autoload” or “css reload”. …
Not sure how he gets them to sit so neatly next to each other.


Been playing around with the Mozilla Developer browser.

Found that the Inspector Toolbar can actually be detached from the browser.
So you can set the Grid view, then hide the Toolbar behind the Developer browser.
It’s been working well for me so far.
cheers :smile: :sparkler:


Looking at the video you posted, I can tell immediately that he’s using Atom and a browser side-by-side. Sharing exactly what you see is important because, as the person asking for help, you don’t necessarily know how to recognize all of the visual information that’s available to you. If you had shown me the video in the first post, I could have given you an immediate answer.

Not sure how he gets them to sit so neatly next to each other.

Modern Windows has a pretty decent split-screen feature, where you can press Win and a direction key and the active window will snap to that side. If I want to split-screen Atom and a browser, I can just be in Atom, press Win-left, switch to my browser and press Win-right and presto.