OSCAL React Library
These components enable React application developers to quickly compose pages that display granular elements of OSCAL data or entire catalogs, profiles, component definitions, and system security plans.
Take a tour with the live demo or learn more about developing with the library below.
Components and Documentation
The library provides OSCAL UI developers a flexible framework for using OSCAL React components in their own applications.
Those components directly visualize granular elements of the OSCAL JSON format, allowing a developer to assemble them in the manner that best fits their application.
Documentation for the React components, as well as an editable mockup of each component, can be found on our Storybook page.
The viewer appplication shows how those components can be assembled to create an OSCAL Viewer application.
Building and Running Locally
In order to use the library components or test the library locally, the project components need to be rolled up and
dependencies need to be installed initially with the command:
npm ci. From here the application can be built
(See "OSCAL Viewer → Running") or components can be tested (See "Testing"). To automate local installation and
immediately run the application, use the following command:
To run the test suite, ensure dependencies are installed and run
npm run test. To also validate code is passing
eslint linting requirements, run
npm run lint.
Development on the library primarily takes place in
packages/oscal-react-library. React components
are added in that package. Paths in this section are relative to that directory.
A component can be created and added to
src/components. In order for the component to be used in an application,
it must either be added as an export in
src/index.js or referenced by a component already being exported start(such as
components being referenced by a loader in the current OSCAL Viewer). In the root folder of the project, run
npm run watch to roll up all of the components into
dist/ making them accessible to the example application.
OSCAL Viewer (Example Application)
The OSCAL Viewer example application allows developers to sample the various OSCAL concepts and view their features.
Once root dependencies are installed, build application dependencies and run OSCAL Viewer with the following command:
For more details about OSCAL Viewer, please refer to the example (OSCAL Viewer) README.md.
The OSCAL Viewer example application includes an optional integration for Google Analytics. Google
Analytics is enabled only when
REACT_APP_GOOGLE_ANALYTICS is set to a Google Analytics GA4
npm run build is run. For example:
export REACT_APP_GOOGLE_ANALYTICS="G-XXXXXXXXXX"` npm run build
will produce an application build with Google Analytics tracking enabled. The only way to toggle Google Analytics or change the tracking ID is to rebuild the application.
Experimental REST Features
To enabled experimental features that make REST calls defined in
oscal-rest to a backend service, add a
new environment variable setting the base rest url in the directory you are running the
export REACT_APP_REST_BASE_URL=http://localhost:8080/oscal/v1 ./scripts/watch-viewer
For information on the project's license, please review the LICENSE file.