This plugin provides APIs to display and manage the macOS QuickLookUI Preview Pane.
Screen.Recording.2026-08-25.at.12.42.44.AM_converted.mp4
tauri-plugin-quicklook being used in production to power Cosmil, a macOS file manager built with Tauri.
| Platform | Supported |
|---|---|
| Linux | x |
| Windows | x |
| macOS | ✓ |
| Android | x |
| iOS | x |
Under the hood this crate makes use of the quicklook crate,
which provides a general purpose easy-to-use Rust wrapper of QuickLookUI. If you need to access QuickLookUI
APIs within a non-Tauri Rust application, you should probably use quicklook.
You must install the core plugin by adding the following to your Cargo.toml file:
src-tauri/Cargo.toml
[dependencies]
tauri-plugin-quicklook = "0.1.0"You also can (and probably want to) install the JavaScript guest bindings using your preferred JavaScript package manager:
pnpm add tauri-plugin-quicklook
# or
npm add tauri-plugin-quicklook
# or
yarn add tauri-plugin-quicklookFirst you need to register the core plugin with Tauri:
src-tauri/src/lib.rs
fn main() {
tauri::Builder::default()
.plugin(tauri_plugin_quicklook::init())
.run(tauri::generate_context!())
.expect("error while running tauri application");
}Afterwards all the plugin's APIs are available through the JavaScript guest bindings.
import { domRectToWindowSourceFrame, setPreviewItems } from "tauri-plugin-quicklook";
// This function could be called when a user clicks a button or presses the spacebar
//
// This is naive, read below this code and see `setAndTrackPreviewElements`
async function displayPreviewPane() {
const imgFilePath = "/path/to/example-image/image.png";
const imgElement = document.getElementById("example-image");
await setPreviewItems([
{
url: `file://${imgFilePath}`,
srcFrame: await domRectToWindowSourceFrame(
getCurrentWindow(),
imgElement.getBoundingClientRect()
)
}
])
}Note: This is a naive implementation that assumes the user won't scroll, resize the window, and that the
preview items won't change while the preview pane is open. For a robust example covering edge
cases like the aforementioned, check out examples/tauri-app.