Display Modes

This guide covers where the editor appears on the page, and how it behaves. That includes embedded in place, in a sliding sidebar, in a centered modal, or over the full viewport - through the placement prop, and view-only record with the readonly prop.

Placement

placement picks the container the form renders into. The items, values, validation, and save flow stay the same in every mode - only the wrapper around the form changes. Four values are supported: "inline", "sidebar", "modal", and "fullscreen". Any unrecognized value falls back to inline.

One rule matters for the overlay modes. The editor does not close itself. Sidebar, modal, and fullscreen editors stay mounted until the parent removes them, usually by toggling a flag in response to onAction or onSave on a close, cancel, or save action. The sidebar adds one extra path: clicking outside it also emits onAction with item.id === "close", so you handle dismissal in the same place.

The examples below share this pattern - an open flag guards the editor, and the action handler flips it off.

Inline

Set placement to "inline" (the default) to embed the editor directly in the page content:

import { Editor } from "@svar-ui/react-editor";

const items = [ /* editor config */ ];

function App() {
  return <Editor items={items} values={values} placement="inline" />;
}

Inline keeps the editor in the page flow without interrupting navigation. It fits dashboards and management views where editing is part of a continuous workflow. Since nothing overlays the page, there's no close action to handle.

Sidebar

Set placement to "sidebar" to slide the editor in from the side of the screen:

import { useState } from "react";
import { Editor } from "@svar-ui/react-editor";

const items = [ /* editor config */ ];

function App() {
  const [open, setOpen] = useState(true);

  return (
    open && (
      <Editor
        items={items}
        values={values}
        placement="sidebar"
        onAction={({ item }) => {
          if (item.id === "close") setOpen(false);
        }}
      />
    )
  );
}

The sidebar keeps the main content visible while the editor is open, which works well for reviewing or editing a selected list row without losing context. Clicking outside the panel dismisses it and fires onAction with item.id === "close", so the same handler covers both the close button and the outside click.

Modal

Set placement to "modal" to open the editor as a centered overlay over a backdrop:

import { useState } from "react";
import { Editor } from "@svar-ui/react-editor";

const items = [ /* editor config */ ];

function App() {
  const [open, setOpen] = useState(true);

  return (
    open && (
      <Editor
        items={items}
        values={values}
        placement="modal"
        onAction={({ item }) => {
          if (item.id === "cancel" || item.id === "close") setOpen(false);
        }}
      />
    )
  );
}

Use modal placement when editing needs the user's full attention - creating or editing an important record, for example. Unlike the sidebar, a modal has no outside-click dismissal, so close it from the toolbar's cancel/close action. Modal editors often pair with a bottom save/cancel bar; see Data Handling for the save flow.

Fullscreen

Set placement to "fullscreen" to pin the editor over the entire viewport:

import { useState } from "react";
import { Editor } from "@svar-ui/react-editor";

const items = [ /* editor config */ ];

function App() {
  const [open, setOpen] = useState(true);

  return (
    open && (
      <Editor
        items={items}
        values={values}
        placement="fullscreen"
        layout="columns"
        onAction={({ item }) => {
          if (item.id === "close") setOpen(false);
        }}
      />
    )
  );
}

Fullscreen reuses the inline form styling but stretches it over the whole viewport, so it suits a full-page editor opened from a list. Close it from the toolbar close action, same as the modal. The extra room pairs naturally with a two-column form via layout="columns"; see Layout for arranging fields across columns, or can be used on small screen devices in a single column form.

Read-only form

Placement decides where the form appears; readonly decides whether it can be edited at all. Set the readonly prop to render the record for viewing only - it works with every placement and with the same items and values you already use for editing, so a list view and a detail view can share one config:

<Editor items={items} values={values} readonly={true} topBar={false} />

Every visible item is swapped for its read-only renderer instead of mounting the original input: booleans print as Yes/No, options resolve to their matching label, dates are formatted, and empty values are skipped. When none of the fields hold data, the form shows a "No data" overlay in their place.

A rich control - comments, attachments, a code editor - would render poorly through the generic value-to-text renderer, so it can register a display-only variant with registerEditorItem(type, component, { readonly: true }) that the editor mounts instead while read-only; see Input controls. Individual fields can also be made display-only inside an otherwise editable form with the "readonly" comp, see Fields.

Read-only mode is applied after batch and section visibility is calculated, so batches and sections still control what's visible and where. Since nothing can change, there is nothing to save: with automatic bars the editor drops the save/cancel controls and leaves a single close icon in the top bar, whatever the placement - see Toolbar for replacing that with your own bar.