11 ms·
Show HN: A VSCode Extension to edit HTML visually in real-time
- butz 2y agoI was expecting something more like WYSIWYG editor, that actually edits HTML visually in real-time. Something akin to old times of first webpage editors.
- gduplessy 2y agoHah yeah, I was picturing Dreamweaver before I clicked the link
- asdf000333 2y agoI like putting an auto-reloading browser window behind a 60% opacity Vim window.
- romulobribeiro 2y agohow do you set it up?
- asdf000333 2y agoThe terminal is iTerm2, but the basic Mac terminal or common Linux ones can do opacity too. Didn'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.
- deleted 2y ago[deleted]
- jdthedisciple 2y agoVery unfortunate naming if you understand some German...
- TheRealPomax 2y agoNicer not to mock someone's name just because it happens to mean something in a completely different language =P
- jdthedisciple 2y agoDefinitely not mocking! Just letting OP know, perhaps it'll help to communicate better with the German usership in the future...
- divbzero 2y agoIs there a way you can edit HTML directly in browser devtools and have it update in your code repo?
- shsbdncudx 2y agoThere’s something sad about how basic this is compared to say FrontPage (so shoot me) which was oh ~25 years ago.
- allanblair_ 2y agoDoes it handle js? I can't tell if this is only for static files from the documentation.
- urin 2y agoSince it does not handle JavaScript at the moment, I believe the applicable scope is quite limited.
- bryanrasmussen 2y agoI'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.
- dxxvi 2y agoI like it. It saves me a Ctrl+s and some setup for a hot deployment.
- whalesalad 2y agowe've come full circle - macromedia dreamweaver had this in 2001
- boredemployee 2y agothats exactly what I thought, I'm old enough to even remember Netscape Composer. I was 10 y/o when used it lol
- roywashere 2y agoHot Dog from Sausage Software
- Fire-Dragon-DoL 2y agoYes, but Dreamweaver had the render broken since about 2001 (I don't know the actual date, mine is a joke). Vs code being chromium means actual browser rendering
- JBiserkov 2y agoWell, Visual Studio 6.0'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 "Quick view" mode, but also amazingly in the Source [code] mode!
- the_mitsuhiko 2y agoMozilla Composer also existed and is the root of a lot of WSISWYG editors today because of the legacy it and others left in the HTML spec (content editable).
- zeroq 2y agoWait 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 "there hasen't been any substational contribution to the repository in a week, seems dead to me". To which I kindly respond with a question - how do you calculate hypotenuse, because it'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. :)
- jaxomlotus 2y agoNice. Will this work with React as well?
- rezaprima 2y agoOr vue ?
- fwouts 2y agoYou may want to check out previewjs.com (disclaimer I'm the author) although it's unfortunately not getting much love or attention lately, my kids are using all of that.
- MikeTheGreat 2y agoWell, life takes us other places sometimes. Still, it's pretty cool that your kids are using previewjs.com! No, don't bother - I'll see myself out :)
- urin 2y agoThis 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.
- apiep 2y agoAh yes, bracket editor by adobe is back
- init 2y agoThis reminds me of Microsoft FrontPage more than 20 years ago.
- vivzkestrel 2y agoAre 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
- asdf000333 2y agoI'm not really a frontend dev, but React (w/ JSX, and w/o Redux or whatever) is the only web thing I've ever used that made sense. Everything else like CSS, Angular, and jquery made me go "wtf."
- bethemoly 2y agoI love this discussion -- it provides interesting perspective on the history, especially for me as a person who is learning web development.
- urin 2y agoThere 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.
- kak3a 2y agoBring FrontPage back! ;)
- pjerem 2y agoI 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 "pro" developers but this plus an FTP client (which was integrated IIRC) was enough for teenager me to be live on the internet.
- profsummergig 2y agoIs this a significant improvement from having a "live preview" on a browser?
- jenadine 2y agoYou don't need to save. And it has nice features like highlights selection
- braggerxyz 2y agoYou 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.
- deleted 2y ago[deleted]
- 8mobile 2y agoThanks for sharing but I don't find big differences with the currently existing "live preview" and other plug-ins. Can you explain what are the features of your Web Visual Editor? Thanks
- urin 2y agoA 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.
- smusamashah 2y agoThis is useful. I am occasionally day dreaming about moving my static site from Hugo to pure html which I write/edit myself. Do these features depend on complexity of the html or that doesn't matter? Does Javascript work in live preview?
- urin 2y agoIt doesn't matter if it's complex. I believe this tool can be applied if it consists of a single HTML file and the resources linked to it. If you're using Web Components, there may be some issues. JavaScript is currently disabled because it's difficult to determine its impact, but enabling it is technically very simple. If there is enough demand in the future, I will add an option to control the functionality of JavaScript.
- netdevnet 2y agoWhy do you fantasise about writing pure html manually for an entire website? Haven't you done it before?
- smusamashah 2y agoBecause I don't understand the template language used by Hugo. The syntax is weird, using features is complicated. Everytime i thinking of changing something in my site, it feels like PTSD thinking about touching that code. If it was just html, I could modify it easily. But doing big structural changes in many html files is as painful. Visual tools, like this one should help with that.
- mg 2y agoI like to use standalone tools with no dependencies, so I made this open source html editor with instant preview as a single html page: https://github.com/no-gravity/html_editor https://github.com/no-gravity/html_editor It has a few convenience functions already. Open for pull requests.
- luismedel 2y agoNice to see you again, HotDog.
- oliyoung 2y agoThere's a name I haven't heard in many years
- shipitnow 2y ago[dead]
- jayflux 2y agoNice extension, it may be worth in the readme explaining how it’s different to https://github.com/microsoft/vscode-livepreview https://github.com/microsoft/vscode-livepreview which has been around for a long time and maintained by Microsoft.
- anoncow 2y agoI thought of MS Frontpage for a very brief moment as I was clicking the link to Live Preview.
- noworriesnate 2y agoPinegrow[1] is somewhat similar to MS Frontpage IIRC. I highly recommend it. [1] https://pinegrow.com/ https://pinegrow.com/
- vladsanchez 2y agoNever heard of it, reminds me of DreamWeaver, instant favorite. Thanks for sharing.
- qwertox 2y agoI think it's mainly the `No additional processes` point. Live Preview serves the page, likely by spawning another process to host the server.
- urin 2y agoI have updated the README to address similar comments and issues. https://github.com/urin/vscode-web-visual-editor?tab=readme-ov-file#alternatives https://github.com/urin/vscode-web-visual-editor?tab=readme-...
- politelemon 2y agoThanks, good work on this extension.
- braggerxyz 2y ago
- aloisdg 2y agoThank you for using a FOSS license!
- urin 2y agoIt 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'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.
- ToucanLoucan 2y agoThere 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'm so incredibly for them. The web is so flat and dull now.
- v3ss0n 2y agoYou missed the opportunity to name it Vscode-FrontPage. We Are So Back.
- greybox 2y agoThis is great, A tighter feedback loop is always better for everyone. I'm also getting some serious Déjà vu for the web tools of the 2000's. History really does rhyme
- dangsux 2y ago[dead]
- whoisthisguy 2y agoreminds me of good old Macromedia DreamWeaver times :)
- breadwinner 2y agoWould 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.
- gloosx 2y agoThe title was a little confusing for me. Don't you edit HTML visually in real-time all the time?