# sdlb-schema-viewer

> React component for visualizing the Smart Data Lake Builder config schema.

Latest version **2.0.0** (published 2025-06-23) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install sdlb-schema-viewer
pnpm add sdlb-schema-viewer
yarn add sdlb-schema-viewer
bun add sdlb-schema-viewer
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-06-23 |
| First published | 2023-06-02 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 71.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | deuberda, zzeekk, pgruetter |

## Links

- npm: https://www.npmjs.com/package/sdlb-schema-viewer
- Repository: https://github.com/smart-data-lake/schema-viewer
- npm.io page: https://npm.io/package/sdlb-schema-viewer

## Dependencies (3)

- [globals](https://npm.io/package/globals.md) ^16.2.0
- [lru-cache](https://npm.io/package/lru-cache.md) ^11.1.0
- [json-schema](https://npm.io/package/json-schema.md) ^0.4.0

## Recent versions

- 2.0.0 (latest) — 2025-06-23
- 1.2.0 — 2023-10-25
- 1.1.2 — 2023-06-12
- 1.1.1 — 2023-06-09
- 1.1.0 — 2023-06-09
- 1.0.0 — 2023-06-02

## README

# SDLB Schema Viewer

A React component for visualizing the [Smart Data Lake Builder](https://github.com/smart-data-lake/smart-data-lake) config schema.
It retrieves the SDLB JSON schemas and renders them as dynamic trees using the [d3](https://d3js.org/) library.

## Installation

```
npm install sdlb-schema-viewer
```

## Usage

Inside JSX:

```jsx
import { SchemaViewer } from 'sdlb-schema-viewer';

<SchemaViewer loadSchemaNames={...} loadSchema={...} />
```

The `SchemaViewer` component has the following properties:
* `loadSchemaNames`: A function for loading a list of schema names. These are the schemas that a user can select.
* `loadSchema`: A function for loading a JSON schema which takes the selected schema name as an input parameter.

## Example

This example shows how to visualize a simple example schema.

```jsx
import { SchemaViewer } from 'sdlb-schema-viewer';

<SchemaViewer loadSchemaNames={loadSchemaNames} loadSchema={loadSchema}/>

const exampleSchema =
    {
        "title": "Person",
        "type": "object",
        "properties": {
            "firstName": {
                "type": "string",
                "description": "The person's first name."
            },
            "lastName": {
                "type": "string",
                "description": "The person's last name."
            },
            "age": {
                "description": "Age in years which must be equal to or greater than zero.",
                "type": "integer",
            }
        }
    }

function loadSchemaNames() {
    return Promise.resolve(['exampleSchema.json']);
}

function loadSchema(schemaName) {
    return schemaName === 'exampleSchema.json' ? Promise.resolve(exampleSchema) : Promise.reject();
}
```

## Styling

The `SchemaViewer` component uses [@mui/joy](https://www.npmjs.com/package/@mui/joy) for component styling. 
The default theme can be overridden by providing a custom theme:

```jsx
import { SchemaViewer } from 'sdlb-schema-viewer';
import { CssVarsProvider, extendTheme } from "@mui/joy";

const theme = extendTheme({...});

<CssVarsProvider theme={theme}>
    <SchemaViewer loadSchemaNames={...} loadSchema={...}/>
</CssVarsProvider>
```

See https://mui.com/joy-ui/customization/theme-colors/ for more information about color
theme configuration.

The default theme for the schema viewer can be imported with

```typescript
import { defaultTheme } from 'sdlb-schema-viewer';
```

## Build
For building and testing the component, Node.js (Version 22+) and yarn are required. 

### Install

Checkout the repository and install the required packages by executing:

`yarn install`

in the project directory.

### Available Scripts

In the project directory, you can run:

* `yarn start` \
Runs the app in the development mode. \
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.

* `yarn test` \
Launches the test runner in the interactive watch mode.

* `yarn build` \
Compiles the components into the `dist` folder to be used by other React projects.

### Test with SDLB website

To test changes of schema-viewer component with SDLB documentation website, build the component locally and run `yarn pack`, then in SDLB projects `documentation` branch:
* remove schema-viewer from `dependencies` in package.json file
* add local packed dependency using `yarn add ../schema-viewer/sdlb-schema-viewer-v2.0.0.tgz`.

---
_Source: https://npm.io/package/sdlb-schema-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._