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

0views
C
CelesteAI
Description
Episode 3 of Tauri Patterns for Production — the official plugin ecosystem. Source code: https://github.com/GoCelesteAI/tauri_inkpad 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 --- Generated by Claude AI · part of the Tauri Patterns for Production series
Back to tutorials

Duration

Added to Codegiz

May 10, 2026

📖 Read the articleOpen in YouTube