HTML/CSS editing with live viewing?

[SilkSkull]

I'm working on getting back into updating my site and I'd love to have a IDE where I can edit HTML & CSS (maybe at the same time) with a live view of what it would look like. Does anyone know of anything like this or maybe even a way I could do it with something like Visual Studio?

[shevek]

Brackets could be fitting for you! Their live preview works via Chrome (could be a dealbreaker if you don't want to use it, I don't know if it works on degoogled Chromium) and you can have multiple files open side by side, like the CSS file and the HTML file. Additionally, it has a feature where you can press a button hovering over a piece of code and a little popup shows what it references in the other document; think, hovering over <div class="statue"> and seeing the CSS code for .statue {.

The project used to be owned by Adobe, but went FOSS, so don't be confused when you search for it online and see it has been discontinued.

[Melooon]

This is the Live Preview plugin for VSCode that works well!

Some more fancy options for Mac users (expensive but ooph!)

• Espresso - https://espressoapp.com/
• Nova - https://nova.app/

[SilkSkull]

Brackets could be fitting for you! Their live preview works via Chrome (could be a dealbreaker if you don't want to use it, I don't know if it works on degoogled Chromium) and you can have multiple files open side by side, like the CSS file and the HTML file. Additionally, it has a feature where you can press a button hovering over a piece of code and a little popup shows what it references in the other document; think, hovering over <div class="statue"> and seeing the CSS code for .statue {.

The project used to be owned by Adobe, but went FOSS, so don't be confused when you search for it online and see it has been discontinued.

This is the Live Preview plugin for VSCode that works well!

Some more fancy options for Mac users (expensive but ooph!)

• Espresso - https://espressoapp.com/
• Nova - https://nova.app/

I'll try both of these (other than the mac ones because I don't use mac xD) and hopefully will enjoy one! Having a proper environment to easily develop in feels so much easier and makes me so much more passionate to code!

[pinkvampyr]

if you prefer an open source alternative to vscode theres also vscodium which has the same live extension.

you can do stuff in codepen or w3schools code editors but i don't think you can (or should) try to make your whole site in them.

[SilkSkull]

if you prefer an open source alternative to vscode theres also vscodium which has the same live extension.

you can do stuff in codepen or w3schools code editors but i don't think you can (or should) try to make your whole site in them.

This reminds me, I've been meaning to try vscodium for a good while now, if all vscode extensions work (or even most) I might migrate fully

[pinkvampyr]

This reminds me, I've been meaning to try vscodium for a good while now, if all vscode extensions work (or even most) I might migrate fully

depends on the extension unfortunately. i don't use a lot of extensions so you'd have to check it out for yourself.