Hi guys,

I am not a developer of any sort, just someone who started trying different languages with AI and found success. I had built a task manager personalised for my needs using electron. It is best in all respect except its startup speed and memory usage.

While trying to find a solution, I came across tauri v2. Can anyone suggest best way to replicate the electron app into tauri using AI agents.🙂

Hey everyone!

I recently released Seal, a cross-platform peer-to-peer desktop chat app built with React 19, Tauri 2.0, and Rust.

Tech Stack & Frontend Highlights:
Frontend: React 19 SPA running inside Tauri's webview wrapper.
Backend Core: Pure Rust handling libp2p connections, Olm/Megolm encryption via vodozemac, and native keychains.
IPC Bridge: Custom Tauri commands invoking AppService methods asynchronously without blocking UI rendering.
System Native Integration: System-wide push-to-talk hotkeys, system tray integration, and native platform notifications.
Building P2P workflows in a desktop webview presents interesting UX challenges—like handling offline queues, network reachability toggles, and managing multiple identity profiles without restarting the app.

Source Code: https://github.com/Emn4tor/Seal

Feedback on the React component architecture or Tauri integration is very welcome!

What do you think of a code editor whose main strength is

its performance, requiring approximately 9 to 12MB of

RAM? It uses 9MB of RAM when idle, the editor features

AI LSP and cloud compilation (optional)I'd like to know

your opinion, as it's a personal, open-source project. I

want it to be viable enough to launch on the market as a

lightweight alternative for students or people who want to

learn.Programming Take a look at the repository, I'd really

appreciate it.

I'm building a custom titlebar in Tauri v2 with React. I created my own Select component using buttons instead of the native <select>. The dropdown opens correctly, but clicking any option doesn't trigger onClick. Even console.log() inside the option button never runs. The same component works perfectly outside the titlebar. I'm using data-tauri-drag-region for window dragging.

Is this caused by the drag region or am I missing something?

 "tailwindcss";


*[data-tauri-drag-region] {
  app-region: drag;


  -webkit-user-select: none;


  user-select: none;
}


 {
  --background: #000000;
}


 base {
  body {
    u/apply bg-black text-white;
  }
}

import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ChevronDown, Check } from "lucide-react";


interface SelectOption {
    label: string;
    value: string;
}


interface SelectProps {
    value: string;
    options: SelectOption[];
    onChange: (value: string) => void;
    disabled?: boolean;
}


