{"id":15013046,"url":"https://github.com/kickstartds/storybook-addon-jsonschema","last_synced_at":"2025-07-08T20:05:58.777Z","repository":{"id":45470935,"uuid":"417233747","full_name":"kickstartDS/storybook-addon-jsonschema","owner":"kickstartDS","description":"Displays associated JSON Schema documentation using a rich schema explorer interface, and adds a validating JSON Code Editor with semantic auto-complete to interact with your components, and copy configurations with ease.","archived":false,"fork":false,"pushed_at":"2024-04-12T07:03:49.000Z","size":2691,"stargazers_count":13,"open_issues_count":12,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T04:13:41.502Z","etag":null,"topics":["addon-controls","controls","data-state","json","json-schema","jsonschema","react","storybook","storybook-addon"],"latest_commit_sha":null,"homepage":"https://www.kickstartDS.com/docs/integration/storybook/schema","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kickstartDS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-10-14T18:02:56.000Z","updated_at":"2025-02-19T17:06:34.000Z","dependencies_parsed_at":"2023-01-25T22:16:39.906Z","dependency_job_id":"66ae454f-b8a4-457d-afc8-f2296926c150","html_url":"https://github.com/kickstartDS/storybook-addon-jsonschema","commit_stats":{"total_commits":49,"total_committers":7,"mean_commits":7.0,"dds":"0.34693877551020413","last_synced_commit":"e0e59351b0708760c7252870ca1b3202bdaa1a5d"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":"storybookjs/addon-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-jsonschema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-jsonschema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-jsonschema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstartDS%2Fstorybook-addon-jsonschema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kickstartDS","download_url":"https://codeload.github.com/kickstartDS/storybook-addon-jsonschema/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514426,"owners_count":21116963,"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":["addon-controls","controls","data-state","json","json-schema","jsonschema","react","storybook","storybook-addon"],"created_at":"2024-09-24T19:43:39.506Z","updated_at":"2025-04-12T04:21:28.754Z","avatar_url":"https://github.com/kickstartDS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook JSON Schema Addon\n\nDisplays associated JSON Schema documentation using a rich `JSON Schema Explorer` interface, and adds a validating JSON Code Editor with semantic auto-complete to interact with your components, and copy configurations with ease.\n\n`JSON Schema Explorer` is based on the excellent [Atlassian JSON Schema Viewer](https://github.com/atlassian-labs/json-schema-viewer).\nIt was slightly modified to generate bundles that can be imported for partial use, like this addon does.\n\n`JSON Code Editor` is based on [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react). The editor is connected to your story state / args, so changing props through `Controls` is reflected in the code shown. Vice-versa if you edit the JSON, and the result is valid according to the schema, your changed args are applied to the story, too.\n\n**[Show me a working demo](https://www.kickstartds.com/storybook/?path=/story/base-content-box--image)** (click on the `JSON Schema` addon tab)\n\n![Teaser image](docs/teaser.png)\n\n**Table of contents:**\n\n- [Storybook JSON Schema Addon](#storybook-json-schema-addon)\n  - [What it's for](#what-its-for)\n  - [Getting started](#getting-started)\n  - [Advanced configuration](#advanced-configuration)\n  - [Authors](#authors)\n\n## What it's for\n\nThree things you can use this addon for:\n\n1. Explore associated JSON Schema documentation, in a nicely organized fashion in the `JSON Schema Explorer`\n2. Configure components through Controls, copy the resulting JSON as a starting point or template for API-usage / data generation purposes in the `JSON Code Editor`\n3. Paste JSON to validate data or preview component state in the `JSON Code Editor`\n\n## Getting started\n\nPrerequesite: Your components need to have JSON Schema files associated with them. Additionally schemas need to be dereferenced already, as $ref-resolution is not (a tested) part of this addon (yet? ... let us know in the issues if you need this).\n\nFirst step is to install the addon:\n\n```sh\n$ yarn add --dev @kickstartds/storybook-addon-jsonschema\n```\n\nSecond step, register the addon inside your `.storybook/main.js` (just add it to the list):\n\n```javascript\nmodule.exports = {\n  addons: [\"@kickstartds/storybook-addon-jsonschema\"],\n};\n```\n\nThird step, export the schema as [component- or story parameter](https://storybook.js.org/docs/react/writing-stories/parameters):\n\n```javascript\nexport default {\n  title: \"Button\",\n  component: Button,\n  parameters: {\n    jsonschema: {\n      schema: {\n        $schema: \"http://json-schema.org/draft-07/schema#\",\n        $id: \"https://my-components/button.schema.json\",\n        type: \"object\",\n        properties: {\n          primary: {\n            type: \"boolean\",\n            default: false,\n          },\n          label: {\n            type: \"string\",\n          },\n        },\n      },\n    },\n  },\n};\n```\n\n## Advanced configuration\n\nThis addon is still early, advanced configuration options will be added at a later date. Feel free to let us know in the issues if something specific is unclear, or doesn't work!\n\n## Authors\n\nThis addon was made with 🍋 by the team behind [kickstartDS - the frontend first framework](https://www.kickstartds.com/)!\n\n\u003e kickstartDS is a comprehensive component and pattern library\n\n\u003e We enable web development teams to create consistent and brand compliant web frontends super efficiently. With a built-in Design System to serve all your digital touch points. Easy like squeeeeezing a lemon.\n\nWe use the addon to let users of our Design System solution interact with their components through our core JSON Schema property-layer. View our [landing page](https://www.kickstartds.com/) to learn more! 👋\n\n![cTeaser image](https://www.kickstartds.com/logo.svg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkickstartds%2Fstorybook-addon-jsonschema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkickstartds%2Fstorybook-addon-jsonschema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkickstartds%2Fstorybook-addon-jsonschema/lists"}