Gathering detailed insights and metrics for @stoplight/elements
Gathering detailed insights and metrics for @stoplight/elements
Installations
npm install @stoplight/elementsDeveloper
Developer Guide
BETA
Module System
CommonJS, ESM
Min. Node Version
>=16
Typescript Support
No
Node Version
18.20.5
NPM Version
lerna/7.4.2/node@v18.20.5+x64 (linux)
Statistics
1,818 Stars
1,518 Commits
206 Forks
21 Watching
39 Branches
114 Contributors
Updated on 27 Nov 2024
Languages
TypeScript (98.93%)
JavaScript (0.79%)
CSS (0.16%)
Shell (0.13%)
Total Downloads
Cumulative downloads
Total Downloads
2,772,664
Last day
80.2%
6,601
Compared to previous day
Last week
49%
41,416
Compared to previous week
Last month
2.1%
146,785
Compared to previous month
Last year
120.9%
1,578,461
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
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 using Create React App 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
examplesfolder and open an example, e.g.:examples/angular. - Run
yarnto install all dependencies. - Run
yarn startto 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
1$ npm install @stoplight/elements
1import { API } from "@stoplight/elements"; 2 3<API 4 apiDescriptionUrl="https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml" 5 router="history" 6/>
For more information on using Elements as a React component, head over to our React documentation.
Web Component
1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <title>Elements in HTML</title> 7 <!-- Embed elements Elements via Web Component --> 8 <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script> 9 <link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css"> 10 </head> 11 <body> 12 13 <elements-api 14 apiDescriptionUrl="https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml" 15 router="hash" 16 layout="sidebar" 17 /> 18 19 </body> 20</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.
- 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.
No vulnerabilities found.
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
all changesets reviewed
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE.md:0
Reason
SAST tool is run on all commits
Details
- Info: all commits (30) are checked with a SAST tool
Reason
5 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: topLevel 'contents' permission set to 'write': .github/workflows/auto-merge-dependabot.yml:8
- Warn: no topLevel permission defined: .github/workflows/jira-issue-label-added.yaml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto-approve.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/stoplightio/elements/auto-approve.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto-merge-dependabot.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/stoplightio/elements/auto-merge-dependabot.yml/main?enable=pin
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Score
6
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More