DEV Community: Bhavesh Mishra

Print Setu: Print from Browser to USB Printers Without Installing Drivers

Bhavesh Mishra — Thu, 25 Dec 2025 14:00:52 +0000

Have you ever needed to print directly from a web application to a USB printer without asking users to install drivers? If you're building POS systems, kiosk applications, or any offline-first web app that needs printing capabilities, you know the pain of traditional printing solutions.

I recently built Print Setu to solve exactly this problem. It's a lightweight, browser-compatible SDK that connects to USB printers via WebSocket - no drivers required!

🎯 The Problem

Traditional web printing faces several challenges:

Driver Installation Required: Users need to install and configure printer drivers
Browser Security Restrictions: Direct USB access from browsers is limited
Complex Setup: Setting up printing often requires technical expertise
Poor Offline Support: Most solutions require internet connectivity

For applications like retail POS systems, restaurant ordering kiosks, or thermal receipt printers, these limitations are deal-breakers.

💡 The Solution: Print Setu

Print Setu provides a simple yet powerful approach:

A lightweight WebSocket server runs locally (via Electron app or standalone service)
Your web application connects using the Print Setu SDK
Send print jobs directly from your browser to any USB printer
Everything works completely offline

Key Features

✅ No USB Drivers Required - Print directly from browser to USB printers

✅ Offline Support - Works completely offline via local WebSocket

✅ Auto-Reconnection - Handles disconnections gracefully

✅ TypeScript Support - Full type definitions included

✅ Framework Agnostic - Works with React, Vue, Angular, or vanilla JS

✅ Event-Driven Architecture - Subscribe to printer events and status updates

🚀 Quick Start

Installation

npm install print-setu

Basic Usage

import { PrinterService } from 'print-setu';

// Initialize the service
const printer = new PrinterService({
  url: 'ws://127.0.0.1:8899',
  apiKey: 'your-api-key-here'
});

// Connect to the service
await printer.connect();

// Scan for available printers
await printer.scanPrinters();

// Listen for discovered printers
printer.on('USB_PRINTERS_RESULT', (data) => {
  if (data.payload?.success) {
    console.log('Available printers:', data.payload.data);
  }
});

// Connect to a specific printer
await printer.connectPrinter('printer-id');

// Print data (base64 encoded)
await printer.print('printer-id', base64Data);

That's it! No complex configuration, no driver installation, just simple and intuitive APIs.

🎨 Real-World Example: React Integration

Here's how you can integrate Print Setu into a React application with a custom hook:

// usePrinter.js
import { useState, useEffect, useCallback } from "react";
import { PrinterService } from 'print-setu';

const printer = new PrinterService({ 
  url: 'ws://127.0.0.1:8899', 
  apiKey: "your-api-key" 
});

export function usePrinter() {
  const [printers, setPrinters] = useState([]);
  const [isScanning, setIsScanning] = useState(false);
  const [connectedPrinter, setConnectedPrinter] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Connect to WebSocket
    printer.connect();

    // Subscribe to events
    const unsubscribe1 = printer.on("USB_PRINTERS_RESULT", (data) => {
      if (data.payload?.success) {
        setPrinters(data.payload.data || []);
        setIsScanning(false);
      }
    });

    const unsubscribe2 = printer.on("PRINTER_CONNECTED", (data) => {
      if (data.payload?.success) {
        setConnectedPrinter(data.payload.data);
      }
    });

    return () => {
      unsubscribe1();
      unsubscribe2();
    };
  }, []);

  const scanPrinters = useCallback(async () => {
    setIsScanning(true);
    await printer.scanPrinters();
  }, []);

  const connectPrinter = useCallback(async (printerId) => {
    await printer.connectPrinter(printerId);
  }, []);

  const print = useCallback(async (printerId, base64Data) => {
    await printer.print(printerId, base64Data);
  }, []);

  return {
    printers,
    isScanning,
    connectedPrinter,
    error,
    scanPrinters,
    connectPrinter,
    print
  };
}

Using the Hook

import { usePrinter } from './usePrinter';

function PrinterComponent() {
  const {
    printers,
    isScanning,
    connectedPrinter,
    scanPrinters,
    connectPrinter,
    print
  } = usePrinter();

  const handlePrint = async () => {
    if (connectedPrinter) {
      const printData = btoa('Hello, Printer!');
      await print(connectedPrinter.id, printData);
    }
  };

  return (
    <div>
      <button onClick={scanPrinters} disabled={isScanning}>
        {isScanning ? 'Scanning...' : 'Scan Printers'}
      </button>

      <ul>
        {printers.map((printer) => (
          <li key={printer.id}>
            {printer.name}
            <button onClick={() => connectPrinter(printer.id)}>
              Connect
            </button>
          </li>
        ))}
      </ul>

      {connectedPrinter && (
        <div>
          <p>Connected to: {connectedPrinter.name}</p>
          <button onClick={handlePrint}>Print Test</button>
        </div>
      )}
    </div>
  );
}

🎪 Vue.js Support Too!

Print Setu works seamlessly with Vue.js as well:

