Log In Get Started
Documentation

Layout Editor Guide

The Layout Editor lets you build a fully customizable trade entry form using a grid-based component system. Create multiple layouts for different trading styles or instruments, each with its own arrangement of configurable components.

Accessing the Layout Editor

Navigate to Tab 3 (Layout Editor) in the right panel to access the editor for the current session's layout.

Managing Profiles

Profiles store your trading account simulation settings. They are managed via the Profiles button in the top bar, which opens the Profiles modal.

Profiles Modal

The modal shows all your active profiles in a list. Each profile row displays:

  • A blue dot indicator on the currently selected profile
  • The profile name (click to select)
  • An "active" badge on the currently selected profile
  • A "default" badge on the default profile
  • Action buttons on hover: Rename and an overflow menu

Creating a Profile

  1. Click Add Profile at the bottom of the modal
  2. An inline input field appears (no separate dialog)
  3. Type the profile name and press Enter or click Create
  4. Press Escape or click Cancel to discard

Renaming a Profile

  • Double-click the profile name to edit it inline, or
  • Click the Rename button that appears on hover
  • Edit the name, then press Enter to save or Escape to cancel

Overflow Menu Actions

Click the three-dot overflow menu on a profile to access:

  • Set as Default - Makes this the default profile when opening the platform
  • Archive - Hides the profile from the active list (disabled if only one profile remains)
  • Delete - Permanently removes the profile (disabled if only one remains)

Viewing Archived Profiles

Check the "Show Archived" checkbox in the modal header. An archived section appears with each item showing the archive date and Restore/Delete buttons.

Managing Layouts

Layouts are managed via the Layouts button in the top bar, which opens the Layouts modal. The modal works identically to the Profiles modal.

Layouts Modal

The modal shows all your active layouts in a list with the same interaction patterns as profiles:

  • Click a layout to select it
  • Blue dot and "active" badge on the current layout
  • "Default" badge on the default layout
  • Hover actions: Rename and overflow menu

Creating a Layout

  1. Click Add Layout at the bottom of the modal
  2. Type the name in the inline input and press Enter or click Create

Renaming a Layout

  • Double-click the layout name, or click the Rename button on hover
  • Edit inline, press Enter to save or Escape to cancel

Overflow Menu Actions

  • Set as Default - Default layout for new sessions
  • Duplicate - Creates a copy of the layout with all its component configuration
  • Archive - Hides from active list
  • Delete - Permanently removes

Viewing Archived Layouts

Check "Show Archived" in the modal header to reveal archived layouts with Restore/Delete options.

Component Types

The Layout Editor provides configurable component types that you can label and customize however you need:

  • Date Picker - Date selection input
  • Numeric Input - Flexible number input (can be labeled as entry price, stop loss, quantity, or anything else)
  • Net PnL - Calculated net P&L display
  • Trade Results - Trade result display
  • Button Toggle - Toggle button group (e.g., Long/Short direction)
  • Slider - Slider with defined steps
  • Dropdowns - Dual dropdown selector
  • Switches - On/off toggle switch
  • Quick Inputs - Quick input button group for fast data entry
  • Checkboxes - Checkbox group for multi-select options
Fully Customizable

Components are not predefined fields. You configure labels, colors, and behavior for each component to match your exact trading workflow.

Starter Layout

New users automatically receive a pre-built starter layout on their first visit. This layout covers basic trading journaling with a 3x2 grid:

  • Date Picker and Trade Result (Win/Loss/No Trade/BreakEven)
  • Net P&L and Direction (Long/Short toggle)
  • Rating (A+ through F) and Fees (commission input)

You can customize or replace this layout at any time using the Layout Editor.

Editing a Layout

  1. Open Tab 3 (Layout Editor) in the right panel
  2. Select the layout from the dropdown
  3. Click empty grid sections to add components (opens a component catalog modal with live previews)
  4. Use the toolbar to add or remove rows and columns (up to 2 columns)
  5. Drag components to reorder them within the grid
  6. Click the Customize button (gear icon) on any component to open its settings panel (labels, colors, behavior)
  7. Click Save Layout when done

Section Controls

Each grid section that contains a component shows a small X button in the corner. Clicking it clears the component from that section (resets it to empty) - it does not remove the section itself. Empty sections do not show the X button.

Grid Toolbar

  • Add Row - Add a new row to the grid
  • Remove Row - Remove the last row. If the row contains components, a confirmation dialog is shown before removal
  • Add Column - Add a column (max 2)
  • Remove Column - Remove the last column. If the column contains components, a confirmation dialog is shown before removal

Bulk Actions

  • Select All - Select all grid sections
  • Unselect All - Deselect all grid sections
  • Copy Selected - Copy selected components to clipboard
  • Delete Selected - Delete selected components

Tips

  • Keep layouts focused - Only include components you actually use
  • Create purpose-specific layouts - One for scalping (minimal components), one for swing trades (detailed components)
  • Use custom inputs - Label them as entry price, stop loss, or any field your strategy needs
  • Experiment with grid columns - Use 2 columns to fit more components in less vertical space
  • Duplicate layouts - Use the Duplicate feature to create variations without starting from scratch

Related Topics