[mg]

Another approach is to paste it into an online HTML editor with preview. Here is one that I made:

https://no-gravity.github.io/html_editor/

This has the benefit that you can also edit the html afterwards.

It also has the function to render the HTML into an image (Via the "Render" button). I wonder if one could feed that image back to ChatGPT to provide visual feedback on what it coded? Maybe it would reply with "Oh, now that I see it, let's make the margins on the header a bit smaller and the background a bit more colorful" :)

[Timwi]

> It also has the function to render the HTML into an image (Via the "Render" button).

Firefox has that built in: right click, “Take Screenshot”. It lets you choose between screenshotting just the visible viewport or the whole page.

[koolala]

It's way worse than the OS screenshot method. It adds DRM into screenshotting which to me isn't a screenshot. A screenshot is pointing my phone camera at the screen to avoid anyone changing what I take an image of.

[michaelmior]

What DRM is added into Firefox screenshots? This is the first I've heard of this.

[koolala]

Any cross-origin / cors images don't appear in the screenshot. I only know because I accidentally used the Firefox hotkey instead of my OS's screenshot hotkey and it broke my screenshot.

[KMnO4]

How is that digital rights management? Sounds more like a limitation of how FF renders the screenshots (which is possibly in JS)

[michaelmior]

I wouldn't call that "adding DRM," but certainly a challenge with using FF for screenshots.

[aaviator42]

Here is my fork of this editor, with an added vertical layout, etc:

http://aavi.xyz/proj/editor/

[mg]

Nice one!

Some observations:

This fork throws errors in my console. It seems you added a Cloudflare statistics script that does not work in my browser.

This is also a fork of an old version. Where for example "let x=7" in a script block will error out on the second run.

If you find the time to make a pull request for the vert switcher, we can join forces!

[aaviator42]

It is a fork of an older version, I will update it sometime soon and send a PR upstream for the vert switcher, although I'm afraid it might not be implemented in the neatest way possible. :)

[lhousa]

https://mrdoob.com/projects/htmleditor/ very similar

[nox101]

or codepen, jsfiddle, jsbin, jsgist, etc...

[mg]

I have various problems with these. That's why I made my own.

Some of the problems are:

You can't edit the raw HTML because the site injects additional stuff into the HTML you write.

Editing is sluggish because of the heavy processing the site does on every keystroke.

The console gets flooded with stuff not related to the code you write.

[googledocsftw]

https://play.tailwindcss.com is good because there is likely going to be no enshittification to chase dollars. The make money from courses and frameworks.

[turblety]

I really like flems [1] as there's no login, signup, payment, paywall, popups, marketplace, guides, bs.

It saves the content into the url so you can bookmark and share, without it ever getting saved to their servers. In fact, since it's stored as a bookmark it should never hit their servers at all.

1. https://flems.io/

[NitpickLawyer]

Thanks for this. I had the same issue with many of the proposed alternatives above, all of them require some form of registration. I see the point, but I also think it's totally unnecessary for quick stuff. Flems seems to be what I was looking for.