Custom Editor Layouts

An editor layout defines how the annotation interface is presented to labelers inside a Project. It controls what panels appear, where media is displayed, which classification fields are visible, and how those elements are arranged on screen. Every Project created from a template comes with a pre-configured layout. You can use it as-is or customize it to match your workflow.

---

​

Access the Layout Builder

1. Open your Project and go to Settings.
2. Select Editor layout from the left sidebar.
3. The layout builder opens, showing the current layout and a palette of components on the left.

​

Layout Structure

A layout is a tree of containers and items.

• Containers hold other containers or items. They arrange their children either horizontally (side by side) or vertically (stacked).
• Items are the leaf nodes — they render a specific piece of UI, such as a media player or a classification field.

You build layouts by dragging components from the palette into the canvas and nesting them inside containers.

​

Palette Components

• Stack A vertical container. Children are arranged top to bottom. Use a Stack as the top-level wrapper for most layouts, or to group related fields below the media player.
• Columns A horizontal container. Children are arranged left to right. Use Columns to place the media player and classification fields side by side.
• Media Renders the media player for the current task — image, video, audio, or document. Every layout should include exactly one Media component. You can configure:
  • Controls — full shows all playback controls; minimal shows only essential controls.
  • Autoloop — automatically loops video or audio when playback reaches the end.
• Field Renders a single classification field from the Project ontology. When you add a Field component, you select which ontology classification it maps to. The display style depends on the field type:

  Field type	Display options
  Select (single choice)	Radio buttons, Dropdown
  Multiselect	Checklist, Dropdown
  Number	Number input, Slider
  Text	Text area

  You can also mark a field as read-only, which displays its value but prevents labelers from editing it.
• Multi-step Renders a sequential step-by-step wizard. Each step contains its own set of fields. Use Multi-step for workflows where data must be captured in a specific order — for example, first annotating the front of a document, then the back.

​

Edit Layout

• Add a component: Drag a component from the palette and drop it onto the canvas. Drop zones appear as you drag to indicate where the component can be placed.
• Move a component: Drag an existing component to a new position within the canvas.
• Configure a component: Click a component to select it. Its configuration options appear in the panel on the right. Changes take effect immediately in the preview.
• Remove a component: Select the component and click the delete icon in the configuration panel, or use the context menu on the canvas.
• Edit as JSON: Toggle JSON editor to view and edit the layout as raw JSON. This is useful for copying layouts between Projects or making bulk changes. The editor validates the JSON structure on save.

​

Template Layouts

Each template ships with a layout pre-configured to match its ontology. The layouts are described below.

• Video classification — Vertical stack with a Media player (full controls, autoloop enabled) at the top, followed by classification fields for clip-level quality and event type arranged below.
• Pairwise comparison — Vertical stack with a Media player, a single-choice select field for preference (radio display), and a multiselect field for observations (checklist display).
• VLA workflow — Vertical stack with a Media player followed by classification fields for action category at the frame level. Object-level annotations are handled in the canvas overlay rather than the layout panel.
• Multi-step data extraction — Vertical stack with a Media player and a Multi-step component with two steps: the first step captures front-of-card identity fields, the second captures back-of-card details.
• Document annotation — Vertical stack with a Media player (document viewer) followed by classification fields for document type and language at the document level. Region-level sentiment and entity fields appear in the annotation detail panel when a region is selected.
• Survey — Vertical stack containing a Media player, an overall impression select field (radio), a free-text feedback field (text area), and a recommendation select field (radio).
• Audio captioning — Vertical stack with a Media player (minimal controls) and a transcript text field per speaker region. An overall audio quality rating field appears below.
• 2D object detection with SAM — Vertical stack with a Media player followed by scene-level classification fields for scene type, weather, and time of day. Object-level class fields (vehicle, pedestrian, cyclist) appear in the annotation detail panel.
• Real or generated — Vertical stack with a Media player, a single-choice select field for real vs. AI-generated (radio), a confidence rating field (slider), and a multiselect field for tell-tale signs (checklist).

​

Tips

• Keep the Media player as the primary element. Labelers should not need to scroll past the player to reach key fields.
• Use Columns to show fields alongside the media for tasks where labelers need to reference the media while filling in fields.
• Use Multi-step for long forms where ordering matters — it reduces cognitive load compared to a single long scrollable panel.
• If you have many fields, consider grouping related ones inside nested Stacks to create visual separation.