# Slot editor A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Research & design](https://beamline.io/components/apps/research-design) app. Live demo: https://beamline.io/components/slot-editor Slots in a design system component, from making to filling. The main component's layer tree with a checkbox per layer: a nested frame converts to a slot, several layers that share a parent wrap into one, and a choice that can't (the component itself, layers in different frames, a layer already a slot) is refused in words; each change can be undone. The chosen slot's guidance: its name, the fewest and most layers (fewest over most said), preferred components as a rule or as advice, an empty indicator, and a limits line that names what is on and off with how many layers it holds now. What one instance puts in its slot: the contents in order, added from the preferred components first (the rest only when they're advice), refused past the most, too few said, Modified when it differs from the main component, and a reset that says what it removes and brings back before it runs; a slot removed from the main component is said and its layers stay. On paste from another file, each variable the objects use: reuse the one here with the same name (its value shown when it differs) or copy it in, then applied with a count and undo. ## Use it for - A design or page-builder tool where components have open areas (slots) that instances fill, with guidance on what goes in. - Any template with a flexible region and rules for its contents (a CMS [card](https://beamline.io/components/card) with a content area, an email module). ## Not for - A component's variant properties ([component-properties](https://beamline.io/components/component-properties)). - A plain file or folder tree ([tree-view](https://beamline.io/components/tree-view)). ## Anatomy - tabs: Define, In an instance, Paste - define: the layer tree (checkbox, kind icon in its hue, name, Slot tag), the selection count, Convert to slot, Wrap in a slot, Undo, the refusal in words, the done note - guidance: slot name, fewest and most layers, preferred components, only allow preferred, empty indicator, the limits line with how many it holds - instance: title with Modified and the limits; the dashed slot with its items (move up, remove) or the empty indicator; too few; Add a component (preferred first; refused past the most); Reset with its review - removed definition: the warning and the layers that stay - paste: what was pasted; a card per variable (value, reuse or copy in with the value here, or no match); Apply, the result and Undo ## States - nothing selected - frame selected - layers selected - root refused - different parents refused - already a slot - converted - wrapped - undone - limits set - fewest over most - preferred as advice - only preferred - empty indicator - default contents - modified - full - too few - empty - reset review - definition removed - variable same - variable differs - no match - applied - paste undone ## Keyboard - Tab through the tree's checkboxes (Space selects), the actions and the guidance fields - In an instance, each item's Move up and Remove are buttons; Add opens a select (arrows, Enter) - The paste choices are radio cards (arrows move, Space picks) ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `tree` (required) | `LayerNode` | — | The main component's layer tree; its root is the component. | | `onTreeChange` | `((tree: LayerNode) => void)` | — | | | `components` (required) | `LibraryComponent[]` | — | | | `instanceSlot` | `string` | — | The slot an instance fills, by id in `tree`; it may since have been removed. | | `instanceName` | `string` | — | | | `instanceSlotName` | `string` | — | The slot's name when its definition is gone (said with it). | | `items` | `SlotItem[]` | — | | | `onItemsChange` | `((items: SlotItem[]) => void)` | — | | | `pasted` | `PastedObjects \| null` | — | | | `onPasteApply` | `((choices: Record) => void)` | — | Applies the choices; returns nothing. Undo calls onPasteUndo. | | `onPasteUndo` | `(() => void)` | — | | | `defaultSelection` | `string[]` | — | The layers selected first (mid-work: a slot with its guidance open). | | `tab` | `SlotTab` | — | | | `defaultTab` | `SlotTab` | — | | | `onTabChange` | `((t: SlotTab) => void)` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | | `renderLayer` | `((layer: LayerNode) => ReactNode)` | — | Draws a text or instance layer on the canvas (left out: the layer's name in a plain box). | ## Built from - tabs - checkbox - [number-field](https://beamline.io/components/number-field) - [multi-select](https://beamline.io/components/multi-select) - switch - select - [radio-cards](https://beamline.io/components/radio-cards) - badge - button - input ## Dependencies `lucide-react` ## Import ```tsx import { SlotEditor } from "@beamline/slot-editor"; ``` ## Get it Slot editor is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Research & design - [Research synthesis](https://beamline.io/components/research-synthesis): A research study turned into evidence in one place. Transcripts: passages marked as accepted highlights or as the assistant's suggestions (dashed)… - [Study setup](https://beamline.io/components/study-setup): Set up an unmoderated test and its screener. Test: what's tested (a website, a prototype by its share link, an app by its store page), who takes it… - [Study flow](https://beamline.io/components/study-flow): A study's blocks in order, each with where people go next. A block that routes by its answer (multiple choice, scale, open question, prototype task) has… - [Participant review](https://beamline.io/components/participant-review): One participant's session, answer by answer, beside the list of everyone who took the study. The list filters (finished, left early, with a recording)… - [Click heatmap](https://beamline.io/components/click-heatmap): One screen of a usability task as it looked (your prototype's frame or a page built from your parts, scaled into a phone) with where people clicked over… - [Tree test](https://beamline.io/components/tree-test): A tree test: build a navigation tree and read where people went. Build: pages added at the top or under any page, indented under the page above or moved… - [Prototype task](https://beamline.io/components/prototype-task): A prototype task in a study. The linked prototype refreshes from the design keeping the task and paths (a start screen gone from the new version said, a… - [Task results](https://beamline.io/components/task-results): A usability task's results, from headline outcomes down to paths and screens. Outcomes (direct success, indirect success, gave up) say their share and… - [Matrix question](https://beamline.io/components/matrix-question): A matrix question and the participant's side of it, side by side. Rows (up to ten) share one set of choices (two to seven); Enter adds a row, several… - [Prototype review](https://beamline.io/components/prototype-review): Reviewing a design file's clickable prototype. Present: the board on a stage with its wireframe, the flow chosen (an unavailable one can't be), Back… - [Report builder](https://beamline.io/components/report-builder): Build a chart from your metrics without code: choose metrics, how to group them over time, an optional breakdown, filters, the range and the chart, see… - [Report library](https://beamline.io/components/report-library): A business's reports in one place. The directory: reports by topic and group with search, each with what it answers; one this person can't open says why… - [Review page builder](https://beamline.io/components/review-page-builder): Building the page reviewers use to go through records one by one. The queue of records (one with no title shows its id instead of a blank); the record as… - [Database builder](https://beamline.io/components/database-builder): What a database does for the people who use it, built in one place. Templates: starting values per property (a relation default points at an existing… - [Workflow builder](https://beamline.io/components/workflow-builder): Automation rules for a SaaS without code: a trigger, conditions built with the query builder that branch into Yes and No, actions and waits, drawn as a… - [Workflow library](https://beamline.io/components/workflow-library): The automation library: every automation as a row (what starts it, whether it's live, a draft or paused, who owns it, when it last ran, and its runs this… - [Drawing board](https://beamline.io/components/drawing-board): A whiteboard a team already knows how to use, like FigJam: tools in a floating bar at the bottom (Select V, Hand H, Sticky note S, Shape R/O/D, Connector… - [Model workbench](https://beamline.io/components/model-workbench): A CAD model's workbench around a large isometric scene of its bodies, each shaded from its material's appearance with a soft ground shadow and an axis… - [Component properties](https://beamline.io/components/component-properties): A design system component from three sides. Its variants as a matrix on two chosen properties, the others filtering it, each cell drawing the variant; a… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).