Beautiful 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.
Available 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.
Let's chat about features, ideas, what you're doing with Elements, on GitHub Discussions.
Stoplight Elements comes with a few example integration projects, showing you how to utilize Elements with different frameworks.
To run these examples yourself:
examples folder and open an example, e.g.: examples/angular.yarn to install all dependencies.yarn start to run the example.Note: for bootstrap example just go straight to its directory and open the HTML file.
The 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.
$ npm install @stoplight/elements
import { API } from "@stoplight/elements";
<API
apiDescriptionUrl="https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml"
router="history"
/>
For more information on using Elements as a React component, head over to our React documentation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Elements in HTML</title>
<!-- Embed elements Elements via Web Component -->
<script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">
</head>
<body>
<elements-api
apiDescriptionUrl="https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml"
router="hash"
layout="sidebar"
/>
</body>
</html>
Load this page up in your browser and you should see the GitHub REST API documented in Stoplight Elements.
For more information on using Elements as a Web Component, head over to our Web Component documentation.
Submit your ideas for new functionality on the Stoplight Roadmap.
If you're using Elements for an interesting use case, contact us for a case study. We'll add it to a list here. Spread the goodness π
If you are interested in contributing to Elements itself, check out our contributing docs β and code of conduct β to get started.
Elements is built on top of lots of excellent packages, and here are a few we'd like to say a special thanks to.
Check these projects out!
π² Sponsor Elements by Planting a TreeIf you would like to thank us for creating Elements, we ask that you buy the world a tree.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4