Skip to content

@tauri-apps/api/webview

Provides APIs to create webviews, communicate with other webviews and manipulate the current webview.

Events can be listened to using Webview.listen:

import { getCurrentWebview } from "@tauri-apps/api/webview";
getCurrentWebview().listen("my-webview-event", ({ event, payload }) => { });

Creating child webviews — several webviews inside one window, via new Webview(...) — is an unstable API. It requires the unstable feature of the tauri crate:

[dependencies]
tauri = { version = "2", features = ["unstable"] }

Without it the plugin:webview|create_webview command returns an “unstable feature not supported” error. Everything else in this module — getCurrentWebview, getAllWebviews and the methods of an existing webview — works without the feature, and so does new WebviewWindow(...), which creates a window with a single webview.

This package is also accessible with window.__TAURI__.webview when app.withGlobalTauri in tauri.conf.json is set to true.

core:webview:default only enables the getters (allow-get-all-webviews, allow-webview-position, allow-webview-size and allow-internal-toggle-devtools). Every other method documents the permission it needs, which you must add to a capability yourself.

function getAllWebviews(): Promise<Webview[]>;

Defined in: packages/api/src/webview.ts:107

Gets a list of instances of Webview for all available webviews.

Promise<Webview[]>

Uses the core:webview:allow-get-all-webviews permission, which is part of core:webview:default.

2.0.0


function getCurrentWebview(): Webview;

Defined in: packages/api/src/webview.ts:88

Get an instance of Webview for the current webview.

Webview

2.0.0

Defined in: packages/api/src/webview.ts:207

Create new webview or get a handle to an existing one.

Webviews are identified by a label a unique identifier that can be used to reference it later. It may only contain alphanumeric characters a-zA-Z plus the following special characters -, /, : and _.

Requires the unstable Cargo feature

Creating a webview with new Webview(...) adds a child webview to an existing window, which is an unstable API gated behind the unstable feature of the tauri crate:

[dependencies]
tauri = { version = "2", features = ["unstable"] }

Without it the call rejects with an “unstable feature not supported” error. Getting a handle to an existing webview (Webview.getByLabel, getCurrentWebview, getAllWebviews) and every method on this class work without the feature. To create a window that hosts a single webview, use WebviewWindow instead, which is stable.

import { Window } from "@tauri-apps/api/window"
import { Webview } from "@tauri-apps/api/webview"
const appWindow = new Window('uniqueLabel');
appWindow.once('tauri://created', async function () {
// `new Webview` Should be called after the window is successfully created,
// or webview may not be attached to the window since window is not created yet.
// loading embedded asset:
const webview = new Webview(appWindow, 'theUniqueLabel', {
url: 'path/to/page.html',
// create a webview with specific logical position and size
x: 0,
y: 0,
width: 800,
height: 600,
});
// alternatively, load a remote URL:
const webview = new Webview(appWindow, 'theUniqueLabel', {
url: 'https://github.com/tauri-apps/tauri',
// create a webview with specific logical position and size
x: 0,
y: 0,
width: 800,
height: 600,
});
webview.once('tauri://created', function () {
// webview successfully created
});
webview.once('tauri://error', function (e) {
// an error happened creating the webview
});
// emit an event to the backend
await webview.emit("some-event", "data");
// listen to an event from the backend
const unlisten = await webview.listen("event-name", e => { });
unlisten();
});

2.0.0

new Webview(
window: Window,
label: string,
options: WebviewOptions
): Webview;

Defined in: packages/api/src/webview.ts:255

Creates a new Webview.

import { Window } from '@tauri-apps/api/window'
import { Webview } from '@tauri-apps/api/webview'
const appWindow = new Window('my-label')
appWindow.once('tauri://created', async function() {
const webview = new Webview(appWindow, 'my-label', {
url: 'https://github.com/tauri-apps/tauri',
// create a webview with specific logical position and size
x: 0,
y: 0,
width: 800,
height: 600,
});
webview.once('tauri://created', function () {
// webview successfully created
});
webview.once('tauri://error', function (e) {
// an error happened creating the webview
});
});
Parameter Type Description
window Window the window to add this webview to.
label string The unique webview label. Must be alphanumeric: a-zA-Z-/:_.
options WebviewOptions The webview configuration, see WebviewOptions.

Webview

The Webview instance to communicate with the webview.

Requires the unstable Cargo feature on the tauri crate (tauri = { version = "2", features = ["unstable"] }), otherwise the call rejects with an “unstable feature not supported” error. It also requires the core:webview:allow-create-webview permission, which is not included in core:webview:default.

