relequestual / json-schema-dev Goto Github PK

View Code? Open in Web Editor NEW

13.0 3.0 9.0 3.34 MB

JSON Schema dev

License: MIT License

JavaScript 11.36% HTML 3.38% Vue 85.26%

json-schema json-schema-editor

json-schema-dev's Introduction

jsonschema.dev

What is this?

This is the repository for the code that runs the jsonschema.dev website.

jsonschema.dev is a web based JSON Schema playground.

JSON Schema is a vocabulary allow for the validation and annotation of JSON documents... and a few other things.

Why?

Running the JSON Schema slack server has demonstrated there is no solution to easily test and share JSON Schema documents. There are other web based tools which offer a JSON Schema playground, however they run validation on the server, while jsonschema.dev runs all validation in browser using ajv.

This tool enables the JSON Schema community to find help easier in the same way jsfiddle enabled the javascript community to share and demo problems and solutions.

JSON Schema?

The chances are that if you're here, you probably don't need selling on the idea that JSON Schema is pretty useful... but just in case:

JSON Schema is a personal IETF draft specification proposal. According to the IETF definition of personal drafts, it's not advised to actually use the specification, and is intended to test concepts and gather feedback, however JSON Schema has been used in production by many top companies for years.

The OpenAPI specification (formally Swagger) uses a subset of JSON Schema specification to define payloads.

The main javascript package for JSON Schema boasts many dependants, including Webpack and eslint.

The most popular text editor / IDE, Microsoft's VS Code, supports JSON Schema validation out of the box.

Here are some of the other companies and organisations that use JSON Schema, from a presentation. (These are not endorsements.)

Contributing

If you would like to contribute to this project, please follow this basic guide. A more detaild guide to follow.

Check to see if an issue for your suggestion or requirement already exists
Create a new issue detailing your suggestion or problem, including examples if possible
Issues that are approved (agreed on) are now awaiting a Pull Request
Pull Requests should always be made against the develop branch
Pull Requests should never be made against the master branch

This project uses vue.

It is expected that you have some familairty with CLI and node.

It's recommended that you use nvm to install and manage node.

You will need to install node (probably using nvm) and then yarn (an alternative to npm).

Once installed, check out this git repository and run yarn with the repository root as your current working directory.

For local development, run yarn run serve.

For production build test, run yarn run build.

For more details, see the Vue CLI docs.

jsonschema.dev is automagically deployed to netlify using the master branch.

Netlify also provides Pull Request previews, which will automagically appear when a PR is created or new commits are pushed to the associated branch.

I have questions...

Super!

You can reach me on twitter or on the official json-schema.org slack

I'd like to support this work

Great! Please see the sponsor links at the top of this page.

json-schema-dev's People

Contributors

Stargazers

Watchers

Forkers

ryangalamb alfian878787 ravikant-trafers gregsdennis imtiyaz-ali-au51 samkenxstream

json-schema-dev's Issues

Move contributing instructions to contributing.md

This ensures that GitHub promotes them to contributors: https://help.github.com/en/articles/setting-guidelines-for-repository-contributors

Support for multiple libraries

I think it'd be cool if this site could be set up with a lib selector which would allow testing the same schema with different libraries.

I'd be happy to set up a server that could be called to perform validations using JsonSchema.Net.

It would need a disclaimer that says client-side validation isn't supported for this and probably other libs.

Alternative to calling a server (for .Net at least)

Use larger font size for inputs on mobile

iOS will "zoom" the page in when selecting an <input /> or <textarea /> with a font size less than 16. This "breaks" the layout and leads to a suboptimal experience. Also, small font sizes are hard to read for many users, so it's not the best UX anyway.

Auto-select link text on mobile

Tapping in the "share" textbox selects the text automatically on desktop, but not on mobile (or at least not on iOS). For consistency of UX, it should work across all platforms.

Improve use of space

There is a lot of "dead" space in the current design. The "active" parts of the UI could be rearranged to make better use of the user's available screen space.

Make failure to validate against schema more obvious

Maybe put another cross / tick on the json instance side?

Use URL segment for share links

Rather than using the query parameter (?shareData=abcdef) for share links, use a URL segment (/s/abcdef). This is slightly shorter and slightly neater.

Doesn't handle unable to resolve $ref error from ajv

bug: `unevaluatedProperties` is not working properly

I was reading #550 to understand the behavior of unevaluatedProperties and when testing the below example

on jsonschema.dev, I found that the validation result does not match what is expected by the example.

for this schema

{
    "title": "Vehicle",
    "type": "object",
    "oneOf": [
        {
            "title": "Car",
            "required": ["wheels", "headlights"],
            "properties": {
                "wheels": {},
                "headlights": {}
            }
        },
        {
            "title": "Boat",
            "required": ["pontoons"],
            "properties": {
                "pontoons": {}
            }   
        },  
        {
            "title": "Plane",
            "required": ["wings"],
            "properties": {
                "wings": {}
            }
        }
    ],
    "unevaluatedProperties": false
}

the instance { "headlights": {}, "pontoons": {} } should fail, but it is unexpectedly passing. (check this)

Provide auto complete

Auto complete based on the default schema OR based on a custom schema if $schema is provided and it is network addressable.

User request:
https://stackoverflow.com/questions/58107229

Support `idn-email` format

I wanted to check idn-email format but it looks like using of ajv-formats-draft2019 package is missing.

Refactor component structure

A significant amount of logic and layout for the app is currently in App.vue. This is fine for an MVP, but before adding more complexity it would be helpful to decompose the application into a number of smaller, easier to understand, easier to edit parts.

Improve editor experience

Currently the editor windows are a fixed size. It would be useful if it were possible to toggle between showing both the schema and instance, just the schema, or just the instance. This feature is common on online editors such as CodeSandbox, JSBin, JSFiddle, etc.

Unknown formats cause errors

Catch and handle unknown formats

Catch unresolveable references

Currently, if a $ref is unresolveable, the error is not reported to the end user and results in an uncaught error.

Example:

{
  "type": "object",
  "$ref": "foo.json"
}

Tests!

See if https://playwright.dev might be a good solution.
Consider https://testing-library.com/docs/vue-testing-library/intro/
For reference https://timdeschryver.dev/blog/generated-tests-with-xstate-and-cypress