Code program with a live preview

[kiyuyu]

Okay so I've tried a couple things for this, but is there a desktop program that you can code in that has a live preview similar to codepen? I need it to be full size (I have two monitors) because I'm old and a visual learner. I want something to play around in that won't immediately break what I have running, but for some reason the other programs I've tried don't work. I tried VS Studio with live preview (nothing shows up and the program itself has a bit of a learning curve I don't really want to fiddle with it if I'm honest) and playpen I think it was called. Neither of the live previews worked with the css & html I have and I don't know why as it clearly works on the site host.

sorry if it's poorly explained I hope this makes sense, it's 3am here so I am going to sleep but this was eluding me via google searches.    I will look about in the morning.

[Melooon]

Live code plugins are sometimes handy, but Iv tried about 10 at this point and all of them have had some sort of deal breaking bug or issue that made them unusable for me 

You're much better off just setting up a local web server and using that to preview your site in a proper browser (and just reloading the page each time you need to see an edit) ~ I know if your hoping for automatic updates, that sounds like a chore; but auto update systems really only work for simple standard websites or code snippets ~ they are not designed to handle the kinda funky code and complex styles people do on homepages  They always get confused and turn into a mess when they try and preview my sites 

Sooo; the most universal way to setup a local server is to..
1. install Python (its a programing language but it has the ability to start super simple webservers too!)

2. Find the Terminal / Command Prompt in your Applications/Start Menu and pin its icon to your Dock/Task Bar

3. Then drag your websites folder onto the Terminal / Command Prompt icon (this should open a console window that's set to your website folder)

4. Then run this command:

Code

python3 -m http.server 8000

That should start a webserver that will stay running until you close the console window; and if you go to http://localhost:8000 in your browser it should load your website!

Apologies if there's an issue here as I have only tested this on mac! Also also if you are on mac and want a simple program to do the same thing with a nice UI, you can get this one for free instead! 

[kiyuyu]

Live code plugins are sometimes handy, but Iv tried about 10 at this point and all of them have had some sort of deal breaking bug or issue that made them unusable for me 

You're much better off just setting up a local web server and using that to preview your site in a proper browser (and just reloading the page each time you need to see an edit) ~ I know if your hoping for automatic updates, that sounds like a chore; but auto update systems really only work for simple standard websites or code snippets ~ they are not designed to handle the kinda funky code and complex styles people do on homepages  They always get confused and turn into a mess when they try and preview my sites 

Sooo; the most universal way to setup a local server is to..
1. install Python (its a programing language but it has the ability to start super simple webservers too!)

2. Find the Terminal / Command Prompt in your Applications/Start Menu and pin its icon to your Dock/Task Bar

3. Then drag your websites folder onto the Terminal / Command Prompt icon (this should open a console window that's set to your website folder)

4. Then run this command:

Code

python3 -m http.server 8000

That should start a webserver that will stay running until you close the console window; and if you go to http://localhost:8000 in your browser it should load your website!

Apologies if there's an issue here as I have only tested this on mac! Also also if you are on mac and want a simple program to do the same thing with a nice UI, you can get this one for free instead! 

Ahhh that makes sense why it doesn't work, I guess personal type webpages would be harder than the same ten webpages they seem to use for everything now.  

I am a Windows PC haver so I will give the python method a try and see if it works for PC too.

[xixxii]

i use vscode with a live preview plugin and it works okay! as melon said, though, it can be janky. when i was working on a page for the recent 32 bit cafe codejam, the preview kept dumping some of my divs offscreen unless i wiggled my cursor over the preview, which would make them slowly scoot back to where it was supposed to be like some kind of frightened beast.....

[kiyuyu]

i use vscode with a live preview plugin and it works okay! as melon said, though, it can be janky. when i was working on a page for the recent 32 bit cafe codejam, the preview kept dumping some of my divs offscreen unless i wiggled my cursor over the preview, which would make them slowly scoot back to where it was supposed to be like some kind of frightened beast.....

It doesn't work for me is the issue, I'm glad it works for you though! If it worked for me even a little I wouldn't have the issue. jeez louise tho I think even if it did that would drive me crazy.

@Melooon 
I followed your instructions but when I dragged the folder into the command terminal it gave me alla this. Did I follow incorrectly? I'm not sure what this means.