react-cra

Stoplight Elements - Create React App Example

Table Of Contents

• Overview
  • Stoplight Project
  • Stoplight API
• Trying the example
  • Usage
    • Stoplight Project
    • Stoplight API
  • Functionality
• Elements in your own React App

Overview

Stoplight Elements can be embedded natively in React app. This example demonstrates usage of the Stoplight Project and Stoplight API components in a Create React App application and presents how to embed Elements in your own application.

Stoplight Project

This component allows embedding documentation that is connected to a Stoplight workspace. In this example, we are referring to elements-examples.stoplight.io workspace - studio-demo project to be more precise.

Stoplight API

Stoplight API component allows embedding documentation with no limitations to the file location, it can be anywhere on the web. In this example, we connect the API component directly to Zoom API OAS3 YAML file hosted on GitHub.

Trying the example

For instructions on how to run this example, please refer to the root README file

Usage

Stoplight Project

Click on the Stoplight Project button in the topbar menu to see that component in action:

Stoplight API

Click on the Stoplight API button in the topbar menu to see that component in action:

Functionality

• Navigate to Markdown section in order to see our beautiful Markdown Viewer in action

• Open any of the models to take a look at JSON Schema Viewer (JSV)

• View basic information about a given API in Overview section

• Open API endpoints to preview their properties and try out Http Request Maker

Elements in your own React App

Check out our Public Documentation and start using Stoplight Elements today!