<template>
  <div>
    <button @click="scanPrinters" :disabled="isScanning">
      {{ isScanning ? 'Scanning...' : 'Scan Printers' }}
    </button>

    <ul>
      <li v-for="printer in printers" :key="printer.id">
        {{ printer.name }}
        <button @click="connectToPrinter(printer.id)">Connect</button>
      </li>
    </ul>

    <div v-if="connectedPrinter">
      <p>Connected to: {{ connectedPrinter.name }}</p>
      <button @click="handlePrint">Print Test</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { PrinterService } from 'print-setu';

const printers = ref([]);
const isScanning = ref(false);
const connectedPrinter = ref(null);

const printer = new PrinterService({
  url: 'ws://127.0.0.1:8899',
  apiKey: 'your-api-key'
});

onMounted(async () => {
  await printer.connect();

  printer.on('USB_PRINTERS_RESULT', (data) => {
    if (data.payload?.success) {
      printers.value = data.payload.data || [];
      isScanning.value = false;
    }
  });

  printer.on('PRINTER_CONNECTED', (data) => {
    if (data.payload?.success) {
      connectedPrinter.value = data.payload.data;
    }
  });
});

const scanPrinters = async () => {
  isScanning.value = true;
  await printer.scanPrinters();
};

const connectToPrinter = async (printerId) => {
  await printer.connectPrinter(printerId);
};

const handlePrint = async () => {
  if (connectedPrinter.value) {
    const data = btoa('Hello from Vue!');
    await printer.print(connectedPrinter.value.id, data);
  }
};
</script>

🎯 Use Cases

Print Setu is perfect for:

Retail POS Systems: Print receipts instantly without driver hassles
Restaurant Ordering Systems: Send orders directly to kitchen printers
Kiosk Applications: Enable self-service printing at events or information centers
Warehouse Management: Print labels and shipping information on-demand
Healthcare Systems: Print patient wristbands and labels
Ticketing Systems: Print tickets at entry points

🏗️ Architecture

The architecture is straightforward:

