{"id":20170291,"url":"https://github.com/marcodpt/json-schema-bootstrap","last_synced_at":"2025-10-05T20:35:42.747Z","repository":{"id":37912584,"uuid":"484060911","full_name":"marcodpt/json-schema-bootstrap","owner":"marcodpt","description":"My json-schema bootstrap user interface","archived":false,"fork":false,"pushed_at":"2022-08-30T19:09:26.000Z","size":722,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-13T15:27:34.035Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/marcodpt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-21T13:23:51.000Z","updated_at":"2022-04-21T19:52:35.000Z","dependencies_parsed_at":"2023-01-16T21:15:42.532Z","dependency_job_id":null,"html_url":"https://github.com/marcodpt/json-schema-bootstrap","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fjson-schema-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fjson-schema-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fjson-schema-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fjson-schema-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcodpt","download_url":"https://codeload.github.com/marcodpt/json-schema-bootstrap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241605820,"owners_count":19989612,"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":[],"created_at":"2024-11-14T01:18:10.855Z","updated_at":"2025-10-05T20:35:37.703Z","avatar_url":"https://github.com/marcodpt.png","language":"JavaScript","readme":"# json-schema-bootstrap\nMy json-schema bootstrap5 user interface\n\n[Live demo](https://marcodpt.github.io/h/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fjson-schema-bootstrap%2Fsamples.js)\n\n## Usage\n### Form sample\n```js\nimport jsb from 'https://cdn.jsdelivr.net/gh/marcodpt/json-schema-bootstrap/index.js'\n\nconsole.log(jsb({\n  schema: {\n    title: 'Docs Form',\n    properties: {\n      name: {\n        minLength: 1\n      },\n      bio: {\n        title: '',\n        description: 'Say something about yourself...',\n        format: 'text'\n      }\n    },\n    default: {\n      name: 'John'\n    }\n  },\n  options: {\n    resolve: data =\u003e console.log(JSON.stringify(data, undefined, 2))\n  }\n}))\n```\n\n```html\n\u003cform novalidate=\"\"\u003e\n  \u003cfieldset\u003e\n    \u003clegend\u003eDocs Form\u003c/legend\u003e\n    \u003cdiv class=\"row my-3\"\u003e\n      \u003cdiv class=\"col-md-3\"\u003e\n        \u003clabel class=\"form-label\"\u003ename\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-9\"\u003e\n        \u003cdiv\u003e\n          \u003cinput class=\"form-control\" type=\"text\" value=\"John\"\u003e\n          \u003cdiv class=\"invalid-feedback\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"row my-3\"\u003e\n      \u003cdiv class=\"col-md-12\"\u003e\n        \u003cdiv\u003e\n          \u003ctextarea\n            class=\"form-control\"\n            rows=\"6\"\n            placeholder=\"Say something about yourself...\"\n          \u003e\u003c/textarea\u003e\n          \u003cdiv class=\"invalid-feedback\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"row g-3 align-items-center\"\u003e\n      \u003cdiv class=\"col-auto\"\u003e\n        \u003cbutton class=\"btn btn-primary\" type=\"button\"\u003e\n          \u003ci class=\"fas fa-check\"\u003e\u003c/i\u003e Submit\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/fieldset\u003e\n\u003c/form\u003e\n```\n\n### Table sample\n```js\nimport jsb from 'https://cdn.jsdelivr.net/gh/marcodpt/json-schema-bootstrap/index.js'\n\nconsole.log(jsb({\n  schema: {\n    title: 'Docs Table',\n    links: [\n      {\n        title: 'Post',\n        href: '#/post',\n        ui: 'btn btn-success',\n        icon: 'fas fa-pencil-alt',\n        rel: 'self'\n      }\n    ],\n    items: {\n      properties: {\n        id: {},\n        register: {\n          format: 'date'\n        },\n        name: {\n          href: '#?name={name}'\n        }\n      },\n      links: [\n        {\n          href: '#/delete/{id}',\n          rel: 'self',\n          icon: 'fas fa-trash',\n          ui: 'btn btn-danger btn-sm'\n        }, {\n          href: '#/edit/{id}',\n          rel: 'self',\n          icon: 'fas fa-edit',\n          ui: 'btn btn-warning btn-sm'\n        }\n      ]\n    },\n    default: [\n      {\n        id: 1,\n        register: '2021-03-02',\n        name: 'Liam' \n      }, {\n        id: 2,\n        register: '2021-01-05',\n        name: 'Olivia'\n      }\n    ]\n  }\n}))\n```\n\n```html\n\u003ctable class=\"table table-bordered table-center table-striped table-hover\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth class=\"text-center\" colspan=\"100%\"\u003e\u003cspan\u003eDocs Table\u003c/span\u003e\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth class=\"text-center\" colspan=\"100%\"\u003e\n        \u003cdiv class=\"row gx-1 justify-content-center\"\u003e\n          \u003cdiv class=\"col-auto\"\u003e\n            \u003ca class=\"btn btn-success\" href=\"#/post\"\u003e\n              \u003ci class=\"fas fa-pencil-alt\"\u003e\u003c/i\u003e Post\n            \u003c/a\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth class=\"text-center align-middle\"\u003e\n        \u003ca class=\"btn btn-danger btn-sm disabled\" href=\"\"\u003e\n          \u003ci class=\"fas fa-trash\"\u003e\u003c/i\u003e\n        \u003c/a\u003e\n      \u003c/th\u003e\n      \u003cth class=\"text-center align-middle\"\u003e\n        \u003ca class=\"btn btn-warning btn-sm disabled\" href=\"\"\u003e\n          \u003ci class=\"fas fa-edit\"\u003e\u003c/i\u003e\n        \u003c/a\u003e\n      \u003c/th\u003e\n      \u003cth class=\"text-center align-middle\"\u003e\u003cspan\u003eid\u003c/span\u003e\u003c/th\u003e\n      \u003cth class=\"text-center align-middle\"\u003e\u003cspan\u003eregister\u003c/span\u003e\u003c/th\u003e\n      \u003cth class=\"text-center align-middle\"\u003e\u003cspan\u003ename\u003c/span\u003e\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003ca class=\"btn btn-danger btn-sm\" href=\"#/delete/1\"\u003e\n          \u003ci class=\"fas fa-trash\"\u003e\u003c/i\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003ca class=\"btn btn-warning btn-sm\" href=\"#/edit/1\"\u003e\n          \u003ci class=\"fas fa-edit\"\u003e\u003c/i\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003cspan\u003e1\u003c/span\u003e\n      \u003c/td\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003cspan\u003e3/1/2021\u003c/span\u003e\n      \u003c/td\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003ca href=\"#?name=Liam\"\u003eLiam\u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003ca class=\"btn btn-danger btn-sm\" href=\"#/delete/2\"\u003e\n          \u003ci class=\"fas fa-trash\"\u003e\u003c/i\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003ca class=\"btn btn-warning btn-sm\" href=\"#/edit/2\"\u003e\n          \u003ci class=\"fas fa-edit\"\u003e\u003c/i\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003cspan\u003e2\u003c/span\u003e\n      \u003c/td\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003cspan\u003e1/4/2021\u003c/span\u003e\n      \u003c/td\u003e\n      \u003ctd class=\"text-center align-middle\"\u003e\n        \u003ca href=\"#?name=Olivia\"\u003eOlivia\u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n## Params\n - object `schema`: JSON schema (or hyperschema) of the element\n - object `options`: Optional object with config options, properties:\n   - function `resolve`(`data`): A function that will be called with current \n      UI data every time user resolve it and pass validation.\n   - function `reject`(`error`, `data`): A function that will be called with\n      an error message and current data every time user resolve it and DO NOT\n      pass validation.\n   - function `loader`(`url`): A function that returns a promise with the\n      result of fetch `url`.\n   - function `watch`(`data`): A function that resolve changes in child\n      outside of `resolve`, useful for example for table checkbox.\n   - boolean `showValid` (default: false): Wherever you want to use valid\n      interface on user input.\n   - string `language` (default: en): One of the available languages\n      (`en`: English, `pt`: Portuguese). Please help us extend the supported \n      languages in the folder [lang](https://github.com/marcodpt/json-schema-bootstrap/tree/main/lang).\n   - object `interfaces` (default: {}): User defined interfaces, properties:\n     - string `keys`: name of the interface, to be used with `format` property.\n     - function `values`(`schema`, `submit`(`data`), `options`): A function\n      that defines a new user interface, where `schema` and `options` is the\n      original variables passed, and `submit` is a function to update the\n      the input value (in case `submit` is `null` it is a read only output).\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fjson-schema-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcodpt%2Fjson-schema-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fjson-schema-bootstrap/lists"}