{"id":13466702,"url":"https://github.com/reorx/jsoncv","last_synced_at":"2025-04-12T16:35:46.360Z","repository":{"id":65833706,"uuid":"596152999","full_name":"reorx/jsoncv","owner":"reorx","description":"A toolkit for building your CV with JSON and creating stylish HTML/PDF files.","archived":false,"fork":false,"pushed_at":"2025-01-01T01:35:56.000Z","size":780,"stargazers_count":291,"open_issues_count":5,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T17:12:33.806Z","etag":null,"topics":["cv","editor","json","json-resume","json-schema","pdf","resume"],"latest_commit_sha":null,"homepage":"https://jsoncv.reorx.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reorx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"reorx","patreon":null,"open_collective":null,"ko_fi":"reorx","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-02-01T15:23:41.000Z","updated_at":"2025-03-25T04:13:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"a8cf54ce-070d-4717-a881-782fdf8e7cd2","html_url":"https://github.com/reorx/jsoncv","commit_stats":{"total_commits":113,"total_committers":2,"mean_commits":56.5,"dds":0.008849557522123908,"last_synced_commit":"0c4cec14e1dd259817876cb0bac698ce0484ca07"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reorx%2Fjsoncv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reorx%2Fjsoncv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reorx%2Fjsoncv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reorx%2Fjsoncv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reorx","download_url":"https://codeload.github.com/reorx/jsoncv/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248597188,"owners_count":21130830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cv","editor","json","json-resume","json-schema","pdf","resume"],"created_at":"2024-07-31T15:00:48.968Z","updated_at":"2025-04-12T16:35:46.315Z","avatar_url":"https://github.com/reorx.png","language":"JavaScript","funding_links":["https://github.com/sponsors/reorx","https://ko-fi.com/reorx","https://github.com/sponsors/reorx/"],"categories":["JavaScript"],"sub_categories":[],"readme":"# jsoncv\n\nA toolkit for building your CV with JSON and creating stylish HTML/PDF files.\n\njsoncv comprises the following components:\n1. Schema\n2. Editor\n3. CV HTML\n4. Converters\n\nFor in-depth explanations and usage guidelines, please refer to the documentation below.\n\n\n## Introduction\n\n### Schema\n\njsoncv use [JSON Schema](https://json-schema.org/) to create JSON-based standard for CVs.\n\nThe schema used in jsoncv is a fork of the [JSON Resume Schema](https://jsonresume.org/schema/),\nwith the following differences:\n\n- JSON Schema version\n\n    JSON Resume utilizes the outdated draft-04 version, while jsoncv uses the current draft-07. To ensure compatibility with draft-07, all instances of `additionalItems` have been removed.\n- Additional `sideProjects` section\n\n    jsoncv includes an additional section, called `sideProjects`, that allows for the distinction between side projects and career projects\n- Additional `name` property in `meta` section\n\n    jsoncv includes a `name` property in the `meta` section, which allows the user to specify the desired name for exported HTML/PDF files.\n\nThese differences do not impact the compatibility between jsoncv and JSON Resume. This means that you can easily import JSON Resume data into jsoncv and vice versa, as jsoncv data will pass the validation of JSON Resume Schema .\n\nThe complete diff between the JSON Resume schema and the jsoncv schema can be viewed [here](https://github.com/reorx/jsoncv/compare/eabd65fd5a9a126e2de9e2955485c0dca4483c79...master#diff-3b8e847cb1664e291a7635b037a2f2bf831e1e9ce2d915fbfbba9ca77e2a1d1b)\n\n### Editor\n\n![](images/editor.png)\n\njsoncv comes with an online editor that provides a graphical user interface for creating and editing your jsoncv data.\nVisit it at https://jsoncv.reorx.com/editor/.\n\nThe Editor consists of three panes, from left to right:\n\n1. Sidebar\n\n    Allows navigation to different sections in the schema form and provides operations such as \"Download HTML\" and \"Upload Data\"\n2. Schema Form\n\n    Lets you edit the properties of your CV data. You can also select which properties to display or hide.\n3. Preview\n\n    Displays the rendered CV HTML as changes are made in the Schema Form.\n\n### CV HTML\n\nThe core product of jsoncv is CV HTML, which is the HTML representation of your jsoncv data.\nIt is a compact, single-file HTML document that can be converted to PDF or hosted online to create a static CV website.\n\nCV HTML is designed with a specific layout to display a CV on an A4 sheet of paper.\nThe CSS has been tailored to optimize printing, ensuring the best typography whether printed on paper or saved as a PDF.\nTherefore, CV HTML is best suited for creating professional or academic CVs/resumes,\nrather than creative or interactive portfolio websites.\n\nCV HTMl supports themes, which can be found in the `src/themes` directory.\n\nTo get CV HTML, please refer to [Export CV data and HTML](#export-cv-data-and-html) and [Build HTML locally](#build-html-locally)\n\n### Converters\n\nConverters are scripts to help user converting jsoncv data from/to other sources.\n\nCurrently, there is only one converter available: `rxresume-to-jsoncv.js`, which converts data exported from [RxResume](https://rxresu.me/) into the jsoncv format.\n\nIf you have any additional requirements, please feel free to submit an issue. Pull requests are also greatly appreciated.\n\n\n## Usage\n\n### Write your CV\n\nIt is recommended to write your CV using the online [Editor](https://jsoncv.reorx.com/editor/).\nHowever, if you are comfortable with JSON, you can maintain the data file using a text editor on your local machine.\n\nWhen you open the Editor for the first time, a sample data is loaded.\nYou can either edit it or click the \"New Data\" button to start with an empty form.\nYour CV data is saved in your browser every time you make a change,\nso you don't have to worry about losing your work.\n\nIf you already have a local copy of your CV data, you can click the \"Upload Data\" button to load it into the Editor.\n\n### Export CV data and HTML\n\nOnce you have finished editing, you can click the **Download JSON** button to export your CV data in JSON format.\n\nIf you want to export the rendered HTML in the Preview pane, simply click the **Download HTML** button.\n\nPlease note that you can name the exported files by adding the `meta.name` property.\nIf it is not specified, the filename will be constructed using a combination of `basics.name` and `meta.version`.\n\n### Convert HTML to PDF\n\nTo keep things simple, jsoncv does not include or use any external tools to generate PDFs.\nInstead, you should use the generated HTML file to convert it to a PDF document.\nThe only requirement is a modern browser; the steps below use Google Chrome as an example:\n\n1. Open the generated HTML file in Chrome.\n2. Press \u003ckbd\u003e⌘ P\u003c/kbd\u003e (or \u003ckbd\u003e⌃ P\u003c/kbd\u003e in Windows), and the Print dialog will open.\n3. In the dialog, select \"Destination\" as \"Save as PDF\" and make sure all items in \"Options\" are unchecked.\n\n    ![](images/chrome-print.png)\n4. Click \"Save\" to save the PDF file in your file system.\n\nPlease note that the PDF exported from Chrome may have some issues with text copying. For more information, see the [FAQ](#text-copied-from-the-pdf-is-reversed) section.\n\n### Build HTML locally\n\njsoncv uses [Vite](https://vitejs.dev/) as its static-site building tool.\nThe `index.html` file in the root of the project is the entry point for builing a single-file CV HTML.\n\nHere are the steps to build a CV HTML using your own data:\n\n1. Make sure that you are using NodeJS version 18 or higher.\n2. Install the dependencies by running: `npm run install`\n3. Build your CV HTML by specifying `DATA_FILENAME` and `OUT_DIR` environment variables:\n\n    ```\n    DATA_FILENAME=\"$HOME/Downloads/mycv/cv.json\" OUT_DIR=\"$HOME/Downloads/mycv\" npm run build\n    ```\n\n    This will build your CV HTML using the data file located at `$HOME/Downloads/mycv/cv.json`,\n    and the generated HTML will be located in the `$HOME/Downloads/mycv` directory.\n\nThe following environment variables are supported in the build process:\n- `DATA_FILENAME`: The CV data to use, can be a relative or absolute path.\n- `OUT_DIR`: The output directory for the generated HTML file.\n- `THEME`: The theme to use, must be one of the directory name in `src/themes/`.\n\nTo customize the primary color of the theme, modify the --primary-color CSS variable in index.scss.\nNote that making this change will result in unstaged changes in Git. If you want to build the HTML yourself,\nit is recommended that you create a new project instead of editing the source code in jsoncv.\nFor instructions on how to do this,\nplease refer to the [Build a static CV site](#build-a-static-cv-site) section.\n\n### Build a static CV site\n\nThe generated `index.html` file can be used anywhere and on any hosting platform.\nSimply upload it to a web server, and you will have your own online CV site.\nThe built-in theme \"reorx\" also includes responsive support for mobile devices.\n\nHowever, if you want extra customization, like the CV site at https://cv.reorx.com/\nwhich has a footer with links to the PDF file and the author's home page,\nyou can follow these steps:\n\n1. Create an empty repository\n2. Add jsoncv as the submodule\n\n    ```\n    git submodule add https://github.com/reorx/jsoncv.git\n    ```\n3. Put your CV data file, for example `cv.json`, in the project.\n4. Initialize `package.json` by running `npm init`.\n5. Install jsoncv as a dependency by running `npm i ./jsoncv`.\n6. Copy the `scripts` and `devDependencies` from `./jsoncv/package.json` to `package.json`, and then run `npm i` to install them.\n7. Copy `./jsoncv/vite.json.js` to `vite.json.js` and make the following changes:\n   - Change all instances of `./src` to `./jsoncv/src`.\n   - Change the value of `dataFilename` to your CV data file, for example `cv.json`.\n   - Change `renderData.theme` to the theme you want to use.\n8. Copy `./jsoncv/index.html` to `index.html` and change all instances of `./src` to `./jsoncv/src`.\n   Then Copy `./jsoncv/index.scss` to `index.scss`.\n9. Run `npm run build` to test if everything works.\n\nAfter completing these steps, you can now add your own elements and styles to `index.html` and `index.scss`\nto further customize your CV website. You can use HTML, CSS, and JavaScript to add\nyour own branding, layout, and functionality to the site.\n\n### Create your own theme\n\njsoncv includes several built-in themes that you can use either directly in the Editor or when building the static CV site.\n If you want to create your own custom theme, here is how:\n\nThe file system hierarchy for themes is as follows:\n```\nsrc/themes\n└── reorx\n    ├── index.ejs\n    └── index.scss\n```\n\nYou can add your own theme by creating a new folder under `src/themes`\nwith `index.ejs` and `index.scss` files.\n\n`index.ejs` is an [ejs](https://ejs.co/) template used for constructing the CV content.\nThe data that is passed to the template is structured as follows:\n- `cv`: the entire jsoncv data that conforms to the jsoncv schema\n- `fn`: a set of utility functions\n  - `getCVTitle`: gets the CV title from `cv` data\n  - `reformatDate`: transforms a date string to a specified format\n  - `getIconSVG`: gets the iconify SVG string or DOM element from the icon name\n  - `noSchemaURL`: remove the schema (`https://`) prefix of the url\n\nFor more information, see the complete definition in [src/themes/data.js](https://github.com/reorx/jsoncv/blob/master/src/themes/data.js).\n\nOnce you have created a new theme (let's use `yourtheme` as an example),\nyou can start developing and previewing it by running the following code:\n\n```\nTHEME=yourtheme npm run dev-site\n```\n\nPull requests for adding new themes are always welcomed.\n\n\u003e You can just name the theme after your own name, this is what I did for the theme \"reorx\".\n\u003e Because I think that theme is tightly bound to the developer's aesthetic and personal taste,\n\u003e and common words may not accurately represent the theme.\n\n\n## Tech stack\n\n- vite\n- ejs\n- scss\n- iconify\n- ajv\n\n\n## FAQ\n\n### Text copied from the PDF is reversed\n\nYes, this is a known issue with Chrome's \"Save as PDF\" feature.\nThe resulting PDFs can have text that is backwards when copied in Preview.app on MacOS.\n\n![](images/chrome-reversed-text-problem.png)\n\nThis issue has been reported by several users and is not specific to jsoncv. As seen in:\n[\"Save as PDF\" produces documents with backwards text. - Google Chrome Community](https://support.google.com/chrome/thread/29061484/save-as-pdf-produces-documents-with-backwards-text?hl=en\u0026dark=0)\n\nSolution: Use Firefox or Safari to get the PDF\n\n\n### The order of properties in the exported JSON changes sometimes\n\nSee [Does JavaScript guarantee object property order? - Stack Overflow](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order)\n\n## TODO\n\n- [x] Supports Markdown in `summary` and `description` properties\n- [x] Allows customizing primary color for the current theme\n- [x] Export PDF directly (using browser's print feature)\n- [x] Supports responsive style for themes, so that the CV site is friendly to view on mobile devices.\n- [ ] Add more themes.\n- [ ] Allows switching themes in Editor\n- [ ] Add more sample data. By clicking the \"Load Sample\" button, a dialog will open, allowing the user to select from various languages\n\n## Credits\n\njsoncv could not be made possible without these awesome projects below:\n\n- [JSON Resume](https://jsonresume.org/)\n- [json-editor](https://github.com/json-editor/json-editor)\n- [iconify](https://iconify.design/)\n\n\n## Donation\n\nIf you think this project is enjoyable to use, or saves some time,\nconsider giving me a cup of coffee :)\n\n- [GitHub Sponsors - reorx](https://github.com/sponsors/reorx/)\n- [Ko-Fi - reorx](https://ko-fi.com/reorx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freorx%2Fjsoncv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freorx%2Fjsoncv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freorx%2Fjsoncv/lists"}