Custom 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.

---

Creating Custom Layouts

1. Open your Project and go to Overview.
2. Click Set up next to Custom layout in the left sidebar. 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.

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.

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.