Github.dev web editor live preview for html/js apps

[mmiscool]

Hello,
I have a relatively small simple project composed of vanilla html, js & css.
https://github.dev/mmiscool/serialTerminal.com
If I open the project in using the "github.dev" browser based VS code I can edit the project without issue. I have how ever not been able to figure out a method to show a live preview. It was my hope that VS Code in the browser would at least match the capabilities of https://jsfiddle.net/ .

Is there any method to get a real time capability to run the code in the browser? Perhaps a VS Code plugin?

[soutiagojose]

This site generates a preview of the page's html code
https://htmlpreview.github.io/

[mmiscool]

The trouble with that approach is you would need to commit and push each time you wanted to use the preview.

[jdevfullstack]

there are so many ways to achieve it,

but take note github.dev is not the the same as Codespaces,

https://docs.github.com/en/codespaces/the-githubdev-web-based-editor#codespaces-and-the-web-based-editor

maybe these tutorials will help

https://www.youtube.com/watch?v=vDXPkAdqSyI

https://www.youtube.com/watch?v=8KwoKgYz85k

[mmiscool]

Yes. Specifically I am trying to be able to develop web applications with out needing the virtual machine backing of a codespaces instance. Codespaces cost money and I understand the difrence between codespaces and github.dev

I was just hoping that one of the simplest usecases covered by sites like jsfiddle and codepen might be possible to replicate using a more complete VScode implementation in the browser.

[jdevfullstack]

Codespaces cost money and I understand the difrence between codespaces and github.dev

[Lexyth]

Does someone happen to have an answer to the actual question? I would be very interested in that, too.

[T3sT3ro]

For now, Codeswing works for now, but is not perfect (for example initializing new swing in a directory overwrites the content of files). I've only started using it, but it allows for previewing the app in the same tab. The setup is not ideal though.

I've tried the webcontainers extensions, but had no luck with them. Sadly, neither github.dev nor vscode.dev use webcontainers to allow for usage of node in the browser (like stackblitz.com does)

[whimsyniche]

That's the one! Codeswing

[whimsyniche]

I think @planetoftheweb talked about this in on of this videos. I forget where to find this or how to do this.

[whimsyniche]

See that someone mentioned CodeSwing. I just installed in my GH web editor.