Property Type Description Defined in
label string The webview label. It is a unique identifier for the webview, can be used to reference it later. packages/api/src/webview.ts:209
listeners Record<string, EventCallback<any>[]> Local event listeners. packages/api/src/webview.ts:214
window Window The window hosting this webview. packages/api/src/webview.ts:211

clearAllBrowsingData(): Promise<void>;

Defined in: packages/api/src/webview.ts:699

Clears all browsing data for this webview: cookies, localStorage, IndexedDB, caches and any other data the webview stores for the loaded origins.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().clearAllBrowsingData();

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-clear-all-browsing-data permission (not included in core:webview:default).

close(): Promise<void>;

Defined in: packages/api/src/webview.ts:513

Closes the webview.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().close();

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-webview-close permission (not included in core:webview:default).

emit<T>(event: string, payload?: T): Promise<void>;

Defined in: packages/api/src/webview.ts:393

Emits an event to all targets.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().emit('webview-loaded', { loggedIn: true, token: 'authToken' });
Type Parameter
T
Parameter Type Description
event string Event name. Must include only alphanumeric characters, -, /, : and _.
payload? T Event payload.

Promise<void>

emitTo<T>(
target: string | EventTarget,
event: string,
payload?: T
): Promise<void>;

Defined in: packages/api/src/webview.ts:421

Emits an event to all targets matching the given target.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().emitTo('main', 'webview-loaded', { loggedIn: true, token: 'authToken' });
Type Parameter
T
Parameter Type Description
target | string | EventTarget Label of the target Window/Webview/WebviewWindow or raw EventTarget object.
event string Event name. Must include only alphanumeric characters, -, /, : and _.
payload? T Event payload.

Promise<void>

hide(): Promise<void>;

Defined in: packages/api/src/webview.ts:618

Hide the webview.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().hide();

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-webview-hide permission (not included in core:webview:default).

listen<T>(event: EventName, handler: EventCallback<T>): Promise<UnlistenFn>;

Defined in: packages/api/src/webview.ts:327

Listen to an emitted event on this webview.

import { getCurrentWebview } from '@tauri-apps/api/webview';
const unlisten = await getCurrentWebview().listen<string>('state-changed', (event) => {
console.log(`Got error: ${payload}`);
});
// call unlisten when your handler goes out of scope e.g. the component is unmounted
unlisten();
Type Parameter
T
Parameter Type Description
event EventName Event name. Must include only alphanumeric characters, -, /, : and _.
handler EventCallback<T> Event handler.

Promise<UnlistenFn>

A promise resolving to a function to unlisten to the event.

The listener is removed automatically when this webview is destroyed, so you do not need to unlisten just because the webview is closing. Do call the returned function when the listener’s own scope ends, e.g. on page navigation or when a component unmounts.

once<T>(event: EventName, handler: EventCallback<T>): Promise<UnlistenFn>;

Defined in: packages/api/src/webview.ts:365

Listen to an emitted event on this webview only once.

import { getCurrentWebview } from '@tauri-apps/api/webview';
const unlisten = await getCurrentWebview().once<null>('initialized', (event) => {
console.log(`Webview initialized!`);
});
// call unlisten when your handler goes out of scope e.g. the component is unmounted
unlisten();
Type Parameter
T
Parameter Type Description
event EventName Event name. Must include only alphanumeric characters, -, /, : and _.
handler EventCallback<T> Event handler.

Promise<UnlistenFn>

A promise resolving to a function to unlisten to the event.

The listener removes itself after the first event and is also removed automatically when this webview is destroyed. Do call the returned function if the listener’s own scope ends before the event arrives.

onDragDropEvent(handler: EventCallback<DragDropEvent>): Promise<UnlistenFn>;

Defined in: packages/api/src/webview.ts:769

Listen to a file drop event. The listener is triggered when the user hovers the selected files on the webview, drops the files or cancels the operation.

import { getCurrentWebview } from "@tauri-apps/api/webview";
const unlisten = await getCurrentWebview().onDragDropEvent((event) => {
if (event.payload.type === 'over') {
console.log('User hovering', event.payload.position);
} else if (event.payload.type === 'drop') {
console.log('User dropped', event.payload.paths);
} else {
console.log('File drop cancelled');
}
});
// call unlisten when your handler goes out of scope e.g. the component is unmounted
unlisten();

