I hear this a lot, and it's not true anymore. With Tauri, you can build a desktop app using the frontend skills you already have. In this post I'll walk through how I set it up, and the parts that confused me along the way.

1. Why Tauri?

Tauri has two parts. Your UI runs inside the operating system's own webview, and the backend is written in Rust. Because it doesn't bundle a whole browser the way Electron does, the installers are small. You also get Rust's speed and safety for anything heavy.

2. Setting up a new project

If you're new to Tauri, start from scratch. It's much easier to see what each file does.

npm create tauri-app@latest

The CLI asks a few questions:

• Identifier: usually a reverse domain, like com.yourcompany.app

• Frontend language: TypeScript/JavaScript (I'd pick this)

• Package manager: pnpm, yarn, npm or bun

• UI template: React, Vue, Svelte, Solid and so on

Then install and run:

cd project_name
npm install
npm run tauri dev

A native window opens with your app inside.

2.1 Adding Tauri to an existing React project

npm install --save-dev @tauri-apps/cli
npm install @tauri-apps/api
npx tauri init

tauri init creates a src-tauri folder with the Rust side. Add "tauri": "tauri" to the scripts in package.json, then npm run tauri dev will work.

3. How the frontend talks to Rust

Think of it as two programs. React renders the UI, and Rust has the native powers (filesystem, OS APIs, heavy logic). They talk through commands: you write a Rust function, then call it from JavaScript with invoke.

Rust side:

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

React side:

import { useState } from "react";
import { invoke } from "@tauri-apps/api/core";

function App() {
  const [name, setName] = useState("");
  const [greeting, setGreeting] = useState("");

  async function greetUser() {
    setGreeting(await invoke("greet", { name }));
  }

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={greetUser}>Greet</button>
      <p>{greeting}</p>
    </div>
  );
}

export default App;

The string "greet" must match the Rust function name, and the argument keys must match the Rust parameter names.

3.1 The setup hook

.setup(|app| { ... }) runs once, after Tauri initializes and before the app starts. It's the right place to touch windows, register state, start background tasks or load plugins.

use tauri::{Emitter, Manager};

.setup(|app| {
    let window = app.get_webview_window("main").unwrap();
    window.set_title("My App").unwrap();

    app.emit("backend-ready", "Rust side is up")?;
    Ok(())
})

The |app| { } part is just a Rust closure, similar to an arrow function in JS. Don't forget to return Ok(()) at the end.

To receive the event in React:

import { listen } from "@tauri-apps/api/event";

listen("backend-ready", (event) => {
  console.log(event.payload);
});

One catch: an event emitted inside setup can fire before your React code has registered a listener, so you might miss it. For anything critical, let the frontend ask for the data with invoke.

3.2 Running things in the background

Events can go the other way too. Here Rust fires an event every 30 seconds, and React reacts to it. I use this pattern to trigger data sync.

// awake_interval.rs
use std::time::Duration;
use tauri::{AppHandle, Emitter};

pub async fn background_timer(app_handle: AppHandle) {
    let mut interval = tokio::time::interval(Duration::from_secs(30));
    loop {
        interval.tick().await;
        if let Err(e) = app_handle.emit("background_sync_trigger", ()) {
            eprintln!("Failed to emit event: {}", e);
        }
    }
}

// lib.rs
mod awake_interval;

pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            let handle = app.handle().clone();
            tauri::async_runtime::spawn(awake_interval::background_timer(handle));
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// useBackgroundSync.js
import { useEffect, useState } from "react";
import { listen } from "@tauri-apps/api/event";

export default function useBackgroundSync(syncFn) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const unlisten = listen("background_sync_trigger", async () => {
      setCount((c) => c + 1);
      try {
        await syncFn?.();
      } catch (error) {
        console.error("Sync error:", error);
      }
    });

    return () => {
      unlisten.then((fn) => fn());
    };
  }, [syncFn]);

  return count;
}

Wrap syncFn in useCallback where you use the hook, otherwise the listener gets re-registered on every render.

3.3 Controlling the window

You can also control how the window behaves. For example, instead of quitting when the user clicks the close button, you can hide the window so the app keeps running in the background:

.setup(|app| {
    if let Some(window) = app.get_webview_window("main") {
        let w = window.clone();
        window.on_window_event(move |event| {
            if let tauri::WindowEvent::CloseRequested { api, .. } = event {
                api.prevent_close();
                let _ = w.hide();
            }
        });
    }
    Ok(())
})

Be careful with this. If you hide the window, the user needs a way to bring it back, usually a system tray icon. Blocking the close button with no way back is a bad experience.

For launching on startup, use the official autostart plugin:

npm run tauri add autostart

After that, you can enable it from Rust using the plugin's manager.

4. Making network calls

