EditorLayout
The frame of a document editor.
View code
<EditorLayout
back={{ href: "/posts", label: "Posts" }}
title="Designing a calmer editor"
status={
<SaveStatus
id="post-status"
editedAt={post.updatedAt}
form="post-form"
labels={{ saving: "Saving…", saved: "Saved", failed: "Failed", retry: "Retry", edited: "Edited {time}" }}
/>
}
preview={<LinkButton href={previewUrl} variant="ghost" color="neutral" size="sm">Preview</LinkButton>}
primary={<Button type="submit" form="post-form" size="sm">Publish</Button>}
sidebar={
<>
<Label htmlFor="post-visibility">Visibility</Label>
<Select id="post-visibility" name="visibility" form="post-form">…</Select>
<Label htmlFor="post-slug">Slug</Label>
<Input id="post-slug" name="slug" form="post-form" defaultValue="designing-a-calmer-editor" />
<Label htmlFor="post-tags">Tags</Label>
<Input id="post-tags" name="tags" form="post-form" defaultValue="design, writing" />
</>
}
labels={{ settings: "Settings", closeSettings: "Close settings", sidebar: "Post settings" }}
>
<form id="post-form" method="post">…</form>
</EditorLayout>Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { EditorLayout } from "@sdxc/ui/app";Renders the bar, the writing column and the sidebar. The sidebar is one popover
element: beside the column on a wide container and a full-screen sheet when narrow,
so the sheet opens and closes with no script.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
back | { href: string; label: string } | No | Where the back arrow leads, and its accessible name, such as "Posts". |
title | RemixNode | Yes | The document's name in the bar, such as its title and type. |
status | RemixNode | No | The persistence signal, usually a SaveStatus. |
preview | RemixNode | No | A Preview link or button, before the primary action. |
primary | RemixNode | No | The publication action, such as a Publish button whose label carries its state. |
sidebar | RemixNode | No | The document's properties: status, slug, author, tags. |
form | string | No | The id of the document's form, which ⌘S/Ctrl+S submits while focus is in it or in no other form, saving the way the form's own submit does. |
labels | Labels | Yes |
Also accepts everything in Omit<TagProps<"div">, "title">.