Skip to content

Add Stoplight Elements as built-in docs tool #5168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 35 commits into
base: master
Choose a base branch
from

Conversation

ShaharIlany
Copy link

New way to document the API using Stoplight Elements.
https://stoplight.io/open-source/elements

The user will be able to use all of the featuers that this product offers.(https://meta.stoplight.io/docs/elements/b074dc47b2826-elements-configuration-options)

This PR includes a custom function that is equivalent to get_swagger_ui_html and redoc_html.
Also there is an option to set the path of the docs from the constructor of the app just like docs_url and redoc_url

@codecov
Copy link

codecov bot commented Jul 18, 2022

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (cf73051) 100.00% compared to head (5ac4a30) 100.00%.
Report is 1038 commits behind head on master.

❗ Current head 5ac4a30 differs from pull request most recent head 0c4a71d. Consider uploading reports for the commit 0c4a71d to get more accurate results

Additional details and impacted files
@@            Coverage Diff            @@
##            master     #5168   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          540       538    -2     
  Lines        13969     13894   -75     
=========================================
- Hits         13969     13894   -75     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@github-actions
Copy link
Contributor

📝 Docs preview for commit 1070fee at: https://62d5bfe0ec4981009ec2a225--fastapi.netlify.app

@github-actions
Copy link
Contributor

📝 Docs preview for commit 9016390 at: https://62d5c4a1f505040d1d4ef659--fastapi.netlify.app

Copy link
Contributor

@yezz123 yezz123 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like stoplight! And this could configure it as well, I don't know if most developers could use it besides redoc or swagger but it's a good tool with a fantastic UI 🕺🏻

Copy link
Contributor

@JarroVGIT JarroVGIT left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great addition!! Would totally be in favour of including this, I really like the layout and feel of Elements Layout. Few comments on the code and tests, but overall great work!

@github-actions
Copy link
Contributor

📝 Docs preview for commit 703499e at: https://63066d942389381512531ae5--fastapi.netlify.app

@github-actions
Copy link
Contributor

📝 Docs preview for commit bbffb0e at: https://63067b643eb725209ea872d1--fastapi.netlify.app

@github-actions
Copy link
Contributor

📝 Docs preview for commit b4cd1f2 at: https://63067f21f758ce00a4671a6a--fastapi.netlify.app

@github-actions
Copy link
Contributor

📝 Docs preview for commit 0c4a71d at: https://639dd101c1082f2173d1c692--fastapi.netlify.app

@ShaharIlany
Copy link
Author

@tiangolo I've fixed the lint error and updated this branch with your master :-)

@imarinmed
Copy link

Is there any word on this? Seems @ShaharIlany's great work is more than ready! =)

@roycanani
Copy link

Looks great, waiting for that to be uploaded!
Great work @ShaharIlany !

@wangxin688
Copy link

redoc if good for API user to get start, but without testing api directly in swagger UI. stoplight elements just get both features. Hope this will be integrated to fastapi soon

@graham-atom
Copy link

any news on when this can get released?

@tiangolo tiangolo added feature New feature or request p3 and removed investigate labels Jan 15, 2024
@Abeautifulsnow
Copy link

Hopefully, this feature will be released soon!

@CostcoFanboy
Copy link

RIP.

@joshjhans
Copy link
Contributor

Any news? 👀

@YuriiMotov
Copy link
Contributor

Could you please elaborate on why do you think we need to have this as build-in feature?
What are the main features it brings? And why Stoplight Elements and not other tool?

@CostcoFanboy
Copy link

CostcoFanboy commented Aug 9, 2025

Could you please elaborate on why do you think we need to have this as build-in feature? What are the main features it brings? And why Stoplight Elements and not other tool?

I can't speak for the OP but I'd primarily value Stoplight Elements for its three-column layout which properly utilizes modern monitor real estate while still having an API client.

Swagger UI feels outdated on any modern monitors. It seems optimized for portrait-oriented screens rather than the wide monitors most developers use today. With complex services, the endless vertical scrolling in its single-column layout becomes cumbersome. I find myself constantly jumping between sections just to cross-reference information especially if you have cross-tag dependencies..

Stoplight's three-column design provides much better workflow efficiency. With Swagger, the more thoroughly you document your OpenAPI spec, the worse the UX becomes. For example, Stoplight organizes responses in clean tabs by status code, while Swagger displays them as one continuous list. If you document multiple status codes properly, simply opening an endpoint in Swagger can consume two screens worth of vertical space before you even reach the actual testing interface.

Looking at alternatives:

  • Redoc has a modern UI but requires a third-party plugin for interactive testing
  • RapiDoc appears to be abandoned (no updates since early 2024)

This leaves Stoplight Elements as the most viable option.

I do not know of other actively-maintained, mature and modern OpenAPI spec renderer that also give you an API Console.

For daily development work, it feels significantly more readable and more effective as an API testing interface.

@github-actions github-actions bot removed the waiting label Aug 9, 2025
@ShaharIlany
Copy link
Author

Thanks for reigniting the discussion and for @CostcoFanboy extremely helpful breakdown of the UX improvements Stoplight Elements brings to the table - especially its three‑column layout that makes API exploration far more ergonomic, and its built‑in API console.

Let me explain on why I believe Stoplight Elements is the right fit for FastAPI as a built‑in docs option:

Stoplight’s UI is purpose‑built for contemporary development workflows. Its design reduces vertical scrolling, organizes responses via clean tabs by status code, and lets you test endpoints inline. This directly addresses the frustration around Swagger UI’s single‑column, overly long endpoint views on widescreens.

While Redoc has a nice clean look, Stoplight goes a step further—it comes with an interactive API console built right in, no extra plugins or setup required. You can explore the docs and try out requests all in the same place, which makes it a true all-in-one tool for both documentation and testing.

This PR already brings in custom alternatives to get_swagger_ui_html and redoc_html, along with tests, tutorial examples, and docs preview support. I’m excited about the potential here and would love to see it merged and refined in one of the upcoming FastAPI releases.

@adam314315
Copy link

Hi. Also interested with native integration of Stoplight in FastApi. Is there already any branch or version that could be used to test the integration ?

@hasansezertasan
Copy link
Contributor

hasansezertasan commented Aug 9, 2025

Hi. Also interested with native integration of Stoplight in FastApi. Is there already any branch or version that could be used to test the integration ?

Maybe openapipages could be helpful here 🤓. I created it after this #10437 (comment), I don't think we'll have a native integration for any other tool in the near future 😢.

Copy link
Contributor

github-actions bot commented Aug 9, 2025

Copy link
Contributor

github-actions bot commented Aug 9, 2025

📝 Docs preview for commit 31fe59d at: https://983e2d46.fastapitiangolo.pages.dev

@ShaharIlany
Copy link
Author

Hi. Also interested with native integration of Stoplight in FastApi. Is there already any branch or version that could be used to test the integration ?

I’ve just updated my fork with the latest changes from HEAD, so you can use it to test Elements integration.
I’m not actively maintaining this fork, so I wouldn’t recommend using it in production.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request p3
Projects
None yet
Development

Successfully merging this pull request may close these issues.