I have updated the README to address similar comments and issues.
<a href="https:&#x2F;&#x2F;github.com&#x2F;urin&#x2F;vscode-web-visual-editor?tab=readme-ov-file#alternatives">https:&#x2F;&#x2F;github.com&#x2F;urin&#x2F;vscode-web-visual-editor?tab=readme-...</a>

Pinegrow[1] is somewhat similar to MS Frontpage IIRC. I highly recommend it.[1] <a href="https:&#x2F;&#x2F;pinegrow.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;pinegrow.com&#x2F;</a>

I thought of MS Frontpage for a very brief moment as I was clicking the link to Live Preview.

I think it&#x27;s mainly the `No additional processes` point. Live Preview serves the page, likely by spawning another process to host the server.

Do you have a link? Curious to know what the concerns were.

Because of the debacle around VSCode extensions owned by Microsoft that recently surfaced here on HN, it&#x27;s good to have an alternative.

Nice extension, it may be worth in the readme explaining how it’s different to <a href="https:&#x2F;&#x2F;github.com&#x2F;microsoft&#x2F;vscode-livepreview">https:&#x2F;&#x2F;github.com&#x2F;microsoft&#x2F;vscode-livepreview</a> which has been around for a long time and maintained by Microsoft.

I like to use standalone tools with no dependencies, so I made this open source html editor with instant preview as a single html page:<a href="https:&#x2F;&#x2F;github.com&#x2F;no-gravity&#x2F;html_editor">https:&#x2F;&#x2F;github.com&#x2F;no-gravity&#x2F;html_editor</a>It has a few convenience functions already. Open for pull requests.

Oh I think it is very much &quot;just fine&quot;, but people have requirements which make things too complicated. I find it way harder to work in a React app than a few .html and .js files. TypeScript&#x27;s cool though.

The reason being CV driven development in most cases.For the large part of projects I work on, plain old server side rendering with sprinkles of vanila.js work just fine.At least folks now rediscovered SSG, but they seem to build rewriting bundlers in Rust as well.

What do you consider &quot;not fine&quot; about websites written in &quot;just&quot; html, CSS, and js?

it absolutely was fine. it was easy and many children were able to do it with minimal experience. the reason frameworks were invented was because the web devs at big tech companies decided to use dumb and sluggish hacks to simulate features that websites never did and still don&#x27;t need.

This. A not so great analogy is you can always drop a single php file into your &#x2F;var&#x2F;www&#x2F; (or even do cgi) and get your &quot;dynamic&quot; website running like decades ago, but people don&#x27;t do that any more for any website that is not a tiny one with just a few pages (barring famous exceptions like WordPress). People realize there are good reasons to use frameworks, and often, use other languages for website backend.

&gt;We abandoned HTML CSS and JS websites that used to work just fineHmm. Have you actually done much web development in the last 10 years?Building websites with raw HTML, CSS and JS 10 years ago was very much not &quot;just fine&quot;. There&#x27;s a reason frameworks were invented.

Most &quot;applications&quot; I visit in my browser have no business being an application. The &quot;clear search history&quot; button in my start menu has no business loading a React environment with three redirects either.Some web applications need a boatload of frontend stuff to make them usable, but I rarely encounter websites that warrant such overkill. A payslip&#x2F;email subscription&#x2F;car rental website with a profile page and maybe three forms I can possibly need to submit doesn&#x27;t need to be a fully interactive application with loading bars and offline support, leave that stuff for the websites I visit more than once a month.At this point React&#x2F;Vue&#x2F;Svelte devs are probably cheaper to hire than basic JS devs, but technology wise the amount of Javascript my browser needs to load for the most basic interactions is mind-boggling. More than the &quot;this meeting could&#x27;ve been an email&quot; meetings, I run into &quot;this web application could&#x27;ve been a POST request&quot; web pages.

Let&#x27;s be honest. Those old HTML+CSS+JS didn&#x27;t have the interaction levels of modern applications. And jQuery was great until you reached a level of complexity after which it became jquery Bolognese. There are 2 main challenges: state and reusing pieces of html. Both of these are much harder in modern applications due to their complexity. Try reusing a piece of HTML using HTML+CSS+JS alone (no Node or back-end tools allowed). Try keeping state synced across a modern application without using state management libraries.

I&#x27;ve taken the next step and written my own tool that lets me put all my Tailwind attributes in a separate file grouped by element selectors. :-)

Tailwind is reviving the style attribute.

I don’t think it was meant to criticize your work :)It’s just fun to see that we (here : you) are reinventing tools that everyone used 20 or 30 years ago.I remember making my first websites in Dreamweaver. I remember it being hated by &quot;pro&quot; developers but this plus an FTP client (which was integrated IIRC) was enough for teenager me to be live on the internet.

