{"id":21663398,"url":"https://github.com/charlyjazz/prettyrestdoc","last_synced_at":"2025-07-07T19:34:24.377Z","repository":{"id":123946440,"uuid":"381797429","full_name":"CharlyJazz/prettyrestdoc","owner":"CharlyJazz","description":"A chrome extension and also a web app. Swagger UI Alternative. Get a pretty rest documentation app easily cloning this stuff :book: ","archived":false,"fork":false,"pushed_at":"2024-08-15T22:24:24.000Z","size":7806,"stargazers_count":13,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T19:40:04.238Z","etag":null,"topics":["api-documentation-tool","browser-extension","chrome-extension","css","documentation","extension","html","react","rest","rest-api","rest-documentation","swagger","swagger-ui"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/pretty-rest-api-documenta/fpbpajljjplbdpkijcnjocambjbigieb/related?hl=en\u0026authuser=0","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CharlyJazz.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-30T18:26:03.000Z","updated_at":"2025-02-21T15:05:09.000Z","dependencies_parsed_at":"2024-01-22T01:47:13.668Z","dependency_job_id":"2ebf3548-aeab-4a2e-8447-60b8674fbd2b","html_url":"https://github.com/CharlyJazz/prettyrestdoc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlyJazz%2Fprettyrestdoc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlyJazz%2Fprettyrestdoc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlyJazz%2Fprettyrestdoc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlyJazz%2Fprettyrestdoc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CharlyJazz","download_url":"https://codeload.github.com/CharlyJazz/prettyrestdoc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248497902,"owners_count":21113982,"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":["api-documentation-tool","browser-extension","chrome-extension","css","documentation","extension","html","react","rest","rest-api","rest-documentation","swagger","swagger-ui"],"created_at":"2024-11-25T10:21:43.053Z","updated_at":"2025-04-11T23:43:06.426Z","avatar_url":"https://github.com/CharlyJazz.png","language":"TypeScript","readme":"# PrettyRestDoc\n\n[Check it out the demo!](https://charlyjazz.github.io/prettyrestdoc/#User)\n\nThis is a template created in React to easily customize and build a REST API Documentation for commercial or development purposes. Project created using using create-react-app wth the typescript template\n\n|                                            Roles and Permissions                                            |                                               Preview Schema                                                |\n| :---------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: |\n| ![](https://user-images.githubusercontent.com/12489333/124013991-59944b00-d9b9-11eb-825e-5a02a9b99487.jpeg) | ![](https://user-images.githubusercontent.com/12489333/124013983-57ca8780-d9b9-11eb-90b6-6a0227e8bac3.jpeg) |\n\n|                                                   Search                                                    |                                              Endpoint Section                                               |\n| :---------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: |\n| ![](https://user-images.githubusercontent.com/12489333/124014002-5b5e0e80-d9b9-11eb-90ae-90e42f798149.jpeg) | ![](https://user-images.githubusercontent.com/12489333/124014698-3a49ed80-d9ba-11eb-9357-4678e4ebe17c.jpeg) |\n\n### Merge Between custom content and your API contract\n\nYou can easily sync you OpenAPI 3 JSON File using the \"SectionItem\" structure. In the next example you can see a SectionItem create for the Store tag from the PetStore Swagger example. This way can add images, descriptions, and introductory sections like \"Getting Started\"\n\n```javascript\nconst documentation: SectionItem = {\n  id: \"store\",\n  tag: \"store\",\n  schema: \"Order\",\n  title: \"Store\",\n  content: {\n    left_section_title: \"Stores\",\n    left_section_paragraphs: [\"This is a Store related operation\"],\n    right_box_snippet_white: true,\n    right_box_snippet_title: \"Example of a Order object\",\n  },\n  is_core_resource: true,\n};\n```\n\nStructure of a `SectionItem`:\n\n`id`: Anchor for URL\n\n`tag`: Tag to found content inside the OpenAPI3 JSON file\n\n`title`: Title for UI\n\n`content`: Titles and descriptions. Also you can create a object like a example of a response/request.\n\n`is_core_resource`: This boolean parameter help to split the content between sections like a \"Getting Started\" and the API endpoints\n\nWith a Array of SectionItems and the JSON of the OpenAPI Schema you can render the documentation:\n\n```javascript\nimport docSwagger from \"./petstore.json\"; // OpenAPI JSON\nimport APIDoc from \"./doc\"; // Array of SectionItem\n\n\u003cPrettyRestDoc docCustom={APIDoc} docSwagger={docSwagger} /\u003e;\n```\n\n### Section for Roles and Permissions\n\nYou can create easily a table for roles and permissions sending the prop roles to the component. **The `SectionItem` need the `roles-permissions` id for this special case.**\n\n```xml\n\u003cPrettyRestDoc\n  docCustom={APIDoc}\n  docSwagger={docSwagger as unknown as OpenAPIV3.Document}\n  roles={[\n    {\n      label: \"Client\",\n      value: 'client'\n    },\n    {\n      label: \"Admin\",\n      value: 'admin'\n    }]}\n/\u003e\n```\n\nThen you will need set the roles to each endpoint in the OpenAPI3 JSON.\n\n```json\n{\n  \"put\": {\n    \"tags\": [\"user\"],\n    \"roles\": [\"admin\"],\n    \"summary\": \"Update user\",\n    \"description\": \"This can only be done by the logged in user.\",\n    \"operationId\": \"updateUser\"\n  }\n}\n```\n\n### Customization and Styles\n\nThe structure of the project is very easy to understand. The code of the documentation is inside the `src/lib` folder:\n\n- `src/lib/adapter-ao3`: Logic to get content from OpenAPI3\n- `src/lib/components`: All UI components, you can change styles or logic easily (Modules CSS implemented)\n- `src/lib/hooks`: Hooks!\n- `src/lib/PrettyRestDoc.jsx`: Root Component\n\n### Current example in this Repository\n\nThis Repository have a example using the PetStore from Swagger with the sections Pet, Store and User. But with three sections introductories using the power of `SectionsItem` structures. Also there are a section for **Roles and Permissions**\n\n### Run Documentation in your local Browser\n\n```bash\nnpm install \u0026\u0026 npm run start\n```\n\n### Run Tests\n\n```bash\nnpm install \u0026\u0026 npm run test\n```\n\n### Chrome Extension\n\n### Credits\n\n- [Swagger](https://swagger.io/)\n- [OpenAPI](https://www.openapis.org/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlyjazz%2Fprettyrestdoc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlyjazz%2Fprettyrestdoc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlyjazz%2Fprettyrestdoc/lists"}