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.

Overview

Overview

📖 Community

Let's chat about features, ideas, what you're doing with Elements, on GitHub Discussions.

👁️🗨 ️️Examples

Stoplight Elements comes with a few example integration projects, showing you how to utilize Elements with different frameworks.

react-cra - An example app built using Create React App utilizing Stoplight Elements.
react-gatsby - An example Gatsby site utilizing Stoplight Elements.
angular - An angular app utilizing the Web Components distribution of Elements.
bootstrap - A single HTML page utilizing the Web Components distribution via a global script tag.

To run these examples yourself:

Clone this repo.
Go to examples folder and open an example, e.g.: examples/angular.
Run yarn to install all dependencies.
Run yarn start to run the example.

Note: for bootstrap example just go straight to its directory and open the HTML file.

🏁 Usage

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.

React Component

$ 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.

Web Component

<!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.

🚧 Roadmap

[x] API Console (a.k.a "Try it!")
[x] Automatic Code Samples
[x] Automatic Examples
[x] React & Web Component Support
[x] OpenAPI Support
- [x] OpenAPI v3.1
- [x] OpenAPI v3.0
- [x] OpenAPI v2.0
[x] Callbacks
[x] Webhooks
[x] Multiple APIs (a.k.a "Dev Portal")

Submit your ideas for new functionality on the Stoplight Roadmap.

⚙️ Integrations

Stoplight Studio - Free visual OpenAPI designer that uses Elements to preview your API descriptions on the fly.
Stoplight Platform - Collaborative API Design Platform for designing, developing and documenting APIs with hosted documentation powered by Elements.
LaravelPHP Elements - A simple API documentation package for Laravel using OpenAPI and Stoplight Elements.

🏁 Help Others Utilize Elements

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 🎉

👏 Contributing

If you are interested in contributing to Elements itself, check out our contributing docs ⇗ and code of conduct ⇗ to get started.

🎉 Thanks

Elements is built on top of lots of excellent packages, and here are a few we'd like to say a special thanks to.

httpsnippet by Kong.
openapi-sampler by ReDocly.

Check these projects out!

🌲 Sponsor Elements by Planting a Tree

If you would like to thank us for creating Elements, we ask that you buy the world a tree.

stoplightio / elements

readme