Tauri 2 Plugins: fs · dialog · notification — Build a Real Editor in 100 Lines | Ep3

Episode 3 of *Tauri Patterns for Production* — the official plugin ecosystem. Tauri 2 has a real plugin layer. Almost every desktop-app feature you'd want — files, native dialogs, OS notifications, HTTP, SQL, key/value persistence, the updater — already has an official plugin. Most of them are pure JS APIs you can call after a single `tauri add` command. In this episode we build **Inkpad**, a minimal text editor, using three plugins end to end: - **plugin-dialog** — native file picker / save panel - **plugin-fs** — read and write files on disk - **plugin-notification** — OS-level notification banners What You'll Learn: - Add a plugin with one command. `pnpm tauri add dialog` updates Cargo.toml, package.json, lib.rs, and capabilities/default.json in one shot. No manual wiring. - Why most Tauri plugins need zero Rust code. The whole surface area lives in @tauri-apps/plugin-name. You import functions and call them; lib.rs only registers the plugin on the builder. - Capabilities — Tauri's permission gate. Every plugin call goes through capabilities/default.json; if the permission isn't declared, the call errors at runtime. Default permissions are dev-friendly; for production you narrow them (e.g. fs:read-text-file instead of fs:default). - The dialog API: open() for file pickers, save() for save panels, both returning paths or null. Filter by extension, default path, multiple selection — all in the function options. - The fs API: readTextFile and writeTextFile. The same functions every Node developer knows, except they go through Tauri's permission layer. - The notification API: isPermissionGranted, requestPermission, sendNotification. Same shape as the web Notifications API. One grant, all future calls go through. - How three independent plugins compose: dialog returns a path, fs takes a path, notification takes a string. Each plugin knows only its own job; the composition lives in your code. Timestamps: 0:00 - Intro 0:23 - Preview — the official plugin ecosystem 1:00 - Step 1: Scaffold inkpad 1:30 - Step 2: pnpm tauri add — three plugins, three commands 2:10 - Step 3: Capabilities — the permission gate 2:40 - Step 4: lib.rs — register and forget 3:10 - Step 5: App.tsx — three imports, four buttons 6:30 - Step 6: Run inkpad 8:00 - Recap 9:30 - End screen Key Takeaways: 1. **Most Tauri plugins are pure JS APIs.** `tauri add` updates Cargo, npm, lib.rs, and capabilities in one shot. From then on, the frontend imports `@tauri-apps/plugin-name` and calls functions directly. You can build a complete file-editor app without a single `#[tauri::command]`. Reach for Rust commands only when you need state, secrets, or APIs the JS plugin doesn't expose. 2. **Capabilities are the permission gate.** Every plugin call from JS goes through `capabilities/default.json`. If the plugin's permission isn't listed there, the call errors at runtime. The `*:default` permission added by `tauri add` is dev-friendly. Production apps should narrow it — e.g. `fs:read-text-file` instead of `fs:default` — so a compromised webview can't use the plugin's full surface. 3. **Plugins compose without coordination.** dialog.open returns a path. fs.readTextFile takes a path. fs.writeTextFile takes a path and a string. sendNotification takes a title and body. None of them know about the others; the composition is your code. This is the strength of the plugin model — each plugin has one job, one permission scope, one JS API. 4. **Three commands cover the bulk of "I need to talk to the OS."** dialog for picking, fs for reading/writing, notification for "I did the thing." When you go to build a real desktop feature (export to file, save settings, alert on background work), this trio shows up over and over. Internalise the pattern once; reuse it everywhere. 5. **The plugin you DON'T add is just as important.** Each registered plugin expands the JS surface area. Each granted capability is a permission a compromised webview could use. Add only what you need; tighten capabilities to the smallest set; revisit periodically. Tauri's value over Electron is partly the plugin opt-in model — use it. This channel is run by Claude AI. Tutorials AI-produced; reviewed and published by Codegiz. Source code at codegiz.com. #Tauri #Tauri2 #Rust #DesktopApp #React #TypeScript #Plugins #Filesystem #Notifications #ClaudeAI