![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/logo.svg\"){kind=logo}
\n\n**awesome-ajv-errors** pretty-prints ajv errors\n\nIt has a gorgeous human-understandable output, predicts human errors and suggests fixes.\n\n\n# Contents\n\n * [Examples](#examples)\n * [Usage](#usage)\n\n## Versions\n\n * Since version 2;\n * This is a [pure ESM][pure-esm] package. It requires Node 12.20 and cannot be used from CommonJS.\n * Ajv 6, 7 and 8 are supported.\n * Since version 3;\n * This package can be used in browsers without special hacks. It will by default not pretty-print codeframes or use colors. If you want this, you have two options:\n * Either import from `awesome-ajv-errors/node` explicitly (if you have e.g. webpack DefinePlugin configured to hack around missing things like `process is not defined`), or\n * Import from `awesome-ajv-errors/try-styled` which has a promise-based `prettify` function (`prettifyTryStyled`) or a promise which will eventually resolve to a synchronous function (`styledPrettify`).\n * Both of these will fallback to non-colored non-codeframe output if e.g. loading `@babel/code-frame` failed. This will likely be entirely resolved once Babel 8 is released; then awesome output will by default work in browsers too.\n * Since version 4;\n * package.json exports field is not support well by e.g. Jest, so v4 reverts the v3 exports.\n * Until the exports field get better support, the official way to import will now be from:\n * `awesome-ajv-errors` for auto-detecting node vs browser\n * `awesome-ajv-errors/dist/index-node.js` or `awesome-ajv-errors/dist/index-browser.js` for explicit importing depending on environment\n * `awesome-ajv-errors/dist/index-try-styled.js` for dynamic trying to load color support (e.g. in browsers)\n * Since version 5;\n * Re-introduced package exports.\n * Replaced [`@babel/code-frame`](https://www.npmjs.com/package/@babel/code-frame) with [`awesome-code-frame`](https://www.npmjs.com/package/awesome-code-frame) which uses later versions of upstream dependencies - works out-of-the-box in browsers now.\n * It will by default pretty-print codeframes and use colors, including in browsers that supports it. This will look bad in the browser window, but good in the developer tools.\n * Import from `awesome-ajv-errors/plain` explicitly to have colors and code frame output disabled, or use the options to `prettify()` to disable per call.\n * Now using the latest chalk, which means it requires support for *package imports*. If this causes problems in Jest for you, see [this issue](https://github.com/chalk/chalk/issues/532) for help.\n\n\n# Examples\n\n\n## Similar property name\n\nSuggest similar properties\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Second-level two similar properties\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"type\": \"object\",\n \"properties\": {\n \"bar\": {},\n \"bak\": {}\n },\n \"additionalProperties\": false\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": {\n \"bar\": \"42\",\n \"baz\": \"33\"\n }\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/similar-property-name.svg\")
\n\n## Multiple similar property names\n\nSuggests multiple valid property names\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Second-level three similar properties\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"type\": \"object\",\n \"properties\": {\n \"bar\": {},\n \"bak\": {},\n \"bam\": {}\n },\n \"additionalProperties\": false\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": {\n \"bar\": \"42\",\n \"baz\": \"33\"\n }\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/multiple-similar-property-names.svg\")
\n\n## Type typo\n\nSuggests the valid value type when mistaken\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"One option (number to string)\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"anyOf\": [\n {\n \"type\": \"string\"\n }\n ]\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": 42\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/type-typo.svg\")
\n\n## Type typo (reverse)\n\nSuggests the valid value type when mistaken\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"One option (string to number)\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"anyOf\": [\n {\n \"type\": \"number\"\n }\n ]\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": \"42\"\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/type-typo--reverse-.svg\")
\n\n## Type typo (one much better option)\n\nWhen the type mismatch, and one type is much \"better\" than the rest (as in probably the right solution), it will be suggested for conversion\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Two options\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"anyOf\": [\n {\n \"type\": \"string\"\n },\n {\n \"type\": \"boolean\"\n }\n ]\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": 42\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/type-typo--one-much-better-option-.svg\")
\n\n## Type typo (one much better option out of multiple)\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Three options\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"anyOf\": [\n {\n \"type\": \"string\"\n },\n {\n \"type\": \"boolean\"\n },\n {\n \"type\": \"null\"\n }\n ]\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": 42\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/type-typo--one-much-better-option-out-of-multiple-.svg\")
\n\n## Array too small\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"2 too few\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"type\": \"array\",\n \"minItems\": 3\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": [\n 1\n ]\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/array-too-small.svg\")
\n\n## Number too big\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Less than or equal to\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"type\": \"number\",\n \"maximum\": 17\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": 42\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/number-too-big.svg\")
\n\n## Not in enum set\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"One value of same type\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"enum\": [\n 41\n ]\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": 42\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/not-in-enum-set.svg\")
\n\n## Almost in enum set (wrong convertible type)\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Two options (one of different type)\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"enum\": [\n 41,\n \"42\"\n ]\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": 42\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/almost-in-enum-set--wrong-convertible-type-.svg\")
\n\n## Almost in enum set (wrong convertible type), multiple options\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Four options (one of different type)\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"enum\": [\n \"falso\",\n \"other\",\n \"False\",\n false\n ]\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": \"false\"\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/almost-in-enum-set--wrong-convertible-type---multiple-options.svg\")
\n\n## Invalid format (time)\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"time invalid\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"type\": \"string\",\n \"format\": \"time\"\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": \"11:22:334\"\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/invalid-format--time-.svg\")
\n\n## Invalid format (e-mail)\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"email invalid\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"type\": \"string\",\n \"format\": \"email\"\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": \"quite@invalid@email.com\"\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/invalid-format--e-mail-.svg\")
\n\n## if-then not satisfied\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"if-then on first-level object\",\n \"properties\": {\n \"foo\": {\n \"if\": {\n \"properties\": {\n \"firstName\": {\n \"const\": true\n }\n }\n },\n \"then\": {\n \"required\": [\n \"lastName\"\n ]\n }\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": {\n \"firstName\": true\n }\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/if-then-not-satisfied.svg\")
\n\n## Multiple of\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Multiple of\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {\n \"type\": \"number\",\n \"multipleOf\": 4\n }\n }\n}\n```\n\n`data.json`\n```json\n{\n \"foo\": 17\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/multiple-of.svg\")
\n\n## Required property\n\n\n\n`schema.json`\n```json\n{\n \"title\": \"Root-level required\",\n \"type\": \"object\",\n \"properties\": {\n \"foo\": {}\n },\n \"required\": [\n \"foo\"\n ]\n}\n```\n\n`data.json`\n```json\n{\n \"bar\": 42\n}\n```\n\n
\n![](\"https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/required-property.svg\")
\n\n\n\n\n# Usage\n\nImport the `ajv` package, and `prettify` from `awesome-ajv-errors`:\n\n```ts\nimport * as Ajv from 'ajv'\nimport { prettify } from 'awesome-ajv-errors'\n```\n\nCreate an ajv instance and validate objects:\n\n```ts\nconst ajv = new Ajv( { allErrors: true } ); // allErrors is optional\n\nlet data, schema; // Get the JSON schema and the JSON data from somewhere\n\nconst validate = ajv.compile( schema );\nvalidate( data );\n```\n\nNow, the validation error is stored on the `validate` function. Use `prettify` to pretty-print the errors, and provide the data so that awesome-ajv-errors can suggest fixes:\n\n```ts\nconsole.log( prettify( validate, { data } ) );\n```\n\n\n## Configure styling\n\nInstead of auto-detecting based on the platform (Node.js or a browser), you can turn on/off colors, location printing (the json-snippet of the error) and whether to print big ascii numbers to the left of each error, if there are more than one error.\n\nWith the options object containing `data` provided to `prettify` you can include `colors`, `location` and `bigNumbers` as booleans, to override the defaults.\n\nTurning colors explicitly on will only enable colors if it's detected to be supported by the platform, but turning them off will always output non-colored text.\n\nTurning location on will also only enable the location printing if *colors* are detected to be supported by the underlying platform (this is a limitation in the current `@babel/code-frame` and will likely be resolved in Babel 8).\n\n`bigNumbers` will only be enabled if location printing is enabled, but can be explicitly turned off.\n\nExample:\n```ts\nconst colors = false;\nconst location = false;\nconst explanation = prettify( validate, { data, colors, location } );\n```\n\n\n\n[npm-image]: https://img.shields.io/npm/v/awesome-ajv-errors.svg\n[npm-url]: https://npmjs.org/package/awesome-ajv-errors\n[downloads-image]: https://img.shields.io/npm/dm/awesome-ajv-errors.svg\n[build-image]: https://img.shields.io/github/actions/workflow/status/grantila/awesome-ajv-errors/master.yml?branch=master\n[build-url]: https://github.com/grantila/awesome-ajv-errors/actions?query=workflow%3AMaster\n[coverage-image]: https://coveralls.io/repos/github/grantila/awesome-ajv-errors/badge.svg?branch=master\n[coverage-url]: https://coveralls.io/github/grantila/awesome-ajv-errors?branch=master\n[node-version]: https://img.shields.io/node/v/awesome-ajv-errors\n[node-url]: https://nodejs.org/en/\n[pure-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c\n","readmeFilename":"README.md"}