Skip to main content

Applying display modes

Display options​

The Editor widget supports multiple display modes for different interface designs. Use the placement property to show the editor as an inline form, a modal dialog, or a sidebar panel. The layout property lets you arrange fields in two columns.

Display the editor as an inline form​

Set placement to "inline" to embed the editor directly into the page content:

<script>
    import { Editor } from "@svar-ui/svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="inline" />

The inline form integrates the editor into the page flow without interrupting navigation. It suits dashboard or management views where editing is part of a continuous workflow.

Inline

Display the editor as a modal dialog​

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

<script>
    import { Editor } from "@svar-ui/svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="modal" />

The modal dialog placement opens the editor as a centered overlay. This approach is ideal when the editing process requires the user's full attention and shouldn't mix with other page elements. Use it for creating or editing important records where focus and isolation are necessary.

Modal

Related sample: Modal Editor

Display the editor as a sidebar panel​

Set placement to "sidebar" to attach the editor to the side of the screen:

<script>
    import { Editor } from "@svar-ui/svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="sidebar" />

The sidebar keeps the main content visible while the editor is open. This layout is effective for workflows where the editor is secondary to the main content but still needs to be accessible. It works well when users review details or make quick edits while keeping the main context visible.

Sidebar

Related sample: Sidebar Editor

Display the editor in two columns​

To organize inputs into two columns, set layout to "columns" and assign each item to a column with the column property:

column?: "left" | "right"
<script>
    import { Editor } from "@svar-ui/svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name", column: "left" },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
            column: "left", // move to left column
        },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];
</script>

<Editor {items} values={data} layout="columns" />

The two-column layout organizes inputs into distinct left and right sections. Use it when there are multiple inputs and grouping them visually helps users understand and navigate the form more efficiently. For example, put key details in the left column and supplementary options in the right.

columns

Related sample: Modal Editor with columns