There are complex reasons behind my development of this. To be honest, I don’t think the editing functionality of this tool is particularly useful. I believe the real-time preview and element selection features are the ones that offer broader utility. I am considering making the editing feature disabled by default and allowing it to be enabled through settings in the future.

Nah, I went from jquery to Backbone, Angular, and React. I don&#x27;t miss jquery, and I like the functional&#x2F;declarative APIs of JSX. It&#x27;s a lot like just writing HTML, and CSS, and I still write plenty of JS as pure functions or plain objects, and they&#x27;re lovely to test.I don&#x27;t really see the purpose of the OP when I have vite and subsecond rerenders.

I&#x27;m not really a frontend dev, but React (w&#x2F; JSX, and w&#x2F;o Redux or whatever) is the only web thing I&#x27;ve ever used that made sense. Everything else like CSS, Angular, and jquery made me go &quot;wtf.&quot;

I love this discussion -- it provides interesting perspective on the history, especially for me as a person who is learning web development.

No one&#x27;s doing this, or at least not in the way you&#x27;re implying.

And what is more crazy, acting as if they are something new, instead of something that is 20 years old.

Are we trying to reinvent web development? Last few years have been wild. We abandoned HTML CSS and JS websites that used to work just fine and ran after frontend component frameworks and now the circle is getting completed by building tools and extensions we had 20 yrs ago

The terminal is iTerm2, but the basic Mac terminal or common Linux ones can do opacity too. Didn&#x27;t go out of my way to set up auto-reload, so idk how to do it in general, but the default create-react-app dev setup does it.

I like putting an auto-reloading browser window behind a 60% opacity Vim window.

This is great, A tighter feedback loop is always better for everyone.I&#x27;m also getting some serious Déjà vu for the web tools of the 2000&#x27;s. History really does rhyme

Hah yeah, I was picturing Dreamweaver before I clicked the link

I was expecting something more like WYSIWYG editor, that actually edits HTML visually in real-time. Something akin to old times of first webpage editors.

reminds me of good old Macromedia DreamWeaver times :)

&gt; how do you calculate hypotenuse, because it&#x27;s been a long time since Pythagoras made the last commit.Also, Pythagoras should be rewritten in Rust for safety.

Today I value web stuff for one thing and one thing only: they run in the best sandbox we have. I can run untrusted programs from hackernews folks without worrying! I wouldn&#x27;t do that with native code of course, way too easy to hack me. But they won&#x27;t waste a browser 0-day on random HN readers... Whatever can be done in the web, I usually like to do it there as no-body has to trust my code then.

&gt; Being in the industry for 20+ years and starting as a teenager making games in Flash it makes really hard for me to treat webdev seriously with all their revolutionary innovations.I think the framing here is unfair.It&#x27;s not that the people innovating in JS or HTML think what they&#x27;re doing is &quot;revolutionary&quot; or has never been done before. Generally they are applying ideas that have been developed elsewhere, but are currently lacking in whatever their specific area is.

I&#x27;m glad to have mostly avoided frontend dev, but we&#x27;ve also had some bonkers backend trends like SOAP. It was like closing your eyes and wishing for a full-stack impl to appear if you write enough XML.

Unless you are ready to maintain the product for the long term, proposing to use new tech is just resume development.

JavaScript 4, had it not been sabotaged.

&gt; how do you calculate hypotenuse, because it&#x27;s been a long time since Pythagoras made the last commit.Asinine - everything advances and needs maintenance over time, even geometry. I invite you to try building a game without using quaternions or projective (ie non-euclidean) geometry.Edit: does hn award points based on contrariness? Or is it just that people on hn think they&#x27;re super clever with their contrary point?

Wait till you hear about Typescript, you know adding types to ECMAScript, like Macromedia did some 20 years ago. :)Being in the industry for 20+ years and starting as a teenager making games in Flash it makes really hard for me to treat webdev seriously with all their revolutionary innovations.At work I often encounter a resistance to a tech or solution I propose, because &quot;there hasen&#x27;t been any substational contribution to the repository in a week, seems dead to me&quot;. To which I kindly respond with a question - how do you calculate hypotenuse, because it&#x27;s been a long time since Pythagoras made the last commit.
Meanwhile, some of my friends are still doing side jobs using CakePHP, 20 years later. :)

Came in to post something similar. Dreamweaver was where my pro web life began. I want the WYSIWYG idea to work, but with the complexity of responsive design with modern css, I don’t see the model working well, at least in my workflow.

I was so excited when I first discovered Dreamweaver and was gonna make so many great websites. ironically my Engineering degree program had other thoughts

