Customize the Toolbar

Shape the tool rail to fit your product: choose which tools appear, which one the editor opens on, and how compact the rail looks. These three top-level config fields work together.

When to use this

• You want a focused editor (crop-only for avatars, adjust-only for photo tweaks).
• Your flow always starts with the same action, so it should open on that tool.
• Vertical space is tight and you want a minimal, icon-first rail.

Config reference

Valid tool ids: crop, adjust, filter, text, shapes, image.

Limit the tools

Passing config.tools renders the listed tools in order and hides every other built-in tool.

<ImageEditor src="/photo.jpg" config={{ tools: ["crop", "adjust"] }} />

Omit config.tools entirely to show all of them. This editor exposes only Crop and Adjust:

Set the default tool

Open the editor directly on a specific tool with config.defaultTool. Instead of landing on the neutral selection state, the editor activates the tool you name as soon as the image loads.

<ImageEditor src="/photo.jpg" config={{ defaultTool: "adjust" }} />

defaultTool accepts any tool id, or null (the default) to start on the neutral selection state. The editor below opens with the Adjust panel already active — no click required:

Compact the sidebar

Switch the tool rail to a tight, icon-only column with config.ui.toolSidebar.compact. Compact mode hides the text labels, narrows the rail, and shrinks each button to a square.

<ImageEditor
  src="/photo.jpg"
  config={{
    ui: {
      toolSidebar: {
        compact: true,
        groupSeparators: false,
      },
    },
  }}
/>

• compact: true collapses the rail to icon-only, tightly-spaced buttons. Buttons stay fully accessible — the tool name moves to the tooltip and aria-label.
• groupSeparators: false removes the dividers between tool groups.

The tool rail collapses to a tidy icon column — hover any button for its name:

Next steps

• Add a Custom Tool — extend the rail with your own tool.
• Inject Custom UI — render your own nodes into the chrome.
• Configuration — the full config reference.

Verified by tests/guides/limit-tools.spec.tsx, tests/guides/set-default-tool.spec.tsx, and tests/guides/compact-sidebar.spec.tsx in the @editx/image-editor package.