1. Products
  2.   OCR
  3.   JavaScript
  4.   Scribe.js
 
  

Open Source OCR JavaScript API to Create Searchable PDFs

A Leading JavaScript OCR Library to Create Searchable PDFs and Performs OCR (Optical Character Recognition) and Extracts Text from Both Images (PNG, JPEG) and PDF Files.

What is Scribe.js?

In today's digital world, a massive amount of valuable information is trapped within images—screenshots of error messages, photographs of documents, slides from a presentation, or even memes with clever text. Manually transcribing this text is a tedious and error-prone process. This is where Optical Character Recognition (OCR) technology comes to the rescue, and Scribe.js offers one of the most developer-friendly ways to integrate it into your web projects. Scribe.js is an open-source JavaScript library that performs OCR and extracts text from both images and PDF files. Unlike many OCR solutions that require backend processing or external API calls, Scribe.js runs entirely on the client side, giving you complete control over your data and eliminating server costs for text recognition tasks.

Scribe.js is a lightweight JavaScript client for the Google Cloud Vision API. All OCR operations happen directly in the user's browser or your Node.js environment, ensuring privacy and reducing server infrastructure costs. The library has included support for various features, such as preprocess your images, unified workflow for images, automatic detection, PDF layering, filter out low-confidence pages, cache OCR engines and so on. The library is built using modern JavaScript ESM (ECMAScript Modules), making it straightforward to integrate into contemporary web development workflows without requiring complex build configurations. This developer-first approach means you can start extracting text from documents with just a few lines of code.

Previous Next

Getting Started with Scribe.js

The recommend way to install Scribe.js is using npm. Please use the following command for a smooth installation

Install Scribe.js via npm

 npm install scribe.js-ocr

You can also install it manually; download the latest release files directly from GitHub repository.

Text Recognition from Images

The most fundamental use case for Scribe.js library is extracting text from image files. The library handles various image formats and can process both single images and batches of multiple images in one operation. Here's a basic example that demonstrates text extraction from an image URL inside JavaScript apps. The snippet showcases the straightforward API that Scribe.js provides. The extractText method accepts an array of image URLs and returns a Promise that resolves with the recognized text.

How to Extract Text from an Image via JavaScript Library?

import scribe from 'scribe.js-ocr';

// Extract text from a single image
scribe.extractText(['https://example.com/sample-image.png'])
  .then((result) => {
    console.log('Extracted text:', result);
  })
  .catch((error) => {
    console.error('OCR failed:', error);
  });

Create Searchable PDFs via JavaScript

One of Scribe.js's most powerful features is its ability to add invisible text layers to existing PDF files. This functionality transforms image-based PDFs into searchable documents without altering their visual appearance. When a text layer is added to a PDF, users can search for specific words or phrases within the document, select and copy text from what appears to be an image, use screen readers and accessibility tools with scanned documents, enable indexing by search engines and document management systems and so on.

How to Create Searchable PDF Documents via JavaScript Library?

import scribe from 'scribe.js-ocr';

// Add searchable text layer to an image-based PDF
async function makeSearchablePDF(inputPdfUrl) {
  try {
    // First, perform OCR on the PDF
    const ocrResult = await scribe.extractText([inputPdfUrl]);
    
    // Then create a new PDF with the text layer embedded
    const searchablePdf = await scribe.createSearchablePDF(
      inputPdfUrl,
      ocrResult
    );
    
    // The resulting PDF maintains the original appearance
    // but now contains selectable, searchable text
    return searchablePdf;
  } catch (error) {
    console.error('Failed to create searchable PDF:', error);
    throw error;
  }
}

Advanced Document Text Detection via JS

For images of documents with dense text and complex layouts (like a scanned book page or a PDF export), Scribe.js library offers a "Document Text Detection" feature. This provides much richer information, including paragraph, word, and break detectors, which helps preserve the structure of the original document. This is extremely useful for applications where the layout and structure of the source material are important, such as processing forms, invoices, or multi-column layouts.

How to Perform Advanced Text Detection inside JavaScript Apps?

const Scribe = require('scribejs');
const serviceAccountKey = require('./path-to-your-key.json');
const scribe = new Scribe(serviceAccountKey);

const documentImageUrl = 'https://example.com/scanned-invoice.png';

// Use the `documentText` method for advanced detection
scribe.documentText(documentImageUrl)
  .then(fullTextAnnotation => {
    // The fullTextAnnotation object contains detailed data
    console.log('Full Document Text:');
    console.log(fullTextAnnotation.text); // The plain text of the entire document

    // You can also iterate through pages, blocks, paragraphs, and words
    fullTextAnnotation.pages.forEach(page => {
      page.blocks.forEach(block => {
        console.log('\nBlock Confidence:', block.confidence);
        block.paragraphs.forEach(paragraph => {
          console.log(paragraph.text);
        });
      });
    });
  })
  .catch(error => {
    console.error('Document OCR Error:', error);
  });

Batch Processing Multiple Files via JavaScript

In real-world applications, software professional often need to process multiple documents simultaneously. Scribe.js supports batch processing out of the box, allowing users to extract text from multiple images or PDFs in a single operation inside JavaScript application. The following example demonstrates, how software developers can process a batch of documents using JavaScript commands.

How to Process a Batch of Documents using JavaScript Library?

import scribe from 'scribe.js-ocr';

// Process multiple documents at once
async function batchProcess(fileUrls) {
  try {
    // Pass an array of URLs to process multiple files
    const results = await scribe.extractText(fileUrls);
    
    // Results are returned in the same order as input
    results.forEach((text, index) => {
      console.log(`Document ${index + 1} text:`, text);
    });
    
    return results;
  } catch (error) {
    console.error('Batch processing failed:', error);
    throw error;
  }
}

// Process a batch of documents
const documents = [
  'https://example.com/receipt1.jpg',
  'https://example.com/receipt2.jpg',
  'https://example.com/invoice.pdf'
];

batchProcess(documents)
  .then(allText => {
    console.log('All documents processed successfully');
  });