DEV Community: Francesco Esposito

Resuml has a web app now, and nothing leaves your browser

Francesco Esposito — Wed, 24 Jun 2026 13:03:56 +0000

I've written about resuml twice already. Once when it was just a CLI, and once when it grew an MCP server so Claude Code could drive it from a chat. Both of those quietly assume you're fine installing a global npm package and living in a terminal. I am. Most people aren't, and honestly they shouldn't have to be just to fix their resume on a Sunday.

So now there's a hosted version at resuml.app. Same engine underneath, nothing to install, and the part I care about most: nothing you type ever leaves your browser.

What it actually is

It's the CLI's brain wrapped in a web page. You write your resume in YAML, or use the form editor if you'd rather not look at YAML at all, paste in a job description, and the ATS score updates while you type. Pick a theme from the 300 or so available. Export a PDF when it looks right. That's the whole thing.

One point I want to be loud about. There's no signup. No account. No analytics quietly tailing you around the site. Your resume lives in your browser's local storage and nowhere else. I don't run a database with your work history in it because I never wanted to be the guy responsible for one. Close the tab and your draft is still there when you come back. Clear your browser data and it's gone, and yeah, that part's on you. I made that trade on purpose.

The score is the whole point

Most "AI resume" tools do one of two annoying things. They either rewrite your resume into smooth, weightless mush, or they hand it to an LLM that grades it and cheerfully tells you it's wonderful. resuml does neither. The score runs on a fixed set of rules. Eleven checks, three buckets:

Contact. Is the basic stuff there and actually parseable.
Content. Summary length, at least two highlights per role, real verbs instead of passive filler, numbers that prove impact, and no sentences that start with the word I.
Structure. Dates that line up, at least three skill groups, education that isn't half filled in.

You land in a band. 90 to 100 is excellent, 75 to 89 good, 60 to 74 needs work, under 60 is rough. Paste in a job description and the math tilts to 60% those general checks and 40% how well your wording matches the posting. Because none of it is an LLM guessing, the number won't budge unless the resume genuinely got better. You can't flatter it. To move the score you have to do the dull, real work: add the skills you actually have, turn "was responsible for" into a sentence with a verb and a number in it, fix the gap between two jobs.

The bit that's new even if you use the CLI

This didn't exist last time I wrote anything. resuml can pull job postings now, from a handful of free job boards, all at once, and rank them with that same scoring engine. So the question flips. It stops being "is my resume any good" and becomes "which of these openings is my resume already good for." Roles way outside your lane get capped so they don't sneak to the top, and there's a cutoff so you're not scrolling through junk. It's resuml jobs search on the command line, and the web app shows you the same thing.

Small change, but it turned out to matter. Nearly every resume tool tunes one document against one job at a time. This one points your document at a whole pile of jobs and tells you where to aim first.

Why bother with a web app at all

The plain truth is I kept telling friends to try resuml and then watching them hit npm install -g and quietly give up. The CLI and the MCP server are the right call if you live in a terminal or inside Claude Code. But "resume as code" is a nice idea that shouldn't make you set up a whole Node toolchain just to poke at it. The web app is the easy way in. Open a link, watch your resume restyle itself across 300 templates, get a score that isn't lying to you, leave. Same YAML, same engine, whichever door you walk in through.

Go try it at resuml.app. It's free to use right now.

Resuml - YAML to resume

Francesco Esposito — Thu, 19 Jun 2025 20:28:38 +0000

Introducing Resuml: YAML-powered Resume Builder

Resuml is an open-source CLI tool that helps you manage your resume as code. Write your resume in YAML, validate it, and export to JSON or HTML using professional themes.

Key Features

YAML-first: Author your resume in a simple, human-readable YAML format.
Validation: Ensure your resume data is correct with built-in validation against the JSON Resume schema.
Export Options: Convert your YAML to JSON or render it as HTML using themes like Stack Overflow or React.
Theme Support: Choose from available themes for a professional look, or create your own.
CLI & API: Use Resuml from the command line or integrate it into Node.js projects.

Quick Start

Install: npm install -g resuml
Write your resume in resume.yaml
Validate: resuml validate --resume resume.yaml
Export to JSON: resuml tojson --resume resume.yaml --output resume.json
Render HTML: resuml render --resume resume.yaml --theme stackoverflow --output resume.html

Example YAML

basics:
  name: John Doe
  label: Software Engineer
  email: john@example.com
  summary: Experienced software engineer...
  location:
    city: San Francisco
    countryCode: US
  profiles:
    - network: GitHub
      url: https://github.com/johndoe

Why Resuml?

