WYSIWYG Online resume | Stackblitz Playground | 中文

To allow resumes to be previewed anytime, anywhere, written in the Markdown syntax that programmers are most familiar with, and free of charge!

• Dark mode support
• HTML embedding support
• PDF printing support
• Online preview support
• Custom template support
• Multiple template combination support
• Style override support
• More personalized templates

Quickly create a resume project, supports deployment on Vercel

1. Create

pnpm create resumejs

2. Choose a template

3. Write your README.md

4. Finish your resume!

Import as components into your own project

pnpm add @resumejs/components

import { Resume } from '@resumejs/components'

export default function App() {
  const resume = `
    # Name
    ## Personal Information
    ## Work Information
  `
  return <Resume>{resume}</Resume>
}

• vite-ant-design-pro

• CLI support, usage is the same as Vite
• By default, use the README.md in the running directory as your resume markdown
• Supports the vite.config.ts configuration file

You can directly use create-resumejs to create a project

pnpm add @resumejs/resume

Dependencies react and react-dom need to be installed.

pnpm add react react-dom

resume dev

resume build

resume preview

resume dev --template @resumejs/template-nova
resume build --template @resumejs/template-nova

Reference example

• @resumejs/template-default Default template
• @resumejs/template-nova

Default resume template

1. The content under the first-level title includes the information of the resume header with the first-level title as the header. You can customize the header component.

• The first-level title is the name. You can customize the header-name component.
• The picture is used as the avatar. You can customize the header-avatar component.
• Wrap all list items. You can customize the header-content component.
• Each list is a row. You can customize the header-row component.
• The item in the list is a column. You can customize the header-col component.

2. The first paragraph below the third-level title

• The table will be changed to the description information of the third-level title, and you can customize the card, card-item, card-item-label, card-item-value components.
• The first line of text below the title or Table will be changed to the description content, and you can customize the description component.

3. FrontMatter (dark mode, Github, print button)

• You can customize the toolbox component.

• Default template

This is very simple, just click the button above to deploy to Vercel. You can also deploy to other platforms that support Vite.

This project is tested with BrowserStack.

MIT LICENSE