Loading application content

WebviewOptions accepts a URL or an HTML string. Choose the source based on how your app is built and where its assets live.

Use one initial source per webview. You can navigate later with loadUrl() or replace the document with loadHtml().

Inline HTMLCopy Anchor Link

Inline HTML is useful for a small utility view or a generated page. It does not copy files into the executable; if the page depends on CSS, scripts, fonts, or images, include those resources separately or serve them through a custom protocol.

const webview = win.createWebview({
  html: '<!doctype html><html><body><h1>Status</h1></body></html>',
});

The repository's HTML example shows an inline page.

Remote URLCopy Anchor Link

Load a remote page directly:

const webview = win.createWebview({ url: 'https://example.com' });

For security-sensitive applications, restrict navigation to expected origins with navigationHandler; see Navigation and popups.

Local application assetsCopy Anchor Link

For a page with multiple local files, register a custom protocol on the BrowserWindow before creating the webview. The handler can read files during development and serve the same assets in a packaged app:

win.registerProtocol('app', async (request) => {
  const url = new URL(request.url);
  const asset = await readApplicationAsset(url.pathname);
  return new Response(asset, {
    headers: { 'Content-Type': mimeTypeFor(url.pathname) },
  });
});

const webview = win.createWebview({ url: 'app://localhost/index.html' });

Use a path resolver that rejects traversal and keeps the resolved file inside your asset directory. Do not join an untrusted URL path to a directory and read it without validation. The custom protocol example shows a guarded file resolver; the Hono example serves routes without a local HTTP server.

Custom schemes on Windows are normalized by WebviewJS for WebView2. autoNormalizeLoadUrl and useHttpsScheme are Windows-specific options; see Webview creation options and Custom Protocols.

Embed assets in a standalone executableCopy Anchor Link

webview build can embed files with repeatable --asset flags. The exact retrieval path depends on the selected executable runtime. The generated Node.js starter uses node:sea to read src/index.html from the executable and readFile() during development. The CLI's asset and runtime behavior describes how Node SEA, Bun, and Deno accept assets.

webview build src/main.ts --asset src/index.html

Embedding a file does not automatically make it available at a URL. Your app must read the embedded bytes and return them from a custom-protocol handler, or load its content as inline HTML.