Getting Started with APIDocPro UI renderrer for Swagger, OpenAPI and AsyncAPI

API Doc Pro UI is the best choice for dynamically rendering any spec SwaggerAPI, OpenAPI, or AsyncAPI, all in one with one design. By Reallexi LLC @ Apidocpro.com

Documentation and live demo

https://ui.apidocpro.com

$3

``
npm i openapi-asyncapi-ui-render
`

- React

`
...
// React Component
import { ApiDocPro } from 'openapi-asyncapi-ui-render';

// Custom Theme can be clones from Default example when needed
import * as THEME from 'openapi-asyncapi-ui-render/dist/components/theme/green/green';
// import * as THEME from 'openapi-asyncapi-ui-render/dist/components/theme/noTheme/noTheme';
// import * as THEME from 'openapi-asyncapi-ui-render/dist/components/theme/default/default';

...

title="APIDocPro OpenAPI/AysncAPI UI"
rightRegion // Bool default true
leftRegion // Bool default true
header // Bool default true
theme={APIDOCPROTHEME} // Object of const default can be clones for new theme design or contribute
spec={spec} // string
/>
...
`

$3

https://opencollective.com/reallexi

$3

- 1- ReactS
- 2- Bootstrap

$3

- Features:
- 1- Code snippets
- 2- Logical design of parameters
- 3- Auto generate Examples from Parameters
- 4- Easy control of the design
- 5- Custom theming is simpler than ever, no need to be an expert in React to redesign
- 6- 3,2,1 columns by the need

OpenAPI

!apidocpro UI openapi render
!apidocpro UI openapi render
!apidocpro UI openapi render
!apidocpro UI openapi render
!apidocpro UI openapi render
!apidocpro UI openapi render
!apidocpro UI openapi render
!apidocpro UI openapi render
!apidocpro UI swagger render
!apidocpro UI openapi example 1 render
!apidocpro UI openapi example 2 render

AsyncAPI

!apidocpro UI Asyncapi render
!apidocpro UI Asyncapi Kafka render

`
/ eslint-disable no-unused-vars /
// import logo from './logo.svg';
import { useEffect, useState } from 'react';
import './App.css';
import { ApiDocPro } from 'openapi-asyncapi-ui-render';
// Custom Theme can be clones from Default example when needed
import * as THEME from 'openapi-asyncapi-ui-render/theme/default/default';
// Styles import
import 'openapi-asyncapi-ui-render/templates/theme/default/assets/styles/apidocpro-styles.scss';

function App() {
const [spec, setSpec] = useState('');
const [loading, setLoading] = useState(true);
const fetchAPIFile = (url) => {
fetch(url)
.then((response) => response.text())
.then((data) => {
setSpec(data);
setLoading(false);
});
};
useEffect(() => {
setLoading(true);
fetchAPIFile('/examples/asyncapi.json');
}, []);

return loading ? (


) : (

title="APIDocPro OpenAPI/AysncAPI UI"
rightRegion // Bool default true
leftRegion // Bool default true
header // Bool default true
theme={THEME} // Object of const default can be clones for new theme design or contribute
spec={spec} // string
/>

);
}

export default App;

`


$3

- APIDOCPROTHEME : default
- APIDOCPROTHEMEGREEN : Green style
- APIDOCPRONOTHEME : no extra styles

`
import { ApiDocPro } from 'openapi-asyncapi-ui-render'
// or
import { ApiDocPro } from 'openapi-asyncapi-ui-render/dist/components'


``

#### By Sam Ayoub

##### APIDocPro.com