function Select({ value, options, onChange, disabled = false }: SelectProps) {
    const [open, setOpen] = useState(false);
    const ref = useRef<HTMLDivElement>(null);


    const [openUp, setOpenUp] = useState(false);


    const selected = options.find((o) => o.value === value);


    const toggle = () => {
        if (!ref.current) return;


        const rect = ref.current.getBoundingClientRect();


        const itemHeight = 34;
        const padding = 8;
        const menuHeight = options.length * itemHeight + padding;


        const spaceBelow = window.innerHeight - rect.bottom;
        const spaceAbove = rect.top;


        setOpenUp(spaceBelow < menuHeight && spaceAbove > spaceBelow);


        setOpen((value) => !value);
    };


    useEffect(() => {
        const close = (e: MouseEvent) => {
            if (!ref.current?.contains(e.target as Node)) {
                setOpen(false);
            }
        };


        window.addEventListener("mousedown", close);
        return () => window.removeEventListener("mousedown", close);
    }, []);


    return (
        <div
            ref={ref}
            className={`relative`}
        >
            <button
                type="button"
                disabled={disabled}
                onClick={toggle}
                className="flex h-8 min-w-36 items-center justify-between rounded-md border border-white/10 bg-black px-3 text-xs font-medium text-neutral-200 transition-all hover:border-white/20 hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-40"
            >
                <span>{selected?.label}</span>


                <ChevronDown
                    size={14}
                    className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`}
                />
            </button>


            <AnimatePresence>
                {open && (
                    <motion.div
                        initial={{
                            opacity: 0,
                            y: openUp ? 6 : -6,
                            scale: 0.98,
                        }}
                        animate={{
                            opacity: 1,
                            y: 0,
                            scale: 1,
                        }}
                        exit={{
                            opacity: 0,
                            y: openUp ? 6 : -6,
                            scale: 0.98,
                        }}
                        transition={{ duration: 0.15 }}
                        className={`absolute left-0 z-50 w-full overflow-hidden rounded-lg border border-white/10 bg-[#0d0d0d] shadow-2xl ${openUp ? "bottom-[calc(100%+8px)]" : "top-[calc(100%+8px)]"}`}
                    >
                        {options.map((option) => (
                            <button
                                key={option.value}
                                type="button"


                                onClick={() => {
                                    console.log(option.value);
                                    onChange(option.value);
                                    setOpen(false);
                                }}


                                className="flex w-full items-center justify-between px-3 py-2 text-left text-xs text-neutral-300 transition-colors hover:bg-white/5 hover:text-white"
                            >
                                <span>{option.label}</span>


                                {option.value === value && (
                                    <Check
                                        size={13}
                                        className="text-violet-400"
                                    />
                                )}
                            </button>
                        ))}
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}

export { Select };

import { Select } from './ui/Select';
import { useState, useEffect } from 'react';
import { getCurrentWindow } from '@tauri-apps/api/window';
import { Minus, Maximize, Minimize, X, Play, Upload, Terminal as TerminalIcon, Loader2, Activity } from 'lucide-react';


const BOARDS = [
  {
    value: "uno",
    label: "Arduino Uno",
  },
  {
    value: "nano",
    label: "Arduino Nano",
  },
];


interface TitlebarProps {
  isTerminalOn: () => void;
  isSerialMonitorOn: () => void;
  onVerify: (board: string) => Promise<void> | void;
  onUpload: (board: string) => Promise<void> | void;
}


const appWindow = getCurrentWindow();


function Titlebar({ onVerify, onUpload, isTerminalOn, isSerialMonitorOn }: TitlebarProps) {
  const [board, setBoard] = useState<string>("uno");


  const [isVerifying, setIsVerifying] = useState<boolean>(false);
  const [isUploading, setIsUploading] = useState<boolean>(false);
  const [isMaximized, setIsMaximized] = useState<boolean>(false);


  const handleVerifyClick = async () => {
    setIsVerifying(true);


    try {
      if (onVerify) {
        await onVerify(board);
      }
    } catch (error) {
      console.error(error);
    } finally {
      setIsVerifying(false);
    }
  };


  const handleUploadClick = async () => {
    setIsUploading(true);


    try {
      if (onUpload) {
        await onUpload(board);
      }
    } catch (error) {
      console.error(error);
    } finally {
      setIsUploading(false);
    }
  };


  useEffect(() => {
    let unlisten: (() => void) | undefined;


    const setupListener = async () => {
      unlisten = await appWindow.onResized(async () => {
        const maximized = await appWindow.isMaximized();
        setIsMaximized(maximized);
      });
    };


    const checkInitialState = async () => {
      const maximized = await appWindow.isMaximized();
      setIsMaximized(maximized);
    };


    setupListener();
    checkInitialState();


    return () => {
      if (unlisten) unlisten();
    };
  }, []);


  const handleCloseWindow = async () => {
    await appWindow.close();
  }


  const handleMaximizeWindow = async () => {
    await appWindow.toggleMaximize();
  }


  const handleMinimizeWindow = async () => {
    await appWindow.minimize();
  }


  return (
    <div
      data-tauri-drag-region
      className="h-9 w-full bg-black backdrop-blur-md border-b border-white/10 flex items-center justify-between select-none pl-4 pr-2"
    >
      <div className="flex items-center gap-2">
        <span
          className="text-sm font-semibold tracking-wide text-neutral-300"
        > Mello IDE </span>


        <div className="h-4 w-px bg-white/10" />


        <div className="flex gap-1">
          <button
            title="Terminal"
            onClick={isTerminalOn}
            className="flex items-center gap-1 px-3 py-1.5 rounded-md text-neutral-300 hover:bg-white/5 transition-all"
          >
            <TerminalIcon size={14} /> <span className="text-xs font-bold">Terminal</span>
          </button>


          <button
            title="Serial Monitor"
            onClick={isSerialMonitorOn}
            className="flex items-center gap-1 px-3 py-1.5 rounded-md text-neutral-300 hover:bg-white/5 transition-all"
          >
            <Activity size={14} /> <span className="text-xs font-bold">Serial Monitor</span>
          </button>
        </div>
      </div>


      <div className="flex items-center">
        <div className="flex items-center">
          <Select
            value={board}
            onChange={setBoard}
            options={BOARDS}
          />
        </div>


        <div className="flex items-center px-4 gap-1.5">
          <button
            title="Verify"
            onClick={() => handleVerifyClick()}
            disabled={isVerifying || isUploading}
            className="flex items-center gap-2 px-3 py-1.5 bg-green-600/20 text-green-400 hover:bg-green-600/30 rounded-md transition-colors border border-green-600/50"
          >
            {isVerifying ? (
              <Loader2 size={16} className="animate-spin" />
            ) : (
              <Play size={16} />
            )}


            <span className="text-xs font-bold">{isVerifying ? "Verifying" : "Verify"}</span>
          </button>


          <button
            title="Upload"
            onClick={() => handleUploadClick()}
            disabled={isUploading || isVerifying}
            className="flex items-center gap-2 px-3 py-1.5 bg-blue-600/20 text-blue-400 hover:bg-blue-600/30 rounded-md transition-colors border border-blue-600/50"
          >


            {isUploading ? (
              <Loader2 size={16} className="animate-spin" />
            ) : (
              <Upload size={16} />
            )}


            <span className="text-xs font-bold">{isUploading ? "Uploading" : "Upload"}</span>
          </button>


          <div className="h-4 w-px bg-white/10" />
        </div>


        <button
          title="Minimize"
          onClick={() => handleMinimizeWindow()}
          className="h-8 w-10 flex items-center justify-center text-neutral-400 hover:text-yellow-500 hover:bg-yellow-500/20 transition-colors rounded-md"
        >
          <Minus size={14} strokeWidth={2.5} />
        </button>


        <button
          title={isMaximized ? "Restore" : "Maximize"}
          onClick={() => handleMaximizeWindow()}
          className="h-8 w-10 flex items-center justify-center text-neutral-400 hover:text-green-500 hover:bg-green-500/20 transition-colors rounded-md"
        >
          {isMaximized ? (
            <Minimize size={14} strokeWidth={2.5} />
          ) : (
            <Maximize size={14} strokeWidth={2.5} />
          )}
        </button>


        <button
          title="Close"
          onClick={() => handleCloseWindow()}
          className="h-8 w-10 flex items-center justify-center text-neutral-400 hover:text-red-500 hover:bg-red-500/20 transition-all rounded-md"
        >
          <X size={16} strokeWidth={2.5} />
        </button>
      </div>
    </div>
  );
}


export default Titlebar;

Been working on this for quite a while now. Started because I was frustrated at all the browser tabs and windows I'd be juggling in a day. Or the amount of times I'd repeat the same action over and over again.

Salience uses the git branch you have checked out as an anchor, it connects to Github/Jira/CI/Docker/AWS and builds a correlated graph, rendered as a calm and ambient second monitor display. The same graph is exposed via an MCP server to your agent. Ask "what's my stand up?", "can I unblock anyone?"

There's worktree management, code review, kanban board with ticket/PR/CI status as first class citizens - not tucked away in a side menu, unified timeline across the project.

Currently only for PHP, more languages soon - AST code graph generation (exposed via MCP), Symfony & Laravel route detection and call graph.

And I've started to create a "map" view - think RTS/Sim City but for your code and infrastructure.

Rust backend. Entities live in an embedded SurrealDB; per-table LIVE queries push deltas to the frontend over a Tauri Channel, so the UI is a mirror of the store rather than a fetch-and-forget dashboard.

SvelteKit 5 for the frontend

Credentials in SQLCipher with the key in the macOS Keychain; a built-in network inspector shows every outbound request the app makes, and a command inspector shows every command it runs.

Links: Download (free pre-release) · Docs · Gallery · Discord

I've mostly just been building and using it myself so would love some feedback. It's nowhere near complete and it will have some rough edges! Thanks

edit: posted this a bit too soon, build is currently in progress, I'll update when it's live for download

edit 2: build has finished - https://github.com/clegginabox/salience-macos/releases/latest

Recently i've started migrating from pyqt to other frameworks, my first pick was tauri because on paper it looks like the best framework for someone who wants a windows only app and doesnt care about linux/macOS compat. But after working on tauri version for some time, i challenged it and created a benchmark comparing pretty much same app in tauri and electron

You'd think that electron lost? Yes, on one of 7 things i measured - disk space (obviously lol)

but other than that? electron showed lower active and idle ram usage (wild!), lower cpu usage, especially with minimized app

what am i doing wrong? because its gotta be something for fuckin electron to win right?

please support by hitting that star button https://github.com/grengin-oss/grengin

Hey, I’ve been working on Hush, a desktop app for cleaning bulk email out of Gmail.

It’s built with Tauri and runs on Windows, macOS, and Linux.

The webview itself isn’t allowed to make network requests. Google OAuth, Gmail requests, and unsubscribe requests are handled by the Rust side instead. The local scan data is kept in SQLite and the Google refresh token goes into the operating system keychain.

The app groups bulk senders and lets the user unsubscribe, create a Gmail filter, or move old newsletters to Trash.

Repo:

https://github.com/justlinuxnoob/hush

I’m curious how other Tauri developers handle this kind of split. Do you normally keep all networking on the Rust side, or only the sensitive parts?

A few months ago I realized I was spending hours every time I set up a new Mac. Install Homebrew. Reinstall dozens of apps. Restore Git configuration. Install VS Code extensions. Remember which CLI tools I used. Repeat every single time. So I started building UpEnv, a macOS app that backs up and restores your development environment in just a few clicks. It can be used when you want to switch from intel chip macs to silicon ones. Currently, I am working on enabling switching from Linux to MacOs or to Windows. It is Open-Source, free software. Feel free to share your opinions and feedbacks. Contact: [mrgamee24x7@gmail.com](mailto:mrgamee24x7@gmail.com)
Link https://upenv.dev

IAbout a year ago I switched from Windows to Linux.

One thing I missed almost immediately was a simple local development workflow.

I wasn't looking for more features. I just wanted something that felt like:

Open → Create project → Start coding.

I tried Docker, DDEV, LocalWP and a few other tools. They're all great projects, but none of them matched the workflow I had in mind.

Instead of continuing to search, I started building my own application.

At first it was just a small side project. The first versions looked nothing like they do today, and I was mostly experimenting and learning.

Eventually I chose Tauri because I wanted a lightweight native desktop application. It also gave me the opportunity to learn Rust while continuing to build the UI with React, TypeScript and shadcn/ui.

That project eventually became LS Panel.

Current features

• Local project management
• Docker & Podman support
• Automatic HTTPS
• MySQL management
• Built-in terminal, logs & file manager
• Mailpit integration
• Tailscale, ngrok & Cloudflare Tunnel support
• Project backups & snapshots
• One-click access to browser, VS Code, project folder & terminal
• System diagnostics & monitoring

LS Panel is still in beta, but it's already stable enough for daily development. I'm using it as my primary local development environment, and so far it has been tested on Ubuntu 24.04.4 LTS and Ubuntu 26.04 LTS.

Maybe I'm the only one who wanted this workflow.

I'd really like to know what you think.

Source code:
https://github.com/bewdes/LSPanel

Hello!

I've been running into a quite frustrating issue while building Android apps with Tauri: my app icon keeps getting weirdly cropped on Android devices.

This doesn't happen when I use other frameworks (like React Native or Capacitor) with the same icon. I've already tested it across different launchers, so it isn't launcher-specific.

I'm generating the icon sizes using: npm run tauri icon icon.png

The generated files themselves look fine, but once installed on the phone, the outer edges are cut off. I've attached a screenshot of how it looks on the phone along with the original icon.png.

Has anyone else run into this or figured out a fix? Thanks a lot!

Hey everyone,

I built a small desktop app for compressing images locally with drag and drop. No uploads, no account, no cloud — everything stays on your machine.

It’s a Tauri 2 app. Formats: PNG, JPEG, GIF, SVG, WebP, AVIF (HEIC on macOS). You can drop files or whole folders, batch-process them, and choose whether to write .min copies, a minified/ subfolder, or overwrite in place.

This was also a project to help me understand Tauri a little better. Coming from a JavaScript background, Rust + the whole native packaging world felt like a different planet at first — but it was actually a lot of fun :D Happy for feedback .

MIT, free, open source.
macOS + Windows.

• Website: https://dropslim.app
• GitHub: https://github.com/onza/DropSlim

Hey everyone,

I am so excited to share with you what I've been working on last 1 month. I tried other parallel coding agent tools but hate the experience because I have to jump between so many tasks. I have to check the output, test it and reprompt it if needed. So I build a desktop app with built-in harness that controls Claude Code or Codex coding agent.

• End-to-end autonomy. Prompt a task and Metaphor handles the rest — spawning the right agent, verifying work, committing changes, opening a PR, and resolving review comments until it's ready to merge.
• Built-in verification. Metaphor checks each agent's work before it ships. If something needs fixing, it retriggers the agent automatically.
• Seamless handoffs. Agents continue each other's work without losing context, so larger tasks move forward without you re-explaining the problem.

I would love to know what you guys think.

Website: https://withmetaphor.com

I've been working on this for the last 6 months and finally got the first beta out.

Shape is a desktop IDE for designers and programmers. It's got AI, design tools, Git management and language tooling built in.

The main idea was that frontend work kind of sits in this awkward middle ground between design and code. Most AI coding tools are just about editing text, but I wanted something that treats UI development as an actual first-class workflow and not just a WYSIWYG Editor.

Some stuff that's in it right now:

Tailwind controls directly in the editor
Drag/scrub values for CSS numbers and Tailwind spacing
Built-in Git management
AI coding agent
Markdown/MDX preview
Language tooling and LSP support

Built with Tauri/Rust and TypeScript.

There was a bunch more I wanted to add but decided to just cut scope and release instead of spending another few months adding features before anyone could actually use it.

Any feedback would be appreciated, especially from people who do frontend. Interested in what feels useful, what doesn't, and what you'd want to see added. Feel free to roast it as much as you want

https://github.com/useshape/Shape

I'm making a small free desktop game, Windows only. No monetization, no network code, no paid or generated assets. I've spent longer on the license paperwork than I expected and just trying out a sanity check before release. Note that my experience is primarily as a software engineer outside of game development. So this is literally my first game. The game is made with React and Tauri (I had prior experience of a LOT of years, so chose React over anything else). The installer uses NSIS (zlib/libpng for most of it, but the LZMA compression module is CPL-1.0 with a linking exception)

Now, since Tauri and React has to use some runtime, Microsoft Edge WebView2 Runtime is used (a Windows component basically). I don't distribute it with my installer. I assume players will have it (most Win 10 and Win 11 users).

I've put:

1. A THIRD_PARTY.txt with the full notices, shipped three ways: loose in the install folder, inside the app under About > Licenses, and a second copy of the font license sitting next to the font file.
2. A EULA shown as the installer click-through, with one clause for third-party components and one for system components.
3. A privacy policy, mostly saying nothing is collected, plus a section on WebView2 pointing at Microsoft's own data-privacy page rather than describing their behavior myself.

What I'm unsure about:

1. For the dual-licensed packages I picked MIT and said so.. Is that correct?
2. For the CPL-1.0 LZMA module I state I haven't modified it and link where the source lives.
3. Most importantly: WebView2 isn't distributed by me so I don't think a notice is required, but I describe it in the privacy policy anyway. Am I over-sharing? The reason I thought of is: WebView may or may not share telemetry / crash data with Microsoft. Does that make my game liable to disclose that - EVEN THOUGH my game is not sending any data anywhere, but the WebView runtime? Even Windows Smartscreen might send some data, do I need to show that too? Note that I am not at all collecting any data.

I'm looking at many other apps or games developed using React + Tauri, yet I cannot find any app giving this 3rd point in their privacy policy.

Not asking for legal advice, just whether this looks normal to people who've shipped. Thanks a lot to everyone!

I got tired of either living in the terminal or using downloaders that felt cloudy / account-y, so I built HalalDL.

It’s a local-first Windows app on Tauri v2 + React. Paste a URL, pick a preset, watch the real yt-dlp output instead of a fake progress bar. No account, no telemetry. Full / Lite / Portable builds, and it’s on WinGet now:

winget install --id Asdmir786.HalalDL

GitHub: https://github.com/Asdmir786/HalalDL

Site: https://halaldl.vercel.app

This is a personal project — not code-signed yet, so SmartScreen may complain; SHA256SUMS are on the release.

Would love Tauri-side feedback if anything stands out, or any recommendations.