Skip to content

Build beautiful, interactive API Docs with embeddable React or Web Components, powered by OpenAPI and Markdown.

License

Notifications You must be signed in to change notification settings

vimystic/elements

This branch is 215 commits behind stoplightio/elements:main.

Folders and files

NameName
Last commit message
Last commit date
Mar 22, 2023
Jul 13, 2022
Apr 12, 2022
Apr 29, 2022
Mar 1, 2023
Feb 23, 2023
Jan 25, 2022
Mar 22, 2023
Nov 24, 2021
Jan 3, 2023
Apr 12, 2022
Jul 22, 2020
Jul 7, 2022
Jan 11, 2021
Nov 22, 2022
Sep 17, 2020
Feb 11, 2022
Jan 26, 2021
Jun 14, 2021
Apr 29, 2021
Mar 22, 2023
Jul 22, 2021
Jul 1, 2022
Nov 22, 2022
Feb 16, 2022
Feb 16, 2022
Jul 28, 2021
Apr 21, 2022
Mar 22, 2023

Repository files navigation

Elements - OpenAPI Powered API Documentation

Storybook CircleCI NPM Downloads Stoplight Forest

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

๐Ÿ“– 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 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:

  1. Clone this repo.
  2. Go to examples folder and open an example, e.g.: examples/angular.
  3. Run yarn to install all dependencies.
  4. 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

  • API Console (a.k.a "Try it!")
  • Automatic Code Samples
  • Automatic Examples
  • React & Web Component Support
  • OpenAPI Support
    • OpenAPI v3.1
    • OpenAPI v3.0
    • OpenAPI v2.0
  • Callbacks
  • Webhooks
  • 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.

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.

About

Build beautiful, interactive API Docs with embeddable React or Web Components, powered by OpenAPI and Markdown.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 98.8%
  • Other 1.2%