VS Code Live Frame
Run your web application inside VS Code.
Why would you want to do that?
You're developing a web application, and you've got some kind of a live/hot reloading setup. Instead of switching between your editor and a browser, with Live Frame you can see your changes without leaving VS Code.
Or, perhaps, you're streaming or recording a screen cast, and you just want everything nicely in one window. Whatever your reasons, we're not here to judge.
How to use it
Add the following to your User or Workspace settings. Given that your app's development URL is probably project specific, Workspace settings may make more sense.
If you have a fast hot reloading setup, you can turn on VS Code's Auto Save on a short delay when you need an extra blazing feedback loop.
Because of the way Live Frame renders your site in an iframe-inside-webview, there are a couple of limitations.
Your site needs to be able to run in an iframe
If your website prevents itself being loaded in an iframe e.g. via
This should not be an issue for most development setups, but if it is, try VSCode Browser Preview instead.
Dev tools work, but element selector doesn't
You can open dev tools by running (
Command key combinations (Copy, Paste, Select all...) are disabled
This is a known issue in VS Code.
As a workaround, you can send your keystrokes to the extension using
Infrequently Asked Questions
Which bundlers, dev servers etc. does Live Frame support?
All of them. Livereload, webpack, vite, servor, whatever angular people use... shouldn't matter. If yours doesn't work, double check it's not your own fault, and open an issue.
Wait, didn't this exist before?
Sort of. Browser Preview embeds a headless Chrome, which is awesome, but also very resource intensive and kept crashing my VS Code. Then there are about a dozen extensions that live reload HTML in various ways, but if you're working with a web application with a build step, they're no use.
Live Frame takes a simple but lightweight route and uses a VS Code Webview pane, and inside it renders your app in a full-screen
So is this exactly like a regular Chrome environment?
Not really. It's an embedded Electron webview with known limitations, and I'm sure many other minor differences to a full browser.
Use at your own peril during development, not for acceptance testing!
Add workaround for keyboard binding issue.