Image Corner

Image Corner displays images from configured sources in the Explorer sidebar and in independent editor panels.

Use it

1. Open the Explorer sidebar and expand Image Preview.
2. Select Select Preset to display a configured preset, or Select Source to choose a configured source or enter a URL/file path.

The sidebar preview starts with no image unless Sidebar Preview Default is set to preset:<id> or source:<id> in Image Corner settings. Selecting a preset or source changes only that sidebar preview. Since VS Code registers sidebar views by fixed IDs, it does not support creating arbitrary sidebar view instances at runtime; Image Corner: Open Independent Image Instance opens as many independent editor panels as you need.

When an image is displayed, use the Zoom + button on the left to show or hide the zoom controls (hidden by default). The controls zoom in/out or fit the image. Vertical scrolling and pinch gestures zoom at the cursor or pinch midpoint; horizontal scrolling pans more slowly, and dragging with the mouse or one finger pans the image. Configure Wheel Zoom Sensitivity and Horizontal Pan Speed in Image Corner settings.

Presets and sources

Image Corner: Open Settings opens the built-in VS Code Settings UI filtered to this extension. Default Name is displayed when an image filename cannot be determined. Sources File and Presets File select the JSON config locations. Their defaults, sources.json and presets.json, resolve relative to the extension folder; absolute paths are also supported. Each setting links to edit its file. After saving edits, run Image Corner: Validate and Reload Configuration to check the files and refresh open image panels.

Image Corner: Open Preset opens a new independent panel each time; Image Corner: Open Preset in New Editor opens one beside the active editor. Image Corner: Open Independent Image Instance lets you choose a preset, configured source, or custom path/URL for a new panel. VS Code sidebar views have fixed IDs and cannot be dynamically duplicated, so these independent instances open as editor panels. Presets can also be opened independently in each VS Code window.

The preset picker also includes a built-in Default (select a file; watch for updates) option. It opens a file picker and watches the selected file for changes. This option is runtime-only and is not written to presets.json.

sources.json maps source IDs to HTTP(S) image URLs, absolute or extension-relative file paths, or scripts. A script source must specify exactly one of script.external (a file relative to the extension folder) or script.inline (JavaScript source text):

{
  "daily-image": {
    "script": {
      "external": "nekosia_image_fetcher.js"
    }
  },
  "inline-daily-image": {
    "script": {
      "inline": "const response = await fetch('https://example.com/image.json');\nreturn (await response.json()).image.url;"
    }
  },
  "local-image": "images/preview.png"
}

Scripts receive fetch and must return an image URL or a path relative to the extension folder. Only use scripts you trust; they execute in the extension host.

presets.json maps preset IDs to a source and optional refresh settings:

{
  "daily": {
    "label": "Daily image",
    "source": "daily-image",
    "refresh": {
      "interval": 30000
    }
  },
  "local": {
    "label": "Local preview",
    "source": "local-image",
    "refresh": {
      "listen": "update"
    }
  }
}

refresh.interval is an interval in milliseconds. refresh.listen: "update" watches the referenced local image or script file.

Troubleshooting

The extension logs activation, view rendering, and image load failures to the Image Corner output channel and the Extension Host console. To open the output channel, choose View: Toggle Output, then select Image Corner. To inspect webview diagnostics, run Developer: Toggle Developer Tools.

Run from source

Open this folder in VS Code and press F5 to start an Extension Development Host.