Provide live preview of HTML like Adobe Brackets

[kevlangdo]

You should implement a live preview interface with all browsers

[bpasero]

@kevlangdo you mean we should write extensions for all browsers so that they reload when editing in VS Code?

[Tekbr]

@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.

[BlueCat-TY]

@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.

[mindryu]

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!

[RaptorCZ]

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.

[waderyan]

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

[Tekbr]

-- 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.

[BlueCat-TY]

@waderyan Sorry, I'm a little busy lately, no more time

[M0ns1gn0r]

I would really like to see something like Markdown Preview but for HTML.

[ritwickdey]

An extension 'Live Server'. Please give a try 😄.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

[WebDevBooster]

@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)

[WebDevBooster]

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!

[sagudev]

What about implementing edge in vscode

[Heitor-Real]

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?)

[sagudev]

There is good extenetion for LIVE preview: https://github.com/ritwickdey/vscode-live-server

[RaptorCZ]

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.

[sagudev]

Brackets has specifically for chrome. VSCODE should be for all browser.

[COD3BREAK3R]

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?

[jlorenzoC]

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.

[Mohanbarman]

Any updates guys it's been 4 years now :(

[deananorth]

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.

[webenadam]

+1 can't live without it.

[daledesilva]

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.

[arachnidus]

An extension 'Live Server'. Please give a try 😄.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

This extension is not working as promised.

[marcfilleul]

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 :)

[TD540]

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...

[paulmz]

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.

[Taariqq]

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.

[qaron84]

the brackets Live Preview was the best because of those reasons:

1. you click on the file you edit and automatically preview loads it with the preview without any other action...
2. 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.

[robsonsobral]

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.

How is Microsoft doing that?!

[qaron84]

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.

How is Microsoft doing that?!

here is your proof... it stinks from all around the points of view.. [under the table deals]
https://www.adobe.com/gr_en/enterprise/microsoft-partnership.html

[yandeu]

I have made a fork of Live Server called Five Server.

It supports instant update while typing. (Just like brackets does)

---

I have never used brackets before, but it seems the blue border highlight feature, shown in the video, is nice.
I will try to implement it as well.

like in this preview video of the feature here.

---

I'm happy to improve this plugin in the future.
If you have a question: yandeu/five-server#1

---

EDIT:
I have just added the highlight feature:
https://youtu.be/c_dUxzCJpu4

ANOTHER EDIT:
Check out the new "Hot Body Injection" feature 😍
https://youtu.be/3-zKYNrxKOk

ANOTHER EDIT:
Instant Update & Highlight for PHP will be available soon.
See https://youtu.be/4s7q5chX-e0

[JPMulder]

the brackets Live Preview was the best because of those reasons:

1. you click on the file you edit and automatically preview loads it with the preview without any other action...
2. 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.

I can add that all my php code requires login, therefore live server plugins are useless.
The beauty of Live code like Dreamvewer is that you can split view your code and click on the elements in the deisgn view and your code jumps to that position, usefull for PHP pages which are 5000 line of code and html.
This is the only feature that prevent me from really going for VSCode

[aeschli]

This is to be provided by an extension. There are already several out there, now also https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
Please support the extensions by reporting issues for missing features and bugs against their issue trackers.

[arachnidus]

Sad that you are referring yo vscode.live-server and not looking to the difference in functionality. vscode.live-server is missing the realtime changes of brackets and the option of displaying the website in a separate independent browser window. vscode.live-server is nice and the best for people not knowing that bracket do have a better solution. Last release of the under development plugin is June 2021

[Taariqq]

Sad that you are referring yo vscode.live-server and not looking to the difference in functionality. vscode.live-server is missing the realtime changes of brackit and the option of displaying the website in a separate independent browser window. vscode.live-server is nice and the best for people not knowing the bracket do have a better solution

Just keep one thing in mind. You are talking to an arrogant bunch. Period.