Skip to content
Electrobun Docs

Bundled Assets

Electrobun maps files under the packaged Resources/app/views directory to the views:// protocol. Use these URLs anywhere a webview accepts a normal URL.

Configure a view

build.views bundles JavaScript or TypeScript entrypoints. build.copy copies HTML, CSS, images, and other static files without transforming them.

import type { ElectrobunConfig } from "electrobun";


export default {
  app: {
    name: "Assets Example",
    identifier: "dev.example.assets",
    version: "1.0.0",
  },
  build: {
    views: {
      mainview: {
        entrypoint: "src/mainview/index.ts",
      },
    },
    copy: {
      "src/mainview/index.html": "views/mainview/index.html",
      "src/mainview/style.css": "views/mainview/style.css",
      "src/mainview/logo.png": "views/mainview/logo.png",
    },
  },
} satisfies ElectrobunConfig;

The destination views/mainview/index.html becomes views://mainview/index.html at runtime. View names are application-defined; you can add as many entries as needed.

Load bundled content

import { BrowserWindow } from "electrobun/main";


const mainWindow = new BrowserWindow({
  title: "Bundled content",
  url: "views://mainview/index.html",
  frame: { width: 800, height: 600 },
});


void mainWindow;

BrowserWindow takes the URL in its constructor. Loading a new URL later is a BrowserView operation: mainWindow.webview.loadURL(url).

Reference assets from HTML and CSS

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Bundled content</title>
    <link rel="stylesheet" href="views://mainview/style.css" />
    <script type="module" src="views://mainview/index.js"></script>
  </head>
  <body>
    <img src="views://mainview/logo.png" alt="Application logo" />
  </body>
</html>
body {
  background-image: url("views://mainview/logo.png");
}

Each configured view is emitted as views/<view-name>/index.js, independent of the entrypoint’s filename. In this example, the mainview entry becomes views/mainview/index.js.