{"id":13495557,"url":"https://github.com/stoplightio/elements","last_synced_at":"2025-05-12T15:20:56.091Z","repository":{"id":37086896,"uuid":"184680614","full_name":"stoplightio/elements","owner":"stoplightio","description":"Build beautiful, interactive API Docs with embeddable React or Web Components, powered by OpenAPI and Markdown.","archived":false,"fork":false,"pushed_at":"2025-04-03T04:28:31.000Z","size":24930,"stargazers_count":2010,"open_issues_count":218,"forks_count":225,"subscribers_count":20,"default_branch":"main","last_synced_at":"2025-04-23T17:17:05.494Z","etag":null,"topics":["api","api-documentation","gatsby","hacktoberfest","openapi","openapi3","openapi3-1","react"],"latest_commit_sha":null,"homepage":"https://stoplight.io/open-source/elements/","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/stoplightio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-03T01:05:01.000Z","updated_at":"2025-04-23T10:11:33.000Z","dependencies_parsed_at":"2023-09-28T22:40:03.651Z","dependency_job_id":"9dbb9f44-51ea-48ce-8573-24068eb5f958","html_url":"https://github.com/stoplightio/elements","commit_stats":{"total_commits":1515,"total_committers":86,"mean_commits":17.61627906976744,"dds":0.8871287128712871,"last_synced_commit":"589d49ba145def944997aaca1481d9de3ff2bb2b"},"previous_names":["stoplightio/http-ui"],"tags_count":407,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stoplightio%2Felements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stoplightio%2Felements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stoplightio%2Felements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stoplightio%2Felements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stoplightio","download_url":"https://codeload.github.com/stoplightio/elements/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250477820,"owners_count":21437049,"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","api-documentation","gatsby","hacktoberfest","openapi","openapi3","openapi3-1","react"],"created_at":"2024-07-31T19:01:35.873Z","updated_at":"2025-04-23T17:17:47.684Z","avatar_url":"https://github.com/stoplightio.png","language":"TypeScript","readme":"[![Elements - OpenAPI Powered API Documentation](docs/images/readme-header.svg)][elements_landing_page]\n\n[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://stoplight-elements.netlify.app)\n[![CircleCI][circle_ci_image]][circle_ci]\n[![NPM Downloads][circle_ci_image]][npm]\n[![Stoplight Forest](https://img.shields.io/ecologi/trees/stoplightinc)][stoplight_forest]\n\nBeautiful API documentation powered by OpenAPI and Markdown. Use these UI components to create API reference documentation, or more complete documentation with Markdown articles covering tutorials, how-to guides, etc.\n\nAvailable as React Components, or Web Components, you can use Elements all together to build beautiful three-column \"Stripe-esque\" documentation, or stacked documentation thats easier for integrating into existing Content Management Systems with their own navigation.\n\n# Overview\n\n- [Overview](#overview)\n  - [📖 Community](#-community)\n  - [👁️🗨 ️️Examples](#️-️️examples)\n  - [🏁 Usage](#-usage)\n    - [React Component](#react-component)\n    - [Web Component](#web-component)\n  - [🚧 Roadmap](#-roadmap)\n  - [⚙️ Integrations](#️-integrations)\n  - [🏁 Help Others Utilize Elements](#-help-others-utilize-elements)\n  - [👏 Contributing](#-contributing)\n  - [🎉 Thanks](#-thanks)\n  - [🌲 Sponsor Elements by Planting a Tree](#-sponsor-elements-by-planting-a-tree)\n\n## 📖 Community\n\nLet's chat about features, ideas, what you're doing with Elements, on [GitHub Discussions](https://github.com/stoplightio/elements/discussions).\n\n## 👁️🗨 ️️Examples\n\nStoplight Elements comes with a few example integration projects, showing you how to utilize Elements with different frameworks.\n- **[react-cra](./examples/react-cra)** - An example app built using Create React App utilizing Stoplight Elements.\n- **[angular](./examples/angular)** - An angular app utilizing the Web Components distribution of Elements.\n- **[bootstrap](./examples/bootstrap)** - A single HTML page utilizing the Web Components distribution via a global script tag.\n\nTo run these examples yourself:\n1. Clone this repo.\n2. Go to `examples` folder and open an example, e.g.: `examples/angular`.\n3. Run `yarn` to install all dependencies.\n4. Run `yarn start` to run the example.\n\n\u003e **Note:** for **bootstrap** example just go straight to its directory and open the HTML file.\n\n## 🏁 Usage\n\nThe examples will hopefully help show Elements working in close to real world situations, but the most bare bones examples of Elements can be found below.\n\n### React Component\n\n```bash\n$ npm install @stoplight/elements\n```\n\n```js\nimport { API } from \"@stoplight/elements\";\n\n\u003cAPI\n  apiDescriptionUrl=\"https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml\"\n  router=\"history\"\n/\u003e\n```\n\nFor more information on using Elements as a React component, head over to our [React documentation](docs/getting-started/elements/react.md).\n### Web Component\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n    \u003ctitle\u003eElements in HTML\u003c/title\u003e\n    \u003c!-- Embed elements Elements via Web Component --\u003e\n    \u003cscript src=\"https://unpkg.com/@stoplight/elements/web-components.min.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@stoplight/elements/styles.min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003celements-api\n      apiDescriptionUrl=\"https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml\"\n      router=\"hash\"\n      layout=\"sidebar\"\n    /\u003e\n\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLoad this page up in your browser and you should see the [GitHub REST API](https://docs.github.com/en/rest) documented in Stoplight Elements.\n\nFor more information on using Elements as a Web Component, head over to our [Web Component documentation](docs/getting-started/elements/html.md).\n\n## 🚧 Roadmap\n\n- [x] API Console (a.k.a \"Try it!\")\n- [x] Automatic Code Samples\n- [x] Automatic Examples\n- [x] React \u0026 Web Component Support\n- [x] OpenAPI Support\n  - [x] OpenAPI v3.1\n  - [x] OpenAPI v3.0\n  - [x] OpenAPI v2.0\n- [x] Callbacks\n- [x] Webhooks\n- [x] Multiple APIs (a.k.a \"Dev Portal\")\n\nSubmit your ideas for new functionality on the [Stoplight Roadmap](https://roadmap.stoplight.io/?utm_source=github\u0026utm_medium=elements\u0026utm_campaign=readme).\n\n## ⚙️ Integrations\n\n- [Stoplight Studio](https://stoplight.io/studio/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=github_repo_elements) - Free visual OpenAPI designer that uses Elements to preview your API descriptions on the fly.\n- [Stoplight Platform](https://stoplight.io/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=github_repo_elements) - Collaborative API Design Platform for designing, developing and documenting APIs with hosted documentation powered by Elements.\n- [LaravelPHP Elements](https://packagist.org/packages/juststeveking/laravel-stoplight-elements) - A simple API documentation package for Laravel using OpenAPI and Stoplight Elements.\n\n## 🏁 Help Others Utilize Elements\n\nIf you're using Elements for an interesting use case, [contact us](mailto:growth@stoplight.io) for a case study. We'll add it to a list here. Spread the goodness 🎉\n\n## 👏 Contributing\n\nIf you are interested in contributing to Elements itself, check out our [contributing docs ⇗][contributing] and [code of conduct ⇗][code_of_conduct] to get started.\n\n## 🎉 Thanks\n\nElements is built on top of lots of excellent packages, and here are a few we'd like to say a special thanks to.\n\n- [httpsnippet](https://www.npmjs.com/package/httpsnippet) by [Kong](https://github.com/Kong).\n- [openapi-sampler](https://www.npmjs.com/package/openapi-sampler) by [ReDocly](https://redoc.ly/).\n\nCheck these projects out!\n\n## 🌲 Sponsor Elements by Planting a Tree\n\nIf you would like to thank us for creating Elements, we ask that you [**buy the world a tree**][stoplight_forest].\n\n[stoplight_forest]: https://ecologi.com/stoplightinc\n\n[code_of_conduct]: CODE_OF_CONDUCT.md\n[contributing]: CONTRIBUTING.md\n[download-release]: https://github.com/stoplightio/elements/releases/latest\n[elements_landing_page]: https://elements-demo.stoplight.io?utm_source=github\u0026utm_medium=elements\u0026utm_campaign=readme\n[circle_ci]: https://circleci.com/gh/stoplightio/elements\n[circle_ci_image]: https://img.shields.io/circleci/build/github/stoplightio/elements/main\n[npm]: https://www.npmjs.com/package/@stoplight/elements\n[npm_image]: https://img.shields.io/npm/dw/@stoplight/elements?color=blue\n[stoplight_forest]: https://ecologi.com/stoplightinc\n","funding_links":[],"categories":["TypeScript","Recently Updated","Projects","api","API Documentation","Documentation Types"],"sub_categories":["[Feb 05, 2025](/content/2025/02/05/README.md)","API Documentation",".Dart"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstoplightio%2Felements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstoplightio%2Felements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstoplightio%2Felements/lists"}