The webview's normal fetch still works, but it follows browser rules, so the server has to allow CORS. In a desktop app that gets annoying, because you often don't control the server.

The Tauri HTTP plugin solves this by making the request from the Rust side. It also lets you restrict which URLs the app can reach.

npm run tauri add http

This installs both the Rust crate and the JS package. Then allow your URLs in src-tauri/capabilities/default.json:

{
  "identifier": "default",
  "windows": ["main"],
  "permissions": [
    "core:default",
    {
      "identifier": "http:default",
      "allow": [
        { "url": "http://localhost:9000/*" },
        { "url": "https://your-api.com/*" }
      ]
    }
  ]
}

Any URL not on this list is blocked. Now import fetch from the plugin:

import { fetch } from "@tauri-apps/plugin-http";

export const userLogin = async ({ email, password }) => {
  const BASE_URL = import.meta.env.VITE_BASE_URL;

  const response = await fetch(`${BASE_URL}/auth/login`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });

  return response.json();
};

5. Wrapping up

You don't need to learn Rust to start with Tauri. Commands, events and the SETUP hook are enough to get a real app running, and you can pick up Rust as you go. 🚀

In a recent article, I introduced Dexie.js, a wrapper library that simplifies working with IndexedDB. I should have published this article first, the one on using IndexedDB with its native API. You only truly appreciate the abstraction Dexie provides once you’ve felt the pain of writing raw IndexedDB code yourself.

So I won’t revisit Dexie here, since my earlier post already covers it in detail. If you’re curious how it smooths things over, read that article after finishing this one.

Why IndexedDB?

You might wonder: if we have localStorage which is easy to use, why do we need IndexedDB at all?

That’s a fair question but only partially correct. Let's talk about localStorage first:

• localStorage has a limited capacity, usually around 5–10MB.

• Its operations are synchronous, meaning large data inserts or updates can block the UI and make the app unresponsive.

• It’s suitable for small, frequent, and simple data operations.

In contrast, IndexedDB offers:

• Asynchronous operations which means it doesn’t block the main thread.

• Support for structured data stored in object stores (which you can think of as tables).

• Indexed querying, allowing you to query data more efficiently.

• Support for versioning and schema upgrades.

NOTE : WE CAN ONLY INCREMENT THE DATABASE VERSION, IF WE TRY TO DECREMENT THE VERSION THE onerror EVENT WILL TRIGGER.

Let’s Code: Setting Up IndexedDB with Native API

IndexedDB uses an event-driven architecture. So, the sequence in which you write operations doesn’t matter as much as how you handle events.

// Open a database connection
const database = indexedDB.open("MyDatabase", 1); 
// Pass: database name, and version number

step 1 : Create objectStore (Tables) and Indexes.

database.onupgradeneeded = (event) => {
    const db = event.target.result;

    if (!db.objectStoreNames.contains("students")) {
        const store = db.createObjectStore("students", { keyPath: "id" });

        // Indexes: (indexName, keyPath, options)
        store.createIndex("name", "name", { unique: false });
        store.createIndex("email", "email", { unique: true });
    }
};

step 2 : Insert Data

database.onsuccess = (event) => {
    const db = event.target.result;

    const transaction = db.transaction("students", "readwrite");
    const store = transaction.objectStore("students");

    const request = store.add({
        id: 1,
        name: "Viraj Nikam",
        email: "viraj@gmail.com"
    });

    request.onsuccess = (event) => {
        console.log("Data inserted successfully!", event.target.result);
    };

    request.onerror = (event) => {
        console.error("Failed to insert data:", event.target.error);
    };
};

IndexedDB Native API – CRUD Operations

1. Add Data (Create)

const request = store.add({
    id: 1,
    name: "Viraj Nikam",
    email: "viraj@gmail.com"
});

2. Get Data (Read)

a. Get by primary key (id)

const getRequest = store.get(1);

getRequest.onsuccess = (event) => {
    console.log("Record fetched:", event.target.result);
};

getRequest.onerror = (event) => {
    console.error("Error fetching record:", event.target.error);
};

b. Get by Index

const index = store.index("email");
const emailRequest = index.get("viraj@gmail.com");

emailRequest.onsuccess = (event) => {
    console.log("Record fetched by email:", event.target.result);
};

3. Update Data

To update, you first fetch the record, modify it, and then use put() (not add(), since add() will fail if the key already exists):

const getRequest = store.get(1);

getRequest.onsuccess = (event) => {
    const data = event.target.result;
    data.name = "Viraj S. Nikam"; // Updating the name

    const updateRequest = store.put(data);

    updateRequest.onsuccess = () => {
        console.log("Record updated successfully!");
    };
};

4. Delete Data

const deleteRequest = store.delete(1);

deleteRequest.onsuccess = () => {
    console.log("Record deleted successfully!");
};

