🧠 React Resume Parser

React Resume Parser is a lightweight React + Node.js library that parses resumes (PDF/DOCX) into structured JSON — ready for use in web apps, dashboards, or recruitment platforms.

It works in both the browser (client-side) and Node.js environments, supports React integration and keeps all text verbatim (no auto-corrections, no data loss).

DEMO: DEMO

GitHub: GitHub

DEMO CODEBASE: Link

🚀 Features

• 🧾 Parse resumes (PDF/DOCX) to structured JSON
• 🧠 Verbatim-first — never modifies or guesses user data
• 💡 Detects sections, headings, and work experience blocks
• ⚙️ Supports both browser and Node.js runtimes
• 🧱 Provides a React dropzone component for instant UI integration
• 🔍 Extracts metadata like email, phone, URLs, and role headings
• 📄 Handles image-based PDFs (with optional OCR fallback, coming soon)
• ⚡ Built with TypeScript — full typings & intellisense
• 🧩 Works offline — no server calls, no API keys needed

📦 Installation

npm install react-resume-parser
# or
yarn add react-resume-parser

📝 Note:

To parse PDFs in the browser, make sure your bundler supports Web Workers and pdf.js. Most modern setups (Vite, Next.js, CRA) handle this automatically.

⚛️ Usage in React (Browser)

You can use the built-in component for easy file uploads and parsing:

import { useState } from "react";
import { ResumeDropzone } from "react-resume-parser/react";

export default function App() {
  const [result, setResult] = useState(null);

  return (
    <div style={{ maxWidth: 900, margin: "40px auto" }}>
      <h1>React Resume Parser</h1>
      <ResumeDropzone onResult={(data) => setResult(data)} />
    </div>
  );
}

OR

import { useState } from "react";
import { parseResume } from "react-resume-parser";

export default function App() {
  const [result, setResult] = useState<any>(null);
  const [status, setStatus] = useState<"idle" | "parsing" | "error">("idle");

    const handleParseFile = async (file: File) => {
        setStatus("parsing");
        setMessage("Parsing…");
        setResult(null);

        try {
            const res = await parseResume(file, { mode: "verbatim", source: "browser" });
            setResult(res);
            setStatus("idle");
            setMessage("");
        } catch (err: any) {
            setStatus("error");
            setMessage(err?.message || "An error occurred while parsing.");
        }
    };

    return ( 
     <div>
      <input
        type="file"
        accept=".pdf,.docx,.txt"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) handleParseFile(file);
        }}
      />
    </div>
    )
    }

💡 Example result

{
  "structured": {
    "basics": { "email": "[email protected]", "phone": "+234 806768567" },
    "sections": [
      { "heading": "PROFILE SUMMARY", "lines": ["Experienced full-stack developer...", "..."] },
      { "heading": "SKILLS AND COMPETENCIES", "lines": ["ReactJS", "Node.js", "TypeScript"] },
      { "heading": "PROFESSIONAL EXPERIENCE", "lines": ["Full-stack Developer | ProfitAll", "..."] }
    ],
    "work": [
      {
        "heading": "Full-stack Developer | example | May 2025 - Present",
        "bullets": [
          "● Built and maintained core features using Next.js and Node.js",
          "● Collaborated across design and product teams to deliver new features"
        ]
      }
    ]
  },
  "meta": { "parser": "pdf", "pages": 2, "version": "1.0.0" },
  "warnings": []
}

⚙️ Usage in Node.js / Backend

You can parse resumes directly from a file, buffer, or upload stream:

import { parseResume } from "react-resume-parser";
import fs from "fs";

(async () => {
  const file = fs.readFileSync("./resume.pdf");
  const result = await parseResume(file, { mode: "verbatim" });

  console.log(result.structured);
})();

Output example:

{
  "basics": {
    "email": "[email protected]",
    "phone": "+123 456 7890"
  },
  "sections": [
    { "heading": "EXPERIENCE", "lines": ["Software Engineer | ABC Corp | 2021 - Present", "..."] },
    { "heading": "EDUCATION", "lines": ["B.Sc. Computer Science | MIT | 2019"] }
  ]
}

🧠 Handling DOCX and PDF in Your Codebase

This package supports:

✅ .pdf files — powered by pdfjs-dist

✅ .docx files — powered by jszip and mammoth

⚠️ Important: Older .doc files (Word 97–2003 binary format) are not supported. Please convert them to .docx or .pdf before parsing.

Ensure your bundler or environment supports these libraries:

• pdfjs-dist — requires Web Worker support (already handled by Vite, Next.js, etc.)

• jszip — works client- and server-side, no configuration needed

• mammoth — best used in Node.js (browser fallback is automatically handled)

🧰 Example: Detect Non-Resume Files

By default, the parser warns if the file doesn’t look like a resume:

{
  "warnings": [
    {
      "code": "NOT_RESUME",
      "message": "This file does not appear to be a resume (missing key sections like Experience/Education/Skills)."
    }
  ]
}

You can disable that check:

await parseResume(file, { checkResumeType: false });

🧩 API Exports

| Export | Description | | ---------------- | --------------------------------------------------- | | parseResume() | Core function — parses files to structured JSON | | ResumeDropzone | React component for drag-and-drop parsing | | resume.worker | Web Worker file used internally for browser parsing |

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.

Before committing, make sure to run:

npm run build

🧾 License

MIT © Victor Obije

❤️ Made for developers who want clean, structured resume data — fast.