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

1. Install Live Frame from the VS Code Marketplace.
2. Start your local development server
3. Run (Cmd+Shift+P) command Live Frame: Open
4. Follow configuration instructions.

Extension Settings

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.

{
  // Required: The website to display
  "liveFrame.url": "http://localhost:3000",

  // Optional: Title for the pane tab heading
  "liveFrame.title": "Local Development",

  // Optional: Which pane to open the frame in
  "liveFrame.pane": "Beside"
}

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.

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 50,
}

Known Limitations

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 X-Frame-Options or Content-Security-Policy, it won't work inside Live Frame.

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 (Cmd+Shift+P) the Open WebView Developer Tools command. However,the point and click element selector doesn't select element inside the iframe.

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 postMessage, and we'll forward them to VS Code for you. Just add the following somewhere in your application code:

if (window.parent !== window) {
  // If using TypeScript, next line should be:
  // let listener = (e: KeyboardEvent) =>
  let listener = (e) =>
    window.parent.postMessage(
      JSON.stringify({
        altKey: e.altKey,
        code: e.code,
        ctrlKey: e.ctrlKey,
        isComposing: e.isComposing,
        key: e.key,
        location: e.location,
        metaKey: e.metaKey,
        repeat: e.repeat,
        shiftKey: e.shiftKey,
      }),
      "*"
    );

  if (!window.hasOwnProperty("keyhookInstalled")) {
    // If using TypeScript, next line should be:
    // (window as any).keyhookInstalled = true;
    window.keyhookInstalled = true;
    window.addEventListener("keydown", listener);
  }
}

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 iframe. You can see the full implementation in extension.ts.

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!

Release Notes

0.1.1

Add workaround for keyboard binding issue.

0.1.0

Initial release.

License

MIT