Keep your resume versioned and editable as code
Easily switch between formats and themes
Open-source and privacy-friendly
Find out more and contribute at https://github.com/phoinixi/resuml

I Built a Modern React Theme for JSON Resume

Francesco Esposito — Sat, 12 Apr 2025 15:55:47 +0000

Creating a Better Resume Experience with React

Over the past few weeks, I've been working on a project that combines my love for clean design and React development – a modern theme for JSON Resume called jsonresume-theme-react.

Why Another Resume Theme?

If you're not familiar with JSON Resume, it's a fantastic initiative that lets you manage your resume as a JSON file. The ecosystem has several themes, but I found most of them were either outdated or missing features I wanted.

I needed something that:

Used modern React
Supported multiple languages
Rendered markdown in descriptions
Looked good both on screen and in print

So I decided to build my own, and I'm pretty happy with how it turned out!

What Makes This Theme Different

I've focused on creating a balance between professional appearance and modern functionality:

React 18 & TypeScript - Built on current tech for better maintainability
Multi-language Support - Create different versions of your resume for different languages
Markdown in Descriptions - Format your job descriptions with proper lists and emphasis
Print-Optimized - Carefully designed to look great when printed to PDF
Responsive Design - Looks good on everything from phones to desktops

The theme uses Tailwind CSS for styling, which made it much easier to create a responsive layout that prints well.

A Look Inside

The theme renders all standard sections from the JSON Resume schema:

Basic information with optional profile photo
Work experience with properly formatted date ranges
Education history
Skills with optional proficiency levels
Projects and volunteer work
Languages and interests

Here's a small example of how work experience renders with markdown support:

"work": [
  {
    "name": "Company Name",
    "position": "Senior Developer",
    "startDate": "2020-01-01",
    "endDate": "2022-12-31",
    "summary": "Led development of key products",
    "description": "- Rebuilt the authentication system\n- Improved performance by 40%\n- Mentored junior developers"
  }
]

This renders as properly formatted bullets in the final resume, making it much more readable than plain text.

Supporting Multiple Languages

One feature I'm particularly proud of is the multilingual support. The theme detects the language from the "language" property in your resume JSON:

{
  "basics": {
    "name": "John Doe",
    "label": "Programmer"
  },
  "language": "en",
  "work": [
    // work history
  ]
}

You can create versions for different languages:

{
  "basics": {
    "name": "Jean Dupont",
    "label": "Développeur"
  },
  "language": "fr",
  "work": [
    // work history in French
  ]
}

This is perfect if you're applying for jobs internationally or in bilingual markets.

The Development Process

Building this theme taught me a lot about:

Optimizing for print media - CSS for print is surprisingly tricky
Component organization - Breaking down a resume into logical React components
Handling internationalization - Working with dates and text in multiple languages
Balancing design and function - Creating something that looks good but prioritizes content

The most challenging part was ensuring the theme remained faithful to the JSON Resume schema while adding extra features. I wanted to make sure it would work with existing resume data without modification.

Try It Yourself

If you want to give it a spin, the theme is available on npm and GitHub. I've created detailed documentation in the repository about installation and configuration options.

I'd love to hear what you think or see examples if you use it for your own resume! I'm still actively developing it and plan to add more customization options in the future.

What's Next?

I'm planning several improvements:

Theme customization through configuration
More layout variants
Custom sections support
More export options

Have you used JSON Resume before? What features would you want in a resume theme? Let me know in the comments!

The project is open source and available at github.com/phoinixi/jsonresume-theme-react

Two-way data binding in vanilla JS (POC)

Francesco Esposito — Sat, 02 Feb 2019 14:44:02 +0000

As Front-end Engineers we mostly use libraries and/or frameworks to develop and maintain complex web apps, but what there is under the hood? Do you ask yourself that question? You don't!? Well, You should! 🙃

In this post, I would like to extend the previous example to two-way data binding. 🕺

Two-way data binding 🤓
If you are not familiar with that concept, two-way data binding means that every change to the state is immediately propagated to the view (and vice-versa).

Check out the demo below for a quick example:

DEMO

Let's break it down

What do we need to have two-way data binding?

A view, in our example HTML.
A state, kept in memory with JavaScript.

The Key feature is:

Every time the state changes, the view needs to be updated (one-way data binding)

but also

Every time the view changes, the state needs to be updated

So let's assume we have an HTML view:

    <div class="field">
        <label for="name">Enter your name:</label>
        <input id="name" type="text" name="name"  data-model="name" />
      </div>

      <div class="field">
        <label for="title">Enter your title:</label>
        <input id="title" type="text" name="title" data-model="title" />
      </div>

      <div class="results">
        <h1 data-binding="name"></h1>
        <h2 data-binding="title"></h2>
      </div>