Well, Visual Studio 6.0&#x27;s Visual Interdev (1998) had actual browser rendering (via the Trident engine used in Internet Explorer I assume), including Java applets, which would run in the &quot;Quick view&quot; mode, but also amazingly in the Source [code] mode!

Yes, but Dreamweaver had the render broken since about 2001 (I don&#x27;t know the actual date, mine is a joke).Vs code being chromium means actual browser rendering

thats exactly what I thought, I&#x27;m old enough to even remember Netscape Composer. I was 10 y&#x2F;o when used it lol

I do! Wow, what a flashback. I think it was formed from Mozilla&#x27;s built in editor, and later on died quite quickly and was forked under a different name, which, in turn, died quickly.

When I was young, I learned HTML with Nvu, if anyone else remembers that.

We still use Dreamweaver just because you can drop well structured Word documents in and get a decent HTML document out of it. Still not found a better process really.

Ah yes! And HotDog html editor from “sausage software”.

we&#x27;ve come full circle - macromedia dreamweaver had this in 2001

There are so many websites downloading entire web frameworks, tens of megabytes, to display static web pages. Maybe a contact form, or a twitter embed or something. I absolutely loathe it and if these sorts of tools even slightly move the needle towards bringing back standard HTML sites, I&#x27;m so incredibly for them.The web is so flat and dull now.

It seems there have been many opinions questioning why a tool for editing pure HTML is being developed now. Here is my current view on this matter:These days, it&#x27;s rare to directly handle HTML files on the frontend of web applications, and placing key elements using absolute or relative coordinates is also uncommon, so the use cases for this extension are currently quite limited.However, it could be somewhat useful in areas where web technologies are not yet widely adopted but need to be implemented simply. When creating individual components, such as with Vue.js, the real-time preview might become valuable. It could also be helpful for building non-application content like simple landing pages.

You know that every respectable editor nowadays has a auto-save feature on focus loss? So just alt+tab from your editor to your browser and refresh.

You don&#x27;t need to save.And it has nice features like highlights selection

Is this a significant improvement from having a &quot;live preview&quot; on a browser?

Well, life takes us other places sometimes.Still, it&#x27;s pretty cool that your kids are using previewjs.com!No, don&#x27;t bother - I&#x27;ll see myself out :)

You may want to check out previewjs.com (disclaimer I&#x27;m the author) although it&#x27;s unfortunately not getting much love or attention lately, my kids are using all of that.

This tool only handles files that can be treated as static HTML. Therefore, it cannot currently be applied to React implemented with JSX. However, it may be applicable to Vue component files.

Nice. Will this work with React as well?

There&#x27;s a name I haven&#x27;t heard in many years

Would be much more valuable if you can live-preview Sass. It is easy to guess the impact of HTML edits I am making, but guessing impact of style edits is much harder and so live preview would be more valuable.

This is useful. I am occasionally day dreaming about moving my static site from Hugo to pure html which I write&#x2F;edit myself.Do these features depend on complexity of the html or that doesn&#x27;t matter? Does Javascript work in live preview?

A notable feature is the ability to synchronize code selection with visual selection in the preview. Since this extension has minimal functionality, the codebase is very small, making future expansions easy. It is designed to reflect changes made in the preview back to the code, so enhancing the editing capabilities within the preview may be beneficial in the future.

Thanks for sharing but I don&#x27;t find big differences with the currently existing &quot;live preview&quot; and other plug-ins. Can you explain what are the features of your Web Visual Editor? Thanks

I like it. It saves me a Ctrl+s and some setup for a hot deployment.

There’s something sad about how basic this is compared to say FrontPage (so shoot me) which was oh ~25 years ago.

The title was a little confusing for me. Don&#x27;t you edit HTML visually in real-time all the time?

Is there a way you can edit HTML directly in browser devtools and have it update in your code repo?

I&#x27;d think maybe in you could do inline JavaScript. Or inline CSS. Or JavaScript urls in the links. Gosh, there are so many possibilities, makes me feel good about the architectural decisions that led to this point.

Since it does not handle JavaScript at the moment, I believe the applicable scope is quite limited.

Does it handle js? I can&#x27;t tell if this is only for static files from the documentation.

Definitely not mocking!Just letting OP know, perhaps it&#x27;ll help to communicate better with the German usership in the future...

Nicer not to mock someone&#x27;s name just because it happens to mean something in a completely different language =P

Very unfortunate naming if you understand some German...

You missed the opportunity to name it Vscode-FrontPage.
We Are So Back.

Ah yes, bracket editor by adobe is back

The html it spit out was horrendous, but it was a good gateway to web development.

Well now I have to try it. I used Frontpage for all of my web sites as a kid and I miss it a lot.

This reminds me of Microsoft FrontPage more than 20 years ago.

Show HN: A VSCode Extension to edit HTML visually in real-time