Enhance responsiveness

I found that the text and description in the card of the landing page are text-aligned left for

• JSON Schema Viewer / Editor
• Configurable
• Open source
  I think It does not suit the responsiveness of the website
  I went through the code and made it text-align center below I will attach the screenshot comparing both:

Screen Width above 1200 px

From:

To;

Screen Width below 1200 px

From:

To:

Screen Width below 500px:

###From:

###To:

Describe the bug
A schema with an empty "examples" array at the top level leads to a page crash with the error

Docusaurus error: the <Tabs> component requires at least one <TabItem> children component

To Reproduce

The following page will demonstrate the crash

<JSONSchemaViewer 
    schema={ {
        "$schema": "http://json-schema.org/draft-07/schema#",
        "examples": []
    } } 
    viewerOptions={ 
        {
        "showExamples": true, 
        }
    }
/>

Demonstrated with Docusaurus 3.4.0, docusaurus-json-schema-plugin 1.12.1

Expected behavior

Behave as if the examples array was not present

Screenshots

Desktop (please complete the following information):

• OS: Served in Linux; viewed in Linux & Windows
• Browser [e.g. chrome, safari]: Firefox
• Version [e.g. 22] FIrefox 128

Hi,

I was wondering whether it's possible to show the description above the type, which is particularly useful for objects with a lot of fields.

Is your feature request related to a problem? Please describe.
When showing examples within the schema, they are currently output as a single line of JSON, which may be rather long.

Describe the solution you'd like
It would seem helpful to pretty-print the examples somehow. Color would be nice to have, but just adding newlines / indentation would be an easy win.

Additional context

I'm getting my head around the codebase - I think the change needs to go here?

Is it as simple as adding JSON.stringify(item.value, null, 4) to the <CreateValue> on line 53?

Hello,

Some ideas for Hacktoberfest contributors :

• #262
• #254
• #258
• #166
• #271
• #272
• #273

List isn't closed : Feel free to create Discussion ticket(s) if you have other ideas that the ones listed

I created a page to display all my json-schema (i,e /schema), I used schema.mdx file to display it

In each of the mdx file, it looks something like this but importing different json file

import JSONSchemaViewer from "@theme/JSONSchemaViewer"
import schema from "@site/static/schema/geo.json"

<JSONSchemaViewer schema={schema} />

In local development, it works as expected.

But when I build and serve it, it doesn't load the content

Not sure if it matters but I'm using javascript setup of docusaurus instead of typescript.

Let me know if more information is required, or if this is a docusaurus issue, then I can redirect over to their repo.

Thanks!

Hi there! thanks for this wonderful plugin :)

Any hint on how to customize the colors used by the JSONSchemaViewer React component and override the ones given by docusaurus?

thanks!

Is it possible to support it?

See mongodb-jsonschema

A sample

{ $jsonSchema: <JSON Schema object> }

{
  $jsonSchema: {
     required: [ "name", "major", "gpa", "address" ],
     properties: {
        name: {
           bsonType: "string",
           description: "must be a string and is required"
        },
        address: {
           bsonType: "object",
           required: [ "zipcode" ],
           properties: {
               "street": { bsonType: "string" },
               "zipcode": { bsonType: "string" }
           }
        }
     }
  }
}

If it does, I imagine I would use the same way I did before to display it

import JSONSchemaViewer from "@theme/JSONSchemaViewer"
import schema from "@site/static/schema/mongo.json"

<JSONSchemaViewer schema={schema} />

Thanks

It would be nice if we could use # in the url to link directly to specific fields in the json schema representation

I hesitate to report this as an issue since it was found while using swizzled source code against the latest Docusaurus beta, so maybe it's not a concern, but I found that the downstream parsing of the return value from this line doesn't work because it is a Set[] instead of an string[] (or whatever is in the original array).

I believe the TypeScript issue is reported, but I've had no luck with configuring TypeScript compile this to be an array, and had to patch with:

- return [...new Set(declaredTypes)];
+ return Array.from(new Set(declaredTypes));