@multisystemsuite/studio-renderer

Turn a JSON schema into React UI — the runtime engine for your apps.

What is it?

studio-renderer takes a schema (created in the builder or by AI) and renders it as interactive React components. You use it in production apps when end users fill out forms or view dashboards — not during design time.

When to use it

• Displaying saved schemas in your React app
• Preview mode in admin panels
• Headless rendering in tests or SSR (with React)

Install

pnpm add @multisystemsuite/studio-renderer @multisystemsuite/studio-core @multisystemsuite/studio-theme
pnpm add @multisystemsuite/studio-forms   # for form fields
# Plus peer deps: react, react-dom, @mui/material

Important: Register component libraries before rendering:

import { registerFormComponents } from '@multisystemsuite/studio-forms';
import { registerSurveyComponents } from '@multisystemsuite/studio-survey';
import { registerChartComponents } from '@multisystemsuite/studio-charts';
import { registerGridComponents } from '@multisystemsuite/studio-grid';

registerFormComponents();
registerSurveyComponents();
registerChartComponents();
registerGridComponents();

Quick example

import { PageRenderer } from '@multisystemsuite/studio-renderer';
import { ThemeProvider } from '@multisystemsuite/studio-theme';
import type { StudioSchema } from '@multisystemsuite/studio-core';

function App({ schema }: { schema: StudioSchema }) {
  return (
    <ThemeProvider config={schema.theme ?? { mode: 'light', preset: 'mui' }}>
      <PageRenderer schema={schema} mode="runtime" />
    </ThemeProvider>
  );
}

Modes

| Mode | Use case | |------|----------| | runtime | End users interact with the form (default for production) | | preview | Read-only or simplified preview | | edit | Builder canvas — selection outlines, no full submission flow |

Custom components

import { registerRenderer } from '@multisystemsuite/studio-renderer';
import { registerComponent } from '@multisystemsuite/studio-core';

registerComponent({ type: 'my-widget', category: 'custom', label: 'My Widget' });
registerRenderer('my-widget', MyWidgetComponent);

Related packages

• studio-core — schema types and helpers
• studio-forms / studio-survey / studio-charts / studio-grid — component implementations
• studio-builder — creates schemas that this package renders

License

MIT