Provide live preview of HTML like Adobe Brackets
kevlangdo opened this issue · comments
You should implement a live preview interface with all browsers
@kevlangdo you mean we should write extensions for all browsers so that they reload when editing in VS Code?
@bpasero I think it's like the 'live preview' of the Adobe Brackets, but only works with Chrome.
The function is very interesting, can move directly into the html, css and more in real time.
I wish that this function was in VSCode, regardless of browser or at least the most used, is Microsoft Edge, Mozilla Firefox, Safari, Google Chrome, Opera. And if possible in Internet Explorer.
@bpasero I hope to join the "real time preview" function, that is, I have written a HTML page, you can preview in the browser.
English is not good, this is the translation, I hope you can understand， join this function.
Brackets live preview is awesome!
I hope this feature in vs code soon.
At the very least, I would like vs code to support the feature of highlighting the current context element in preview panel!
Bracket's preview is sometimes broken last days. I think it is because of Chrome updates. So it will be perfect if someone will start to implement this feature to VS Code soon.
Hi @Alcoholv @RaptorCZ @songxuangh @kevlangdo @Tekbr - I am doing a short user research study on this issue. If you have time tomorrow or Tuesday can you sign up? https://calendly.com/waderyan/try-vscode
-- Sorry for the English, I used Google Translator --
@waderyan Thanks for the opportunity !!
I'm not going to sign up (besides my English which is not very good) I'm starting to program / develop now and I do not know much about it.
I would really like to see something like Markdown Preview but for HTML.
An extension 'Live Server'. Please give a try 😄.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
@ritwickdey I gave your extension a try. It doesn't work. Seems to be just plain broken.
Anyway, Microsoft should NOT rely on third-party developers for this feature. It's too important.
I have now tried a number of different plugins/extensions for "live server preview".
I've tried those with 5 star reviews and I've tried those with 2 star reviews.
Not a single one of them comes even close to the elegance and convenience of the live preview feature offered by Adobe Brackets.
Not even close!
The lack of this feature is the single reason why I haven't switched to VS Code.
And for as long as it remains this way, I'll keep using Adobe Brackets.
(although I'd really like to switch to VS Code)
Not only should the live preview of HTML and CSS be one of the primary features of VS Code but VS Code should also have a dedicated button firmly backed in into the interface for enabling the live preview.
There's a reason why Adobe Brackets does it that way.
It's because this is THAT useful!
What about implementing edge in vscode
Jumping on the bandwagon... "copying" brackets' live preview feature for moz firefox dev would be great (may I add "quick edit" is another one to look into?)
There is good extenetion for LIVE preview: https://github.com/ritwickdey/vscode-live-server
Guys, try Brackets and Live preview function to understand. All other suggested extensions here are only "refresh page when saved".
Brackets provides many other features. CSS changes sync, locate selected element from browser in Brackets etc.
This is what I want in Code. Not just another web server with autorefresh.
Brackets has specifically for chrome. VSCODE should be for all browser.
Honestly, I simply need a preview tab that I can point to a URL; I'm using Jekyll for my blog, so all I need it a local browser view pointed at http://localhost:4000 (or similar), and capable of refresh. (or, heck, sends a HEAD request periodically (or perhaps in reaction to file save events) to check for updates. That'd be perfectly fine, too.)
once you've tried the live preview of brackets, unfortunately, the add-ons by vscode are simply bad and/or awkward...
We try to keep VS Code lean and we think the functionality you're asking for is great for a VS Code extension. Maybe you can already find one that suits you in the VS Code Marketplace. Just in case, in a few simple steps you can get started writing your own extension. See also our issue reporting guidelines.
Happy Coding!
-- Sorry for the English, I used Google Translator --
@mjbvz , sorry, but simply remove and re-add the label "* extension-candidate" to the bot to close the question? Really? Being an extension-candidate does not justify closing ... if someone is interested it will be easier to find.
I'm asking you to reopen the issue, or show a justification for closing it other than "Many Open Houses" or "Few Votes."
Unless you closed the question because of this comment (https://code.visualstudio.com/updates/v1_21#_webview-api). Well the idea of this case is to have a live-preview Brackets comparable to the main browsers, as I mentioned in the comment above.
-- Sorry for the English, I used Google Translator --
@mjbvz , @bpasero , @aeschli , @egamma , @waderyan , @chrmarti
Sorry for pinging everyone !! (You have been cited for referencing another question in duplicate, and / or participating in the question)
But can anyone explain better why the issue was closed without being for the reasons quoted in the comment above ?? 🤔
After a while the bot will probably block and you will need to create a new question and start joining votes again.
I guess the "extension candidate" label was added for the scenario of reloading a HTML preview tab whenever there are changes.
@kevlangdo (or anyone) please update the summary so that we understand what you are actually asking for.
@bpasero We don't have any concept of an html preview (the webview is unrelated). That's what this issue was tracking
I understand that people want this feature but it is something that an extension can reasonably implement. And we agreed not track extension requests against the core vscode repo. So I'm closing this issue again
@Tekbr If you want this, please try implementing it. We have channels like gitter for quick questions or to find collaborators, and feel free to post any extension dev questions on Stack overflow
@bpasero , this video sums up well what Brackets do.
https://www.youtube.com/watch?v=Nhvj1NYC3Uc
The idea is to have the same functionality but we can use other browsers:
1- Microsoft Edge / Inprivate Window
2- Mozilla Firefox / Incognito Window
3- Safari / Incognito Window
4- Google Chrome / Incognito Window
5- Opera / Incognito Window
and if possible
6- Internet Explorer / Inprivate Window
You can edit the file without the need to save it .. doing it in real time ... and seeing the modifications. This is very useful.
Again, the fact of being a candidate does not justify closing the case, mainly because it has significant votes, and it is easier if someone has an interest in helping to develop. (as I had said before). Case closed the boot will block the issue after a while.
@mjbvz , you (team) agreed, okay, but how can we suggest development of some feature that you classify as extension?
I did not find .. maybe it's because the language .. If there is one, can you tell me? (maybe you can @bpasero )
I do not find Stack overflow so straightforward to development and feature request for some software. Gitter, I do not see it as the correct place for appeal request, but I may be wrong on both.
I think that what you're requesting is basically what this extension does to be honest (haven't yet tried it)
https://github.com/ritwickdey/vscode-live-server
Ok, granted, it not "live" but delayed by maybe ~1s (based on the GIF on the github page at least, but maybe it can be adjusted as a setting), but I think that is good enough.
Also, in my honest opinion, there are plenty of ways of doing a live preview of your page (livereload and browsersync to mention the first two that came to my mind) and I personally think that this feature (at least, as complex as you're asking it) shouldn't really be in VScode.
What I'd like to have instead, is a much simpler way to open a static index.html page directly in the browser (like webstorm, for instance, has a list of browsers on the right-hand side of the IDE that allows you to open the file as a static page in the browser you want: https://confluence.jetbrains.com/display/PhpStorm/HTML+Editor+in+PhpStorm#HTMLEditorinPhpStorm-OpeninBrowser
@nickimola You never tried Brackets and you have no idea what "live preview" in Brackets mean, right?
-- Sorry for the English, I used Google Translator --
@nickimola You never tried Brackets and you have no idea what "live preview" in Brackets mean, right?
@nickimola , make mine the words of @RaptorCZ .
@nickimola , this feature may even be made an extension (which is no problem), but Github is the official channel for reporting Suggestion, bug. And in this case it is a suggestion.
That is, we are in the right place. Regardless of whether they qualify as an extension candidate or not. And this is a feature that is being requested. But the way @mjbvz closed this question was not well understood. Just because the team agreed that in Github will not be accepted resource suggestion in which they classify as extension. They (in the case @mjbvz and the team) have to show the new posting location for resources that they classify as extension.
A closed question .. how could anyone be interested in developing it? It does not make any sense.
StackOverFlow, place to ask questions and no appeal. (and a channel in which I think it takes - principally because not always put correct tag, it would be better a site / place specific to vscode)
Gitter, for me it's more for a chat.
Besides that not everyone speaks / writes fluent English language. I do not think @mjbvz is taking that into account. In this case Github becomes more comfortable. And we have 100% connected people in VSCode.
I hope @mjbvz reopens the question, be it classified as an extension or not. And a better explanation.
//ping @bpasero
-- Sorry for the English, I used Google Translator --
A week has passed ... can anyone give a better explanation of why the case was closed?
//ping @mjbvz , @bpasero , @aeschli , @egamma , @waderyan , @chrmarti
Sorry for pinging everyone !! (You have been cited for referencing another question in duplicate, and / or participating in the question)
I have reopened the issue.
@egamma Thanks for reopening the case !! 😍 😄 😄
I hope to see this functionality in VSCode! 👍
Hello, I am quite surprised that visual studio does not have this live preview function as in Brackets. I wanted to start using visual studio but I think I will have braces since no extension allows me to have the same advantages.
I hope you can fix it soon.
Still here, still waiting 😄
ritwickdey/vscode-live-server#122
Here live editing is comming to vscode-live-server.
Live editing in Live Server? Isn't it just something like WYSIWYG editor? Is implemented styles selection (select style in LESS/CSS and all applied styles in preview are displayed)? Is bidirectional element selecting present (selecting part of HTML in editor will select result in browser and on the other way selecting element in browser will select element in editor)? etc. I'll try it but I don't think it will be what I'm looking for.
Live preview in Brackets is NOT just "reload feature".
Please, read this: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#live-preview
I see multiple comments above mention that Brackets live editing is only with Chrome. I just want to point out that other browsers can be used by adding the following to brackets.json. This way, I've been using Brackets with Safari very successfully. Looking forward to something similar in VSCode.
"livedev.multibrowser": true,
Microsoft people are either lazy or arrogant to not implement such a key feature.
Or is it that they can NOT do it.
No one has been able to duplicate what Adobe Brackets has implemented (and Edge in Dreamweaver).
What about Webview https://code.visualstudio.com/docs/extensions/webview ?
This can definitely be made with Webview API or by creating an extension which creates dev server and loads your HTML/CSS/JS and on changes, it will do live reload for HTML/JS and hot reload for CSS. It's even possible to make hot reload for HTML/JS, but it will require more effort.
I don't think this should go into VS Code core.
From my point of view, I don't see the point to create such a feature since you can use parcel-bundler and get all benefits without any configuration at all.
But maybe I'm wrong, to see how much people want this feature (as an extension). Please vote with 👍. Maybe I will create it if it gets a lot of votes.
Let me look into webview. The key feature I am looking for is the ability to switch the file in the browser along with the switch in the editor. 'Move to the Edit point' and other features are not that critical. But autoload PHP changes on save and switch browser with the editor.
'Live Server' extension is updating server side code upon save but is not switching files in the browser.
Either that or Brackets comes out with a good feature/extension for Git where I can switch the file along with the branch I check out.
Glad that this one's still open. I hope Microsoft provides this functionality soon.
You could use extensions like 'Live Server by Ritwick Dey' and 'Save Typing by Michel Betancourt' together, but VSCode still lacks how Brackets provides live preview of HTML elements like when you select an Element, it gets selected in live preview as well and also when you write CSS rules you could view box model properties being applied in real time.
I wish VS Code implemented this too.
opened in September 2016 and still nothing .. This feature is so important for front-end developers ..
I hope to see it too :)
Brackets is like ugly 90 years old stripper, sitting in pees near trash can on street, holding bottle of cheap wine... You don't even want to look at her. But she is yelling to you "hey! young boy, check my pyssy!". You look at her pussy and you see that's the most beautiful pussy on this world...
I've taken a shot at this via my new Browser Preview extension, check it out 👉https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
Looks good, but it has nothing to do with Brackets Live Preview functionality :-)
I've taken a shot at this via my new
Browser Previewextension, check it out point_righthttps://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
Unless you guys look at the functionality provided by Brackets, You will not be able to understand. PERIOD.
This plugin (auchenberg plugin) opens inside the editor window, taking space from the editor.
You need save to see the changes, and the preview reloads the window with each recording.
It does not highlight in the browser where you are in the editor, or vice versa.
In my case, the preview is also shown as a pixilated image.
Download brackets and press the buton to try it, the functionality is included, you do not have more than download and try it. You can!! ¿? :D
I LOVE VSCode. It's very painful for me to switch to Brackets just for the live preview. Although this does not compare with what Brackets live preview does, it does the job for me...for now.
"files.autoSave": "afterDelay"
"files.autoSaveDelay": 250
What I need it's something like this: https://streamable.com/20jse
When I click a tag on HTML, I want to see the respective element highlighted in the browser
+1
An extension 'Live Server'. Please give a try smile.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
This seems to work well, except when you go to submit your PHP form. It does not know how to locate processform.php even though the Actual Server address is provided as 192.168.10.10/php11/
It does not know how to translate 127.0.0.1:5500 to the Actual Server address.
Good news! the Brackets project is alive again, from Bangalore. They will be releasing an update soon and hope to incorporate more PHP related functionality.
What is the status of this request? Many people want it and some are still using Brackets over VS Code just because of this single feature. Will this ever be implemented in VS Code?
https://marketplace.visualstudio.com/items?itemName=daiyy.quick-html-previewer
This extension is closest to the functionality of Brackets with the live preview, but has its errors with the CSS because it does not show the colors of the "backgound" property. It also does not support PHP
https://marketplace.visualstudio.com/items?itemName=daiyy.quick-html-previewer
This extension is closest to the functionality of Brackets with the live preview, but has its errors with the CSS because it does not show the colors of the "backgound" property. It also does not support PHP
I understand that it is the closest thing to what there is currently, but it is not even similar to what bracket does.
In brackets the preview is done in a browser, which also allows having the code in different monitors for example to work more comfortably
when selecting a text, div or some element in the browser (chrome for example) bracket marks the block in the source code in real time.
There is a real interaction between the bracket and the browser preview.
That's why those who design html see in brackets a much more useful tool than vscode for their work and still do not pass to vscode
What is the status of this request? Many people want it and some are still using Brackets over VS Code just because of this single feature. Will this ever be implemented in VS Code?
I guess there is a chance it might slow down the browser. So, they are not interested in it. Sadly.
But it is a good thing. Brackets will be kept alive and improved, hopefully to a point that we can abandon VSCode?!
There is a real interaction between the bracket and the browser preview.
That's why those who design html see in brackets a much more useful tool than vscode for their work and still do not pass to vscode
There is real value to the instant feedback that one receives. Now the browser even scrolls to the point where you are editing the file. Real helpful!
Yeah, I wonder why this feature request is being ignored even after so many people requesting it. It is true that there are extensions like 'Live Server' that can be used, but they just are not what is being requested.
I really hope this is implemented.
What is the status of this request? Many people want it and some are still using Brackets over VS Code just because of this single feature. Will this ever be implemented in VS Code?
I guess there is a chance it might slow down the browser. So, they are not interested in it. Sadly.
But it is a good thing. Brackets will be kept alive and improved, hopefully to a point that we can abandon VSCode?!
I do not consider important the fact that it only reactivates the program a bit more in exchange for a very good and necessary functionality.
It is necessary that Microsoft already implements this menu the next Visual Studio Code update
This extension by Microsoft Edge team is trying to do something similar-
https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools
This extension by Microsoft Edge team is trying to do something similar-
https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools
Yeah, I would love something like this, but for Chrome or Firefox
This extension by Microsoft Edge team is trying to do something similar-
https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtoolsYeah, I would love something like this, but for Chrome or Firefox
That extension for me does not meet my expectations, it is very bad in my opinion. Only integrate the development tools of any browser within VS Code and it is super uncomfortable to use the extension.
It only allows to see the changes that are applied from the development tools and it does not work when writing code in VS Code, very bad in my opinion.
@COD3BREAK3R I am not involved in that project, just found the link. You can find it in Github- https://github.com/Microsoft/vscode-edge-devtools
Also this issue may be similar to your issue- microsoft/vscode-edge-devtools#56
NetBeans 2016 > VS Code 2019
any attempt to implement that ... soon, plz..
it's very important for lot of developers (including me)
WE NEED IT
it's just real time preview of HTML and CSS, without reloading the browser at all
it read the current html code, parse it, check the difference then and add/remove/change elements according to it, the change happen on the browser interactively using js, instead of reloading the ENTIRE page
this is the difference
The solution to this feature has arrived!
It's amazing, please support this developer, he deserves it very much.
This is the extension:
https://marketplace.visualstudio.com/items?itemName=hiepxanh.snap-style
@COD3BREAK3R: Read this again, please:
#12080 (comment)
Can use this extension with Firefox, Safary or Opera? No.
@COD3BREAK3R
brackets doesn't require any extension on the browser
and it show live HTML preview, not just CSS
not to mention the live view of the current element under the cursor and the visual guides of the element's margin and padding
@bpasero I think it's like the 'live preview' of the Adobe Brackets, but only works with Chrome.
The function is very interesting, can move directly into the html, css and more in real time.I wish that this function was in VSCode, regardless of browser or at least the most used, is Microsoft Edge, Mozilla Firefox, Safari, Google Chrome, Opera. And if possible in Internet Explorer.
I would say that Live Preview with Rectangle Highlight Feedback when mouse passes over code (content, div, or any region with code) its the best feature any code editor could have by far! It gets the job done much faster and reliable because you can see the modification instantly almost like in WYSIWYG style (Microsoft Word and many others). This unique feature of Brackets makes learning even easier for starters in Computer Programming. If anyone implement this in VS Code that will be a life changer for me and many others!
Please add this feature, it's the only thing keeping me from switching.
+1 to this!
This request is very important for the community! Please +1!
@ritwickdey your extension is awesome.
just a little slow to launch
+1 This is a must feature today!
+1
+1 to this. Would love to see this feature in VSCode.
Hi everybody! Happy programmer's day!! 🎉
Has this feature already been released?
what's so appealing about bracket's live preview, is that it preview HTML and CSS in realtime without having to save the files
it works just like Vscode markdown live preview work
Realtime preview vs preview on save is nice but not the best feature of Bracket's live preview.
The real game changer feature for me is that when clicking somewhere in the preview, the corresponding code clock is highlighted in Brackets.
The real game changer feature for me is that when clicking somewhere in the preview, the corresponding code clock is highlighted in Brackets.
AND vice versa! PLUS the preview scrolls with the code.
Hi everybody! Happy programmer's day!!
Has this feature already been released?
"They" have categoriclaly said that they will NOT implement it!
Stubborn people I guess.
We have been calling for this feature for 4 years now .. OMG
Does this achieve what you are looking for?
https://docs.microsoft.com/en-us/microsoft-edge/visual-studio-code/elements-for-edge
While that's definitely getting near to what the Brackets feature looks like, it's not quite the same as that (unless I'm misunderstanding) involves tinkering around with the dev tools rather than just the editor itself, like in this preview video of the feature here.
While that's definitely getting near to what the Brackets feature looks like, it's not quite the same as that (unless I'm misunderstanding) involves tinkering around with the dev tools rather than just the editor itself, like in this preview video of the feature here.
They have improved the live preview even further after this video was recorded. Now the live preview does not break when you open your dev tools; at least in Firefox.
Brackets' Live Preview is just unparalleled. Period.
Microsoft, please. You can not ask for help from the creators of brackets to make a copy of the functionality for your code editor? It is that perhaps only they know how to make a dinamic live preview? No one knows how to implement it?
what's so appealing about bracket's live preview, is that it preview HTML and CSS in realtime without having to save the files
it works just like Vscode markdown live preview work
That's is not the main topic or why, or the reason this issue remains open at this moment. I think was for the border higlighting real time brackets feature either you are modifying some css rule or html elemet. If anyone of you guys have seeing this feature in VSC, pls let me know.
Any updates guys it's been 4 years now :(
I'd like to see a real time live preview feature make it's way into VSCode too, especially with the news that Brackets has been EOL'd and they're recommending that its users turn to VSCode.
Although they have a bundle of plugins that try to replicate Brackets' features, the live server feature isn't quite the same. It doesn't update in real time and just refreshes the browser on save.
My big problem with the live server is that is hasn't had a patch since 2019 and may no longer be maintained, which is a big no-no security-wise IMO.
+1 can't live without it.
I too would love this and I'm said brackets is going away.
While It'd be great if it had all the instant update features and supported all the browsers, the main thing that plugins and my FE dev framework doesn't currently duplicate is syncing edit location.
ie. Clicking on either a line in the editor and seeing that Dom object in the browser highlight or clicking on a Dom object in the browser and seeing that code in the editor highlight.
This is the main life saving feature that I keep going back to brackets for when editing static html.
An extension 'Live Server'. Please give a try 😄.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
This extension is not working as promised.
Even though Live Server extension is great, it's not as good as Bracket's Live Preview.
The main advantage of Bracket's Live Preview is that, in addition to obviously having a live preview of the code, we can click somewhere in the code or in the live preview and have a synced highlight/cursor position in the other window.
To be more precise, if I click on a text block in my Chrome browser live preview, the cursor in the code editor will move to the corresponding code block and the tags will be highlighted.
And if I put my cursor in a code block in Brackets code editor, the corresponding content block in the Chrome preview will be highlighted.
That's the real killer feature here and what we'd love to have in vscode :)
Perhaps Brackets' multi browser implementation of Live Preview could be more added to VS Code. Though perhaps this is a feature better suited to be implemented by extension like Live Server...
So - according to Adobe, Brackets is no longer supported and Visual Studio is the replacement. A quick first use finds Visual Studio lacking. Googling "adobe visual studio live preview" to find this thread proves that Visual Studio is nowhere near an adequate replacement for Brackets. I don't understand why Adobe spent time developing Brackets over the past several years only to omit its best features from its successor.
It seems using an outdated Brackets will be better than using Visual Studio, so there is no point to "upgrading". I'll hold on to my Brackets and keep using it as long as I can.
To be clear: no live preview means Visual Studio is useless as a code editor.
So - according to Adobe, Brackets is no longer supported and Visual Studio is the replacement. A quick first use finds Visual Studio lacking. Googling "adobe visual studio live preview" to find this thread proves that Visual Studio is nowhere near an adequate replacement for Brackets. I don't understand why Adobe spent time developing Brackets over the past several years only to omit its best features from its successor.
It seems using an outdated Brackets will be better than using Visual Studio, so there is no point to "upgrading". I'll hold on to my Brackets and keep using it as long as I can.
To be clear: no live preview means Visual Studio is useless as a code editor.
Adobe still has Brackets alive, in it's 'Dreamweaver', with the name of 'Edge'. Brackets was just an experimentation platform to perfect the features for Edge in Dreamweaver, imo.
the brackets Live Preview was the best because of those reasons:
- you click on the file you edit and automatically preview loads it with the preview without any other action...
- php development doesn't needs any extensions shenanigans, nor multiple extensions preinstalled in order to work a simple server fully featured.
while Microsoft promotes their vscode ide that you can program everything on it... at least have the dignity not to pressure other products to obscurity like adobe's brackets.
- you could create one stack "live server" for web development that everything is working php,html,css,js etc.. I dont understand the need for more than one extensions in order to preview the web page.