deleteRequest.onerror = (event) => {
    console.error("Failed to delete record:", event.target.error);
};

Final Execution :

const database = indexedDB.open("MyDatabase", 1) // Here you need to pass name of the database and it's version

// add tables to your db over here at onupgradeneeded
database.onupgradeneeded((evt)=>{
    const dbInstance = evt.target.result;

    if(!dbInstance.objectStoreNames.contains("students")){
            const request = dbInstance.createObjectStore("students", {keyPath : "id"});
            //createIndex used to define the columns, Its necessary to define Indexes because it helps you at time of queries
            request.createIndex("name", "name", {unique : false}) // takes column name, accessar key for that perticular column, and object of the constraints
            request.createIndex("email", "email", {unique : true})
    }
})

//perform your queries over here
database.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction("students", "readwrite");
    const store = transaction.objectStore("students");

    // Add
    const addRequest = store.add({
        id: 2,
        name: "Jane Doe",
        email: "jane@example.com"
    });

    // Read by ID
    const getRequest = store.get(2);
    getRequest.onsuccess = () => console.log("Fetched:", getRequest.result);

    // Update
    getRequest.onsuccess = () => {
        const data = getRequest.result;
        data.name = "Jane D.";
        const updateRequest = store.put(data);
        updateRequest.onsuccess = () => console.log("Updated!");
    };

    // Delete
    const deleteRequest = store.delete(1);
    deleteRequest.onsuccess = () => console.log("Deleted record with ID 1");
};

Wrapping Up.

Working with native IndexedDB can feel a bit messy and confused due to its event-based flow. That’s exactly why libraries like Dexie.js exist to make your life easier.

But understanding the native API is crucial for debugging, customization, and appreciating how much a wrapper is actually helping you.

Thank You !☺️

If you’ve ever worked with IndexedDB, you know it can be a bit painful—lots of boilerplate and a complex API just to do simple things. That’s where Dexie.js comes in. It’s a lightweight wrapper that makes IndexedDB simple, clean, and developer-friendly.

I recently started building an offline-first application, and I needed something more powerful than localStorage and less messy than raw IndexedDB. After exploring a few options, Dexie.js turned out to be the perfect fit.

In this article, I’ll walk you through the basics—setting up a database, performing CRUD operations, and integrating it with React (don’t worry if you’re not into React, the concepts will still make sense).

Why I Chose Dexie.js for Offline Data Management.

Dexie.js is a smart wrapper around IndexedDB that makes working with local databases in JavaScript much easier and cleaner. If you’ve ever tried IndexedDB directly, you know how tricky it can be. Dexie simplifies that headache.

While building an offline-first application, one big challenge is choosing the right way to manage local data. localStorage is too limited, and working directly with IndexedDB feels like wrestling with unnecessary complexity.

Dexie.js—a lightweight and developer-friendly solution that keeps things simple while still giving you the power of IndexedDB under the hood.

Let’s write the code.

First, we need to set up the database instance:

import Dexie from "dexie";

const db = new Dexie('myDatabase');
            db.version(1).stores({
                    user : '++id, name, email, password, roleId',
                    tasks : '++id, title, description, isCompleted, createdAt, updatedAt'
            })

That’s it! This small setup gives you two tables: user and tasks. Now you can start performing different operations without the hassle of raw IndexedDB code.

CRUD Operations with Dexie.js

Below are the most common operations:

import db from 'path-to-db'
//Add Task
const addTaskToDB = async(data)=>{
    await db.tasks.add(data)
}

//Delete Task
const deleteTaskById = async(id)=>{
    await db.tasks.delete(id)
}

//Update Task
const updateTask = async(data)=>{
    await db.tasks.put(data)
}

//Get Task by Id
const getTaskById = async (id)=>{
    return db.tasks.get(id)
}

//Get all Tasks
const getAllTasks = async()=>{
    return db.tasks.toArray();
}

export {addTaskToDB}

Using Dexie in a React Component

Here’s a quick example to show how we can integrate it with React:

import {addTaskToDB} from 'actions'
const MyReactComponent = ()=>{
    const [newTask, setNewTask] = useState({
            title : "",
            description : ""
      });

    const addTask = async()=>{
        await addTaskToDB(newTask);
         globalThis.alert("Task Added")
    }

    const handelTaskInputChange = (evt)=>{
        const {name, value} = evt.target;
        setNewTask((prev)=>({...prev, [name]: value}))
     }


    return(
        <form onSubmit={addTask}>
            <input type='text' onChange={handelTaskInputChange} value={newTask.title}/>
            <input type='text' onChange={handelTaskInputChange} value={newTask.description}>
            <button>Add Task +</button>
        </form>
    )
}

Advance Queries

