Announce - Live Browser Preview - With Preview-Plus


#1

The Latest version of preview-plus comes with the option to show live preview of html code with live updation for assets(css/js/images) - can be set using preview-plus:base (directory to be watched). it is best to watch the just the assets and html file can be updated using live button on the status bar.
Also it has F12 for the developer tool.

Enjoy


#2

Is there a reason that Atom does not have an easier way to preview? As someone who is learning on their own, this road-block of not being able to access the preview is very frustrating.


#3

Easier than what? There are a wide variety of previewing packages for everything from HTML to template languages to CoffeeScript to snippets of Python. If you give some more information about what language you’re working with and what you’re trying to accomplish, we can easily help you find a package that fits your needs.


#4

I am not a programmer. I am learning HTML, CSS, and JavaScript/jQuery. I need to be able to instal something that will allow me to easily see my work in a web-browser. Everything I have seen so far requires you to know how to program or access the command line, in order to instal. It seems like it should be a straight-forward feature. I don’t understand why it’s not automatically included in the original application. The ideal package for me would have some sort of automatic preview, similar to code-pen. If that does not exist, the second preference would be to be able to click on html files and open them in new tabs in a browser (in other words, be able to have multiple preview tabs open at one time, instead of one preview tab that is replaced when you preview another file ). Any help with this would be great!


#5

I have atom-html-preview, and it does live preview. However, that’s not a web browser. For inspection, and making sure that your code works well, there’s really no replacement for viewing in a browser (which open-in-browser supports). CodePen does most of what you’d want for a replacement, but your final quality check should use the browser. For learning, tools like CodePen and atom-html-preview are fantastic.

Atom is not designed to support any specific language. The only language-specific things it ships with are highlighting and some snippets, none of which has much overhead or takes much extra work. The setup of this program is to enable parts of the community with expertise in specific languages to support those languages. It will support anything you want to do, but the other side of that coin is the fact that Atom will not hold your hand through anything, either. For comparison, look at CodePen. It does three things: HTML, CSS, and JavaScript. It does those three things extremely well because those are where it focuses. So you have a choice of tools. You can pick editors that give you lots of support, or you can pick editors that let you make them anything you want them to be. I love Atom because it’s customizable, and I also use CodePen when I need to test a new implementation of JavaScript or want to share it with other people.

Everything I have seen so far requires you to know how to program or access the command line

As someone using JavaScript, you are learning how to program. It is quite useful to know how to access the command line, as well (if you tell me your operating system, I can give you precise directions as well as recommendations about how to improve your CLI working environment).


#6

Hi DamnedScholar,
My statement was rhetorical. What I’m saying is: I think Atom should have a preview option as a default feature. It’s a pretty basic aspect of a code editor. I understand that you think I should be able to use the command line; however, I have my own learning path and goals. Code pen is great, however, using someone else’s server is not completely private.


#7

Also, thank you for the info about HTML preview; however, I do not have 5 hours to learn the command-line. I’ve watched several tutorials and still do not know how to install this plug-in. Plus, I am not experienced enough to want to tinker around under the hood of my computer. Which leads back to my original point: this basic feature should be easier to access for all users. This is not “holding someone’s hand” as you put it. This is having basic accessibility.


#8

For an editor focused on supporting HTML and CSS, like Brackets. Compiling code is a pretty basic aspect of a code editor focused on C++, and Atom doesn’t do any of that without a package, either.

I understand that you think I should be able to use the command line; however, I have my own learning path and goals.

Which don’t involve git or NPM, apparently. I have a great recommendation for a program that creates a web server and automatically refreshes tabs in your browser when things change, but that also requires the command line.

The easy way is to go to Settings -> Install, search for the package, and press the button that says Install. The faster way is to go to the command line and type apm install atom-html-preview, which you can do in about thirty seconds whether you know anything about it or not. If you want to go through the GUI, you have to wait for the package search to happen.

Plus, I am not experienced enough to want to tinker around under the hood of my computer.

I don’t know what other people have told you about the command line, but it’s not all about going under the hood. Sure, you can, but no secure operating system is going to let you touch anything important unless you say it in your admin voice. Nothing I would encourage you to do would involve touching anything sensitive. In the case of commands like apm, you’re sending an instruction to a program that knows everything it needs to do.

Which leads back to my original point: this basic feature should be easier to access for all users. This is not “holding someone’s hand” as you put it. This is having basic accessibility.

Maybe, if Atom were primarily focused on coding web sites. It’s not, and the developers have chosen to ship it with a relatively small feature set out of the box, because the target market for Atom is people who want an editor that they have complete control over.


#10

@maiya

I’d recommend you take a look at bracket, free and similar to atom in a lot of way, but specialized for html/css/js instead of general purpose code. It does have built in browser preview. (and Reverse inspect , clicking on a visual element show the code)

It’s more important to find tools that work for you now than trying to force a specific tool fit your need.


About the command line, I think it’s more popular in mac than windows, and a lot of web development happens on mac. So it’s likely that at one point in the future you find a command line tool that may be useful to you.

For tool builders command line a way to focus on tool logic instead of graphical display.
For user, command line is an alternative way to launch programs.

A lot of computer administration tool are written in command line, but it does not mean command line is about tinkering under the hood of your computer. It’s just the right media to write focused tools.


#12

I’m on a mac. The frustration was coming from the fact that the HTML preview and Preview Plus are deprecated, so even though I was installing it correctly, it was not working. I’ve tried Brackets. I don’t like it.

I’m not trying to “force” Atom to be something. I’m looking for a functionality that is pretty basic and straight-forward.

Does anyone know if there is a replacement for HTML preview or a way to get it to work?

Thanks!


#13

Yeah, community based plugin repository may have some problem of abandon-ware or many near duplicate plugins, and authors that does update on limited spare time.

Does anyone know if there is a replacement for HTML preview or a way to get it to work?

Personally I’d try something that can work outside atom. Then it’s less likely that a new atom version break something.

live-server seems popular.

Additionally an atom integration is available


#14

Thank you jeancroy!