┌─────────────────┐         WebSocket          ┌──────────────────┐
│                 │◄───────(ws://127.0.0.1)────►│                  │
│  Web Browser    │                             │  Local Service   │
│  (Your App)     │         Print Setu SDK      │  (Electron App)  │
│                 │                             │                  │
└─────────────────┘                             └────────┬─────────┘
                                                         │
                                                         │ USB
                                                         ▼
                                                  ┌─────────────┐
                                                  │   Printer   │
                                                  └─────────────┘

Your web app uses the Print Setu SDK
SDK communicates with a local WebSocket server (port 8899)
Server has direct USB access to connected printers
Everything runs locally - no internet required!

📦 Event-Driven API

Print Setu uses an event-driven architecture with consistent payload structure:

{
  payload?: {
    success: boolean;
    data?: any;
    error?: string;
  };
  error?: string;
}

Available Events

USB_PRINTERS_RESULT - Printer scan results
PRINTER_DISCOVERED - Individual printer discovered
PRINTER_CONNECTED - Printer connection status
PRINTER_DISCONNECTED - Printer disconnection status
PRINT_RESULT - Print job completion status
ERROR - General errors

🔧 Configuration Options

const printer = new PrinterService({
  url: 'ws://127.0.0.1:8899',        // WebSocket URL
  apiKey: 'your-api-key',             // Your API key
  maxReconnectAttempts: 5,            // Max reconnection attempts
  reconnectDelay: 2000,               // Delay between reconnects (ms)
  enableLogging: true                 // Enable console logging
});

🌟 Why Print Setu?

Developer-Friendly

Clean, intuitive API
Full TypeScript support
Comprehensive documentation
Framework agnostic

Production-Ready

Auto-reconnection handling
Event-driven architecture
Error handling built-in
Offline-first design

Easy Setup

No complex configuration
No driver installation
Works with existing USB printers
Quick integration

🚧 Getting Started

Download the Windows Service (Currently Windows only, Mac/Linux coming soon)
- Download from Google Drive
Install the NPM Package

   npm install print-setu

Try the Demo
- Visit demo.printsetu.dev
- See it in action with your USB printers
Check the Documentation
- Website: printsetu.dev
- GitHub: github.com/mishrabhavesh/print-setu

🗺️ Roadmap

[x] Windows support
[ ] macOS support
[ ] Linux support
[ ] Network printer support
[ ] Printer status monitoring
[ ] Print job queue management
[ ] Multiple printer support simultaneously

🤝 Contributing

Print Setu is open source! Contributions are welcome:

Report bugs via GitHub Issues
Submit pull requests
Suggest features
Improve documentation

📄 Browser Compatibility

Chrome/Edge 88+
Firefox 85+
Safari 14+
Opera 74+

🎬 Conclusion

Print Setu makes USB printing from web applications finally feel native. Whether you're building a POS system, kiosk application, or any web app that needs printing capabilities, Print Setu provides a clean, reliable solution without the driver installation headaches.

The best part? It's completely offline-capable, making it perfect for environments where internet connectivity isn't guaranteed.

Give it a try and let me know what you think! I'd love to hear your feedback and use cases.

Links:

🌐 Website: printsetu.dev
📦 NPM: npmjs.com/package/print-setu
💻 GitHub: github.com/mishrabhavesh/print-setu
🎪 Demo: demo.printsetu.dev

What printing challenges are you facing? Let me know in the comments! 👇

⚠ error handling🍵 understanding

Bhavesh Mishra — Tue, 22 Nov 2022 19:44:27 +0000

Hi, I was working with some lambda and even though there were error thrown my sentry was not logging the error and then I knew that something is wrong with my error handling mechanism.

Normally if you throw manual throw new Error or do console.error and your sentry will catch that provided you are not suppressing that error.
Lets me come with some example

rejectFunc = () => Promise.reject('rejected');
testFunc = () => Promise.resolve('1').then(a => console.log('resolved'));

Now if I do testFunc() the expected outcome is resolved which was logged by then block

Now lets throw some errors by ourself

testFunc = () => Promise.resolve('1')
  .then(a => {
    rejectFunc()
  })
  .catch(() => console.log('rejected'))

What is the outcome you expect?🤔

Should it will run the then block or catch block?

The catch block statement was not logged but why? there was an error correct as in red block the js engine throw that error Uncaught (in promise) rejected

Lets understand this, in the then block we don't have return hence the final return is undefined which is not an error and catch block didn't run.As the error was not handled by us.

Now lets run that same code again with returning the error

testFunc = () => Promise.resolve('1')
  .then(a => {
    return rejectFunc()
  })
  .catch(() => console.log('rejected'))

Here you can see the catch block was run also any other error by v8 engine was not thrown as we had handled the error by ourself.

Now lets go with async await(which I prefer over then/catch)

testFunc = () => Promise.resolve('1').then(a => { testVar }).catch(a => console.log(a))

I have a function with testVar declared which has no reference now if I run the code I will have

But If I use simple try catch with empty catch block which specify we are handling the error

No error was thrown the code specify we have handled the error even through we are not doing anything in catch block hence in these scenario the error will never reach to sentry.

Lets try one more thing
Now inside catch block I have console error with what ever the error I have

Now you can see the error was thrown and sentry will catch this one

So we should always handle the error properly always using console.log in catch block or not returning the promise and expecting the catch block is there which will handle the error for us is not going to help.

That's the end of this blog.

Please feel free to add something if I was wrong somewhere and also lets discuss in comment section if we have

React useUndo hook

Bhavesh Mishra — Sun, 05 Sep 2021 14:19:43 +0000

I am totally new in web development and this is my first blog, any sorts of suggestion or comments is welcome and that will help me to learn and grow.
So lets start with the useUndo hook.
Last week in our organization came with a requirement that we need to have a card that will have two options Accept and Decline, and after selecting any one of the option we will be giving the user a time period of let say 10 sec and with in this period they can undo their action.

eg --->

If they accept/ delete

So what i thought is to make a undo function which can help me with with this and also if i would like to use this undo function anywhere anywhere i will use it. So i came up with an useUndo hook, which was possible with React lifecycle

so lets discuss with the code and how i had implemented it.

First i will show the full code and then i will break it in different part and discuss about each of them.

First i have used useState react hook to

Invoke the undo function
store the timeout id
to check if the method execution is finished or not.

Next is the onUnload event-lisitener function

what this will do is it will throw and alert if you are trying to close the tab or window. We are doing this because as we are using setTimeout and clearTimeout so these are window scoped and each time we close or open a new tab a new scope is created so if we close the tab the the setTimeout which are web-api will be cleared from the call back queue and will not enter in the execution stack even after the time interval is over.

Hence we will listen for an event-listener i.e beforeunload.

Next the most important part according to me in this code is the useEffect part i.e

So what we are doing here is

First we check if invokeUndo is true or not and if so we add an event listener beforeunload on window. then we put our function inside the timeout which will be executed after 10000ms i.e 10s. Now the setTimeout web-api return a uniq number everytime you run it, which will be used to clear the timeout fucnction.

Inside the setTimeout we call the function which is resolveMethod() set the undoTimerId to null as the function execution is finished, setMethodExecuted to true which will be returned value and while using the hook if we have any action to perform after execution can be done, & setInvokeUndo(false) as the execution is finished.

Now the important part we need to do some clean-up on component-unmount so we will have a return statement in useEffect which will clear eventListener.

Now to invoke the undo we have invokeUndoMethod which will be a returned value and while using this hook we can use this.

we have an undoMethod which will perform the undo method i.e clearTimeout, setInvokeUndo to false.

Now we will have a final return statement

undoMethod to perform the undo action
invokeUndoMethod to invoke the undo or start undo method
isMethodExecuted this will tell if the method execution is completed or not.

Now while using it.

we can import this useUndo hook and pass inside the onAcceptance method we need to be executed after 10s.

That's All folks 😃

Update ---> github repo link

https://github.com/mishrabhavesh/useUndo