1. Suppose you need to update specific fields (like name) for multiple rows in a Dexie.js table based on their id. A common real-world scenario is when you have an array of objects, and you want to update the database to reflect new values where the id matches.

   Let’s break this down with an example:

const data = [
  { id: 1, name: "Sarthak" },
  { id: 2, name: "Shubham" },
  { id: 3, name: "Rahul" }
];

await db.tableName
  .where("id")
  .anyOf(data.map((row) => row.id))
  .modify((record) => {
    const updated = data.find((row) => row.id === record.id);
    if (updated) {
      record.name = updated.name;
    }
  });

Final Thoughts

If you’re tired of the limitations of localStorage or the complexity of IndexedDB, Dexie.js is the perfect middle ground. It’s fast, reliable, and a great tool for building offline-first applications.

I hope this guide helped you get started. If you’ve used Dexie before, share your experience in the comments!

Before I discovered React Hook Form, I realized I was a complete noob when it came to handling form data in React. I used to manage form state and validations using local state variables. While this approach works for simple forms, it quickly becomes messy and hard to scale as your form grows.

To make things more maintainable, I thought of lifting the state to a global level using something like Context API or even a state management library like Redux or Zustand. But that also felt like overkill for just managing form inputs and validations.

Lesson 2: Introduction.

React Hook Form is a lightweight library which uses react hooks to manage the form state and validations. It fits right into your existing react component structure, making it easy to build and manage forms without a lot of extra code.

Lesson 3: let's write and understand the code.

Managing form state usually means keeping track of local state with the useState hook, context api or any other state management library like redux or zustand. React hook form takes care of this by providing you its own context api.

import {useForm, FormProvider} from 'react-hook-form';


const ReactHookFormExample = ()=>{

  const rfhMethods = useForm({
    defaultValues : {
            name: "Jhon doe"
            mobile : 4523652145
        }
    });

  const {register, reset, handelSubmit, formState:{errors}} = rfhMethods;

  const onSubmit = (formData)=>{
    console.log(formData, "FORM_DATA");
    reset();
  }


return (
    <FormProvider {...rfhMethods}>
       <form>
            <div className='user-name'>
                <input type="text" {...register("name")} />
                 {errors.name && <span>{errors.name.message}</span>}
            </div>
            <div className='user-mobile'>
                 <input type="number" {...register("mobile")}>
                  {errors.mobile && <span>{errors.mobile.message}</span>}
            </div>
       </form>
    </FormProvider>
        )
}

In the above example, useForm provides several methods & properties to manage the form:

1. register : a function to register the fields.

2. handelSubmit : a function to handel the form submission.

3. formState : its an object containing the form state with validation errors.

FormProvider is the context provider given to us by react hook form, to handel the form state in the nested components. eg:

const {useFormContext} from 'react-hook-form';

const nestedChildComponent = ()=>{
    const {register} = useFormContext();

return (
        <div className='user-city'>
            <select {...register("city")}>
                <option value='pune'>Pune</option>
                <option value='amdabad'>Amdabad</option>
                <option value='mumbai'>Mumbai</option>
            </select>
        </div>
       )
}

Here, with the useFormContext method you can access all the methods that useForm provides.

Lesson 4 : Traditional Forms in React – Why It's a Struggle

When you're building forms using plain React (also called "traditional forms"), things can quickly get messy. You have to manually handle every input, track changes, validate data, and manage errors — all by yourself. It may sound simple at first, but even a basic form can turn into a lot of boilerplate code.

import React, {useState} from "react";

export default const TraditionalForms = ()=>{
    const [formData, setFormData] = useState({name:"", email:""});
    const [errors, setErrors] = useState({});

    const handelInputChange = (evt)=>{
        const {name, value} = evt?.target;
            setFormData((prev)=>({...prev, [name]: value}))
     }

    const onSubmit = (evt)=>{
        evt.preventDefault();

        const errors = {};
        if(formData.name?.length < 2) errors.name = "name should contain atlist 2 characters";
        if(!/\S+@\S+\.\S+/.test(formData.email)) errors.email = "enter valid email";

        setErrors(errors);

        if(Object.keys(errors).length===0){
            console.log("FORM_DATA", formData);
          }

    };


    return (
        <form onSubmit={onSubmit}>
            <input type='text' name='name' value={formData.name} onChange={handelInputChange} />
            {errors?.name && <span>{errors.name}</span>}

            <input type='email' name='email' value={formData.email} onChange={handelInputChange} />
            {errors?.email && <span>{errors.email}</span>}

            <button type='submit'> Submit </button> //type : "submit" | "button" | "reset" by default to submit
        </form>
           )

If you're just starting out, building forms manually is a great way to learn. But as your project grows, you'll definitely want to use a form library to avoid drowning in state management and validation logic.

Traditional forms teach you the basics — but modern form libraries help you move faster and write cleaner code.