When the debugger panel is open, the drop position of this event may be inaccurate due to a known limitation. To retrieve the correct drop position, please detach the debugger.

Parameter Type
handler EventCallback<DragDropEvent>

Promise<UnlistenFn>

A promise resolving to a function to unlisten to the event.

The listeners are removed automatically when this webview is destroyed. Do call the returned function when the listener’s own scope ends, e.g. on page navigation or when a component unmounts.

position(): Promise<PhysicalPosition>;

Defined in: packages/api/src/webview.ts:469

The position of the top-left hand corner of the webview’s client area relative to the top-left hand corner of the desktop.

import { getCurrentWebview } from '@tauri-apps/api/webview';
const position = await getCurrentWebview().position();

Promise<PhysicalPosition>

The webview’s position, in physical pixels.

Uses the core:webview:allow-webview-position permission, which is part of core:webview:default.

reparent(window: string | Window | WebviewWindow): Promise<void>;

Defined in: packages/api/src/webview.ts:678

Moves this webview to the window with the given label.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().reparent('other-window');
Parameter Type Description
window | string | Window | WebviewWindow The target window, or its label.

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-reparent permission (not included in core:webview:default).

setAutoResize(autoResize: boolean): Promise<void>;

Defined in: packages/api/src/webview.ts:598

Sets whether the webview should automatically grow and shrink its size and position when the parent window resizes.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().setAutoResize(true);
Parameter Type
autoResize boolean

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-set-webview-auto-resize permission (not included in core:webview:default).

setBackgroundColor(color: Color | null): Promise<void>;

Defined in: packages/api/src/webview.ts:729

Specify the webview background color.

Platform-specific

  • macOS / iOS: Not implemented.
  • Windows:
    • On Windows 7, transparency is not supported and the alpha value will be ignored.
    • On Windows higher than 7: translucent colors are not supported so any alpha value other than 0 will be replaced by 255
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().setBackgroundColor('#2f2f2f');
// or with an RGBA tuple, or `null` to restore the default background
await getCurrentWebview().setBackgroundColor([47, 47, 47, 255]);
Parameter Type Description
color Color | null The new background color, or null to reset it.

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-set-webview-background-color permission (not included in core:webview:default).

2.1.0

setFocus(): Promise<void>;

Defined in: packages/api/src/webview.ts:579

Bring the webview to front and focus.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().setFocus();

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-set-webview-focus permission (not included in core:webview:default).

setPosition(position: PhysicalPosition | LogicalPosition | Position): Promise<void>;

Defined in: packages/api/src/webview.ts:557

Sets the webview position.

import { getCurrentWebview } from '@tauri-apps/api/webview';
import { LogicalPosition } from '@tauri-apps/api/dpi';
await getCurrentWebview().setPosition(new LogicalPosition(600, 500));
Parameter Type Description
position | PhysicalPosition | LogicalPosition | Position The new position, in logical or physical pixels, relative to the top-left corner of the hosting window.

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-set-webview-position permission (not included in core:webview:default).

setSize(size: PhysicalSize | LogicalSize | Size): Promise<void>;

Defined in: packages/api/src/webview.ts:534

Resizes the webview.

import { getCurrentWebview } from '@tauri-apps/api/webview';
import { LogicalSize } from '@tauri-apps/api/dpi';
await getCurrentWebview().setSize(new LogicalSize(600, 500));
Parameter Type Description
size | PhysicalSize | LogicalSize | Size The logical or physical size.

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-set-webview-size permission (not included in core:webview:default).

setZoom(scaleFactor: number): Promise<void>;

Defined in: packages/api/src/webview.ts:657

Set webview zoom level.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().setZoom(1.5);
Parameter Type Description
scaleFactor number The zoom level, where 1 is 100%.

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-set-webview-zoom permission (not included in core:webview:default).

show(): Promise<void>;

Defined in: packages/api/src/webview.ts:637

Show the webview.

import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().show();

Promise<void>

A promise indicating the success or failure of the operation.

Requires the core:webview:allow-webview-show permission (not included in core:webview:default).

size(): Promise<PhysicalSize>;

Defined in: packages/api/src/webview.ts:489

The physical size of the webview’s client area. The client area is the content of the webview, excluding the title bar and borders.

import { getCurrentWebview } from '@tauri-apps/api/webview';
const size = await getCurrentWebview().size();

Promise<PhysicalSize>

The webview’s size, in physical pixels.

Uses the core:webview:allow-webview-size permission, which is part of core:webview:default.

