Skip to content

[DEV-2699] Add rapidoc as api viewer #1668

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.

Sign up for GitHub

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 14 commits into
base: main
Choose a base branch
from
+206 −20
Open

[DEV-2699] Add rapidoc as api viewer #1668

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
47acca5
add rapidoc and base component
MarBert Sep 3, 2025
29362be
update style
MarBert Sep 3, 2025
f1ba8df
add focused
MarBert Sep 3, 2025
d02ed6b
add changeset
MarBert Sep 3, 2025
f50021b
Merge branch 'main' into DEV-2699-test-rapidoc
tommaso1 Sep 3, 2025
297c0f9
fixes to style
MarBert Sep 4, 2025
37f18ee
Update .changeset/thick-spoons-double.md
MarBert Sep 4, 2025
30212f9
update package-lock
MarBert Sep 4, 2025
b56aa21
Merge branch 'main' into DEV-2699-test-rapidoc
MarBert Sep 5, 2025
f2fe415
Merge branch 'main' into DEV-2699-test-rapidoc
marcobottaro Sep 8, 2025
043b16c
Merge branch 'main' into DEV-2699-test-rapidoc
marcobottaro Sep 19, 2025
2345b22
move global declaration to separate file
MarBert Oct 8, 2025
87256ef
Merge branch 'main' into DEV-2699-test-rapidoc
MarBert Oct 8, 2025
121af18
fix merge conflicts
MarBert Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/thick-spoons-double.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-website": minor
---

Switch api viewer to rapi-doc
70 changes: 57 additions & 13 deletions apps/nextjs-website/src/components/atoms/ApiViewer/ApiViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,70 @@
'use client';
import { FC } from 'react';
import { API } from '@stoplight/elements';
import '@stoplight/elements/styles.min.css';
import { Box, useTheme } from '@mui/material';
import { Product } from '@/lib/types/product';
import 'rapidoc';

// Extend JSX to recognize the custom element <rapi-doc>
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
interface IntrinsicElements {
'rapi-doc': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement>,
HTMLElement
> & {
'spec-url'?: string;
theme?: string;
'render-style'?: string;
'show-header'?: string;
'primary-color'?: string;
};
}
}
}

type ApiViewerProps = {
specURL: string;
product: Product;
hideTryIt?: boolean;
Copy link

Copilot AI Sep 23, 2025

Choose a reason for hiding this comment

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

The hideTryIt prop is still defined in ApiViewerProps but is no longer used in the component. This creates an inconsistent API where the prop is accepted but ignored.

Suggested change
hideTryIt?: boolean;

Copilot uses AI. Check for mistakes.

};
const ApiViewer: FC<ApiViewerProps> = ({
hideTryIt = true,
specURL,
product,
}) => {

const ApiViewer: FC<ApiViewerProps> = ({ specURL, product }) => {
const { palette } = useTheme();

// function that return current API component type
Copy link

Copilot AI Sep 23, 2025

Choose a reason for hiding this comment

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

This comment is unclear and doesn't accurately describe what the function does. It should be updated to describe that the function renders a RapiDoc API viewer component.

Suggested change
// function that return current API component type
// Renders a RapiDoc API viewer component for the provided OpenAPI spec URL

Copilot uses AI. Check for mistakes.

return (
<API
apiDescriptionUrl={specURL}
hideTryIt={hideTryIt}
basePath={`/${product.slug}/api`}
router={typeof window === 'undefined' ? 'memory' : 'hash'}
/>
<Box
sx={{
mt: 2,
display: 'flex',
height: '100%',
width: '100%',
overflow: 'hidden',
}}
>
<rapi-doc
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think you should remove the blue line at the top of the component
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

i tried to add custom css like here: https://rapidocweb.com/api.html but it doesn't seem to work. The border is an inline style option, so there is some part in the rapidoc parser that sets it.
image

spec-url={specURL}
theme='light'
nav-bg-color='#EBEEF5'
bg-color={palette.background.paper}
text-color={palette.text.primary}
nav-text-color={palette.text.primary}
regular-font='Titillium Web'
mono-font='Titillium Web'
font-size='largest'
render-style='focused'
show-header='false'
allow-authentication='false'
primary-color={palette.primary.main}
scroll-y-offset='0'
auto-scroll='false'
allow-try='false'
allow-server-selection='false'
show-method-in-nav-bar='as-plain-text'
show-components='true'
></rapi-doc>
</Box>
);
};

Expand Down
142 changes: 139 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
"dependencies": {
"crypto-js": "^4.2.0",
"elliptic": "^6.6.1",
"koa": "^3.0.0"
"koa": "^3.0.0",
"rapidoc": "^9.3.8"
},
"packageManager": "[email protected]",
"name": "developer-portal"
Expand Down
Loading