and a state:

    const state = {
      name: 'Francesco',
      title: 'Front-end Developer'
    };

We can easily set the view the first time:

    document.querySelector('[data-binding="name"]').innerHTML = state.name
    document.querySelector('[data-binding="title"]').innerHTML = state.title
    document.querySelector('[data-model="name"]').value = state.name
    document.querySelector('[data-model="title"]').value = state.title

But we want some magic, so that when we update the state:

    state.name = 'Richard'
    state.title = 'Technical Lead'

the view should update too.

To achieve this, we could modify the default behaviour of the set property for the state object, so that other than update the state, it would also update our view.

One way to do that in JavaScript is using the Proxy Object:

    const createState = (state) => {
      return new Proxy(state, {
        set(target, property, value) {
          target[property] = value; // default set behaviour
          render(); // updates the view every time the state changes
          return true;
    }
      });
    };

    const state = createState({
      name = 'Francesco'
      title = 'Front-end Engineer'
    });

With the power of the Proxy every time we update our state, the render function will be called.
A possible implementation of render can be:

    const render = () => {
     document.querySelector('[data-binding="name"]').innerHTML = state.name;
     document.querySelector('[data-binding="title"]').innerHTML = state.title;
     document.querySelector('[data-model="name"]').value = state.name;
     document.querySelector('[data-model="title"]').value = state.title;
    };

We just miss the last little piece. Every time we modify the view, the state should change accordingly. We can obtain that adding an event listener to the inputs: 😎

    const listener = (event) => {
      state[event.target.dataset.model] = event.target.value;
    });

   document.querySelector('[data-model="name"]').addEventListener('keyup', listener);  
   document.querySelector('[data-model="title"]').addEventListener('keyup', listener);

And Voilá! Now the trick is complete! 👨‍💻

More generic implementation (POC) 🌟

Resume in JSON: jsonresume-theme-stackoverflow

Francesco Esposito — Mon, 28 Jan 2019 22:43:48 +0000

Resume in JSON 🤓

A few years ago I discovered jsonresume, a very promising project aimed to provide a json-schema to write a resume.

I immediately got excited and I wrote 2 templates for that: 👨🏼‍💻

jsonresume-stackoverflow-theme: code and demo which I am proud of 🕺
another one that I actually don't like anymore 😆

My first handcrafted resume template 🌟

The StackOverflow template was my first resume written using web technologies and it has some popularity, I got contributions and features requests. I use it myself as my resume and a bunch of my friends use it too. However, the schema is not very flexible and the last iteration was done 5 years ago json-resume-schema.

The current stack to write a template for json-resume is quite old too: Handlebars.js.

Need for a rewrite 😎

My idea is to fully rewrite my StackOverflow template, (maybe the json-schema too, but this is another story) using different technologies, the most reasonable that come to my mind are:

React
Custom Elements

HELP ❤️

Is anyone interested in that project?
Which technologies to do you advice me to choose and why?

One-way data binding in vanilla JS (POC)

Francesco Esposito — Fri, 25 Jan 2019 11:05:33 +0000

Code and Demo

Let's break it down in small pieces

I assume you are already familiar with data-binding.

Most of the modern front-end frameworks offer data-binding out of the box, just ready to use, but what there is under the hood?

I tried to implement a basic version of one-way data binding and it was really fun :)

So, what do we need to have one-way data binding?

A view, in our example HTML.
A state, kept in memory with JavaScript.

The Key feature is:

Everytime the state changes, the view need to be updated

So let's assume we have an HTML view:

    <div data-binding="quote"></div>

and a state:

    const state = {
      quote: 'Either you run the day, or the day runs you.'
    };

We can easily set the view the first time:

    document.querySelector('[data-binding="quote"]').innerHTML = state.quote

We want some magic, so that when we update the state:

    state.quote = 'We become what we think about'

the view should magically change. To achieve this, we could modify the default behaviour of the set property for the state object, so that other than update the model, it would also update our view.

One way to do that in JavaScript is using the Proxy Object:

    const createState = (state) => {
      return new Proxy(state, {
        set(target, property, value) {
          target[property] = value; // default set behaviour
          render(); // updates the view everytime the state changes
          return true;
    }
      });
    };

    const state = createState({
      quote: 'Either you run the day, or the day runs you.' // creates initial state
    });

With the power of the Proxy everytime we update our state, the render function will be called.
A possible implementation of render can be:

    const render = () => {
     document.querySelector('[data-binding="quote"]').innerHTML = state.quote
    };

Now if we modify the state with:

    state.quote = 'We become what we think about.'

The render function will be called and the view will update! MAGIC! 👨‍💻