static getAll(): Promise<Webview[]>;

Defined in: packages/api/src/webview.ts:300

Gets a list of instances of Webview for all available webviews.

Promise<Webview[]>

static getByLabel(label: string): Promise<Webview | null>;

Defined in: packages/api/src/webview.ts:286

Gets the Webview for the webview associated with the given label.

import { Webview } from '@tauri-apps/api/webview';
const mainWebview = Webview.getByLabel('main');
Parameter Type Description
label string The webview label.

Promise<Webview | null>

The Webview instance to communicate with the webview or null if the webview doesn’t exist.

static getCurrent(): Webview;

Defined in: packages/api/src/webview.ts:293

Get an instance of Webview for the current webview.

Webview

Defined in: packages/api/src/webview.ts:838

Configuration for the webview to create.

2.0.0

Property Type Description Defined in
acceptFirstMouse? boolean Whether clicking an inactive webview also clicks through to the webview on macOS. packages/api/src/webview.ts:876
allowLinkPreview? boolean on macOS and iOS there is a link preview on long pressing links, this is enabled by default. see https://docs.rs/objc2-web-kit/latest/objc2_web_kit/struct.WKWebView.html#method.allowsLinkPreview packages/api/src/webview.ts:980
backgroundColor? Color Set the window and webview background color. Platform-specific - macOS / iOS: Not implemented. - Windows: - On Windows 7, alpha channel is ignored. - On Windows 8 and newer, if alpha channel is not 0, it will be ignored. Since 2.1.0 packages/api/src/webview.ts:952
backgroundThrottling? BackgroundThrottlingPolicy Change the default background throttling behaviour. By default, browsers use a suspend policy that will throttle timers and even unload the whole tab (view) to free resources after roughly 5 minutes when a view became minimized or hidden. This will pause all tasks until the documents visibility state changes back from hidden to visible by bringing the view back to the foreground. Platform-specific - Linux / Windows / Android: Unsupported. Workarounds like a pending WebLock transaction might suffice. - iOS: Supported since version 17.0+. - macOS: Supported since version 14.0+. see https://github.com/tauri-apps/tauri/issues/5250#issuecomment-2569380578 Since 2.3.0 packages/api/src/webview.ts:971
dataDirectory? string Set a custom path for the webview’s data directory (localStorage, cache, etc.) relative to [appDataDir()]/${label}. For security reasons, paths outside of that location can only be configured on the Rust side. Platform-specific - Windows: WebViews with different values for settings like additionalBrowserArgs, browserExtensionsEnabled or scrollBarStyle must have different data directories. - macOS / iOS: Unsupported, use dataStoreIdentifier instead. - Android: Unsupported. Since 2.9.0 packages/api/src/webview.ts:1000
dataStoreIdentifier? number[] Initialize the WebView with a custom data store identifier. This can be seen as a replacement for dataDirectory which is unavailable in WKWebView. See https://developer.apple.com/documentation/webkit/wkwebsitedatastore/init(foridentifier:)?language=objc The array must contain 16 u8 numbers. Platform-specific - macOS / iOS: Available on macOS >= 14 and iOS >= 17 - Windows / Linux / Android: Unsupported. Since 2.9.0 packages/api/src/webview.ts:1014
devtools? boolean Whether web inspector, which is usually called browser devtools, is enabled or not. Enabled by default. This API works in debug builds, but requires devtools feature flag to enable it in release builds. Platform-specific - macOS: This will call private functions on macOS. - Android: Open chrome://inspect/#devices in Chrome to get the devtools window. Wry’s WebView devtools API isn’t supported on Android. - iOS: Open Safari > Develop > [Your Device Name] > [Your WebView] to get the devtools window. Since 2.1.0 packages/api/src/webview.ts:939
disableInputAccessoryView? boolean Allows disabling the input accessory view on iOS. The accessory view is the view that appears above the keyboard when a text input element is focused. It usually displays a view with “Done”, “Next” buttons. packages/api/src/webview.ts:987
dragDropEnabled? boolean Whether the drag and drop is enabled or not on the webview. By default it is enabled. Disabling it is required to use HTML5 drag and drop on the frontend on Windows. packages/api/src/webview.ts:872
focus? boolean Whether the webview should have focus or not Since 2.1.0 packages/api/src/webview.ts:866
generalAutofillEnabled? boolean Controls the WebView’s browser-level general autofill behavior. This option does not disable password or credit card autofill. When set to false, the WebView will not automatically populate general form fields using previously stored data such as addresses or contact information. If not specified, this is true by default. Platform-specific - Windows: Supported. WebView2’s autofill feature (called “Suggestions”) may not honor autocomplete="off" on input elements in some cases. - Linux / Android / iOS / macOS: Unsupported and performs no operation. Since 2.11.0 packages/api/src/webview.ts:1048
height number The initial height in logical pixels. packages/api/src/webview.ts:854
incognito? boolean Whether or not the webview should be launched in incognito mode. Platform-specific - Android: Unsupported. packages/api/src/webview.ts:888
javascriptDisabled? boolean Whether we should disable JavaScript code execution on the webview or not. packages/api/src/webview.ts:975
proxyUrl? string The proxy URL for the WebView for all network requests. Must be either a http:// or a socks5:// URL. Platform-specific - macOS: Requires the macos-proxy feature flag and only compiles for macOS 14+. packages/api/src/webview.ts:898
scrollBarStyle? ScrollBarStyle Specifies the native scrollbar style to use with the webview. CSS styles that modify the scrollbar are applied on top of the native appearance configured here. Defaults to default, which is the browser default. Platform-specific - Windows: - fluentOverlay requires WebView2 Runtime version 125.0.2535.41 or higher, and does nothing on older versions. - This option must be given the same value for all webviews. - Linux / Android / iOS / macOS: Unsupported. Only supports Default and performs no operation. packages/api/src/webview.ts:1029
transparent? boolean Whether the webview is transparent or not. On Windows, using noRedirectionBitmap can help avoid a white flash when creating a transparent window. packages/api/src/webview.ts:860
url? string Remote URL or local file path to open. - URL such as https://github.com/tauri-apps is opened directly on a Tauri webview. - data: URL such as data:text/html,<html>... is only supported with the webview-data-url Cargo feature for the tauri dependency. - local file path or route such as /path/to/page.html or /users is appended to the application URL (the devServer URL on development, or tauri://localhost/ and https://tauri.localhost/ on production). packages/api/src/webview.ts:846
useHttpsScheme? boolean Sets whether the custom protocols should use https://<scheme>.localhost instead of the default http://<scheme>.localhost on Windows and Android. Defaults to false. Note Using a https scheme will NOT allow mixed content when trying to fetch http endpoints and therefore will not match the behavior of the <scheme>://localhost protocols used on macOS and Linux. Warning Changing this value between releases will change the IndexedDB, cookies and localstorage location and your app will not be able to access them. Since 2.1.0 packages/api/src/webview.ts:925
userAgent? string The user agent for the webview. packages/api/src/webview.ts:880
width number The initial width in logical pixels. packages/api/src/webview.ts:852
x number The initial horizontal position in logical pixels, relative to the window’s top-left corner. packages/api/src/webview.ts:848
y number The initial vertical position in logical pixels, relative to the window’s top-left corner. packages/api/src/webview.ts:850
zoomHotkeysEnabled? boolean Whether page zooming by hotkeys is enabled Platform-specific - Windows: Controls WebView2’s IsZoomControlEnabled setting. - MacOS / Linux: Injects a polyfill that zooms in and out with ctrl/command + -/=, 20% in each step, ranging from 20% to 1000%. Requires webview:allow-set-webview-zoom permission - Android / iOS: Unsupported. packages/api/src/webview.ts:910

type Color =
| [number, number, number]
| [number, number, number, number]
| {
alpha: number;
blue: number;
green: number;
red: number;
}
| string;

Defined in: packages/api/src/window.ts:2576

An RGBA color. Each value has minimum of 0 and maximum of 255.

It can be either a string #ffffff, an array of 3 or 4 elements or an object.

2.0.0


type DragDropEvent =
| {
paths: string[];
position: PhysicalPosition;
type: "enter";
}
| {
position: PhysicalPosition;
type: "over";
}
| {
paths: string[];
position: PhysicalPosition;
type: "drop";
}
| {
type: "leave";
};

Defined in: packages/api/src/webview.ts:77

The payload of a drag and drop event, see Webview.onDragDropEvent.

  • enter: the user dragged files over the webview; paths holds the dragged files.
  • over: the cursor moved while dragging; only position changes.
  • drop: the files were dropped; paths holds the dropped files.
  • leave: the drag left the webview or was cancelled.

Positions are in physical pixels, relative to the webview’s top-left corner.


© 2026 Tauri Contributors. CC-BY / MIT