Introducing jsonresume-component, a web component which displays your resume, with microdata, theming, slots, and remote fetching of your JSON Resume resume.json file.

tl;dr

jsonresume-component is a web component that generates your resume with microdata following the Schema.org vocabulary set. It's custom element is <json-resume> and it fetches a resume.json file following the JSON Resume schema to create your resume. HTML is created from using the jsonresume-theme-microdata theme, creating a resume documented with microdata following the Schema.org vocabulary set.

• jsonresume-component on GitHub
• combined storybook
• example of a resume within a website UI

snippet:

<script type="importmap">
  {
    "imports": {
      "lit": "https://esm.run/lit",
      "@lit/task": "https://esm.run/@lit/task"
    }
  }
</script>
<script type="module">
  import 'https://esm.run/jsonresume-component'
</script>
<json-resume gist_id="54682f0aa17453d46cdc74bdef3172a3"></json-resume>

Prerequisites

• You have your resume in a JSON file following the JSON Resume schema structure

Quick primer: How we got here

This web component is built using the HTML-generating functionality of the module jsonresume-theme-microdata. That module is a JSON Resume theme which is the subject of the article "Make your resume SEO friendly using JSON Resume with microdata". The underlying concepts of microdata and HTML were broken down in "How to Boost SEO by Enhancing HTML with Microdata".

How to implement <json-resume> in node

install dependencies

npm i lit @lit/task jsonresume-component

Usage

General usage

import { JsonResume } from 'jsonresume-component';

<JsonResume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></JsonResume>

How to implement the <json-resume> web component in HTML

include lit dependencies

<json-resume> uses lit and @lit/task which must be imported into your HTML file. You can include dependencies with an importmap, pulling them from a CDN:

<script type="importmap">
  {
    "imports": {
      "lit": "https://esm.run/lit",
      "@lit/task": "https://esm.run/@lit/task"
    }
  }
</script>

Add jsonresume-component

<script type="module">
  import 'https://esm.run/jsonresume-component'
</script>

Using just a gist id

This option automates fetching your resume.json file from a GitHub gist. The gist must have a file called resume.json in it.

<json-resume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></json-resume>

check out this stackblitz for examples with slots, alternative stylesheets, and a local resume.json

Conclusion

At the risk of recreating the detailed configuration docs in the jsonresume-component readme, let's stop there. The repo contains an examples directory for stackblitzin or wherever you open your examples.

Important reminder: this is not just your resume in a web component! It's also microdata! Check out the results from the Google Rich Results Test for the resume on my website.