redoc VS react-flip-toolkit

ReDoc Interactive Demo

ReDoc focuses on simplicity and readability, presenting the API documentation in a user-friendly format. It supports dark mode, multiple languages, and offers a seamless browsing experience for API consumers.

There are a few other tools out there that are at least marginally better than the default Swagger UI such as ReDoc (https://github.com/Redocly/redoc).

When we redid the Mux docs (https://docs.mux.com/api-reference) we actually just decided to build our own renderer. It really wasn't as bad as you might think, at build time we pull in the JSON version of our OAS spec and render it as a static build in our Nextjs app. Don't get me wrong, it wasn't trivial, but the benefit of having complete control over the output has been well worth it.

Redoc: http://localhost:8080/redoc

ReDoc is a tool that's similar to Swagger UI. It also takes an OAS and renders an interactive HTML page with full API documentation details; however, it has a notable difference.

take a look

Redoc is an open source tool to generate API reference documentation websites from OpenAPI definitions.

FastAPI for Python has an awesome way of doing this. It comes with two choices: Swagger and Redoc, the former being more interactive while the latter is (IMO) more visually appealing. I'm sure you could implement one of these using Spring.

Starlite has substantially enhanced OpenAPI (3.1) documentation - in fact, its the most complete autogenerated schema around, and it ships with Redoc, Swagger-UI and Stoplight-Elements static sites.

I've actually made a card game as a personal project. Flip animation libraries were really helpful. Things like this: https://github.com/aholachek/react-flip-toolkit

My point is that there are already many libraries out there. With styling, input events and so on. For example, I use Blueprintjs in many current projects, which provides a large set of widgets/components. One of these is a spreadsheet-like table component with sorting, editing, reordering and more. I also use react-grid-layout for card widgets that you can drag and resize and react-flip-toolkit for animation, among other things. There is a huge React ecosystem out there and duplicating all of that would take far, far too long.

It's in the linked github repo. It's using react-flip-toolkit which is personally my favorite React animation library. Here's the demo.

react-flip-toolkit will help you achieve this. They specifically have a demo for this too.