Get Started

Quick Start

Start integrating AI-powered CV parsing into your recruitment portal in minutes.

What you'll learn

  1. 1How to install the widget for your framework
  2. 2How to handle parsed CV data and auto-fill forms
  3. 3How to set up webhooks and custom field mappings

Overview

Resume Mapper is an AI-powered CV parsing API. It accepts PDF, DOCX, and TXT files and returns a structured ParsedCV object with personal info, experience, education, skills, languages, certifications, and projects.

The @resume-mapper/widget package ships framework-specific adapters for React, Vue 3, and a framework-agnostic Web Component — plus a headless core module if you want to build your own UI.

Installation

Install the widget package using your preferred package manager:

pnpm add @resume-mapper/widget

All three adapters live in the same package. You only pay the bundle cost for the adapter you import.

React

Import from @resume-mapper/widget/react (or the default entry which re-exports the React adapter for backward compatibility). The onParsed callback fires once the API returns a result.

SignUpForm.tsx
import { ResumeMapper } from '@resume-mapper/widget/react'

function SignUpForm() {
  const handleParsed = (result) => {
    setFirstName(result.rawData.personalInfo.firstName)
    setLastName(result.rawData.personalInfo.lastName)
    setEmail(result.rawData.personalInfo.email)
  }

  return (
    <ResumeMapper
      apiKey="rm_your_api_key"
      onParsed={handleParsed}
      locale="en"
    />
  )
}

Vue

The Vue adapter uses Vue 3's Composition API internally. It emits parsed, error, and upload events.

SignUpForm.vue
<script setup>
import { ResumeMapper } from '@resume-mapper/widget/vue'

function onParsed(result) {
  firstName.value = result.rawData.personalInfo.firstName
  email.value    = result.rawData.personalInfo.email
}
</script>

<template>
  <ResumeMapper
    api-key="rm_your_api_key"
    @parsed="onParsed"
    locale="en"
  />
</template>

Vanilla / Web Component

The Web Component works in any framework or plain HTML — Angular, Svelte, Astro, or a static page. Import the module once and the <resume-mapper> element becomes available globally. Parsed events bubble up through the DOM as CustomEvents.

index.html
<!-- 1. Import once (e.g. in your bundle entry) -->
<script type="module">
  import '@resume-mapper/widget/vanilla'
</script>

<!-- 2. Drop the element anywhere in your HTML -->
<resume-mapper
  api-key="rm_your_api_key"
  locale="en"
  theme="auto"
></resume-mapper>

<script>
  document.querySelector('resume-mapper')
    .addEventListener('rm-parsed', (e) => {
      console.log(e.detail.rawData.personalInfo)
    })
</script>

Handling parsed data

Every successful parse returns a ParseResult object. The full schema is exported from @resume-mapper/widget/core as TypeScript interfaces.

parse-result.json
{
  "success": true,
  "rawData": {
    "personalInfo": {
      "firstName": "Jane",
      "lastName": "Doe",
      "email": "jane@example.com",
      "phone": "+1 555 123 4567",
      "location": "San Francisco, CA",
      "linkedIn": "linkedin.com/in/janedoe",
      "summary": "Full-stack engineer with 5 years experience..."
    },
    "experience": [
      {
        "company": "Acme Corp",
        "position": "Senior Engineer",
        "startDate": "2021-03",
        "current": true,
        "achievements": ["Led migration to microservices", "Reduced latency by 40%"]
      }
    ],
    "education": [...],
    "skills": [{ "name": "TypeScript", "level": "expert" }],
    "languages": [{ "name": "English", "level": "native" }],
    "certifications": [...],
    "projects": [...]
  },
  "metadata": {
    "fileName": "jane_doe_cv.pdf",
    "parsedAt": "2026-03-20T10:30:00Z",
    "usage": { "cvParsedThisMonth": 12, "cvLimit": 200 }
  }
}

Webhooks

Configure a webhook URL in your dashboard and Resume Mapper will POST the parsed result directly to your backend after every successful parse. No polling required.

webhook-payload.json
// Your endpoint receives a POST with this body:
{
  "event": "cv.parsed",
  "data": { /* your mapped fields */ },
  "rawData": { /* full ParsedCV object */ },
  "metadata": {
    "fileName": "resume.pdf",
    "parsedAt": "2026-03-20T10:30:00Z"
  }
}

Validate the request by checking the x-rm-signature header against your webhook secret (configurable in the dashboard).

Field Mapping

Pro plan

With a Pro subscription you can define custom field mapping rules in the dashboard. Parsed data is remapped before it reaches your onParsed callback or webhook payload, so your backend receives fields that match your exact database schema.

field-mapping.txt
// Dashboard → Field Mapping → New rule
// Source path    → Target key
"personalInfo.firstName"  →  "first_name"
"personalInfo.email"      →  "email_address"
"experience[0].company"   →  "last_employer"
"skills[].name"           →  "skill_list"

Available source paths include every key in the ParsedCV schema shown above.