Additional Windows

Tauri supports multiple windows out of the box. Adding a secondary window is as simple as defining it in tauri.conf.json and creating a route for it — the same way the main window works.

1. Define the Window

Open src-tauri/tauri.conf.json and add your window to the windows array:

{
  "label": "secondary",
  "title": "secondary-window",
  "width": 340,
  "height": 300,
  "visible": false,
  "shadow": false,
  "decorations": false,
  "skipTaskbar": true,
  "transparent": true,
  "alwaysOnTop": true,
  "url": "/secondary-window"
}

The url field maps to a route in your React app. The label is what you use to reference the window from code. Setting visible to false means it starts hidden and you show it programmatically.

2. Create the Page

Create a page for your window at src/routes/secondary-window/page.tsx:

import { Section } from "@/components/section";
import { Field } from "@/components/field";
import { Topbar } from "@/components/topbar";
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
import { Text } from "@/components/text";

export function SecondaryWindowPage() {
  const closeWindow = async () => {
    const w = await WebviewWindow.getByLabel("secondary");
    await w?.hide();
  };

  return (
    <>
      <Topbar title="Secondary Window" onClose={closeWindow} />
      <div className="p-3">
        <Section title="Secondary Window">
          <Field name="Test Field">
            <Text>Hello this is a test!</Text>
          </Field>
        </Section>
      </div>
    </>
  );
}

Note that secondary windows don't use MainLayout since they don't need the tab bar. You just use Topbar directly and manage the close behaviour yourself by hiding the window via its label.

3. Export and Register the Route

Export the page in src/routes/index.ts:

export { SecondaryWindowPage } from "./secondary-window/page";

Then register the route in src/main.tsx:

import { SecondaryWindowPage } from "./routes";

<Route path="/secondary-window" element={<SecondaryWindowPage />} />;

4. Opening the Window

From anywhere in your app, use WebviewWindow.getByLabel with the label you defined in tauri.conf.json to show or hide the window:

import { WebviewWindow } from "@tauri-apps/api/webviewWindow";

const openSecondaryWindow = async () => {
  const w = await WebviewWindow.getByLabel("secondary");
  await w?.show();
};

Here's how the demo home page wires it up to a button:

<Field
  name="Secondary Window"
  description="A quick demonstration on how to open secondary windows"
>
  <Button size="xs" onClick={openSecondaryWindow}>
    Open Window
  </Button>
</Field>

Additional Windows

1. Define the Window

2. Create the Page

3. Export and Register the Route

4. Opening the Window

On this page