Layout Modes

1DevTool lets you arrange your panels in three different layout modes. Each mode is designed for a different kind of work. You can switch between them at any time without losing what's open — your panels just rearrange themselves to fit the new layout.

The Three Layout Modes

2×2 Grid

The grid mode divides the main area into four equal quadrants. Each quadrant holds one panel, giving you a total of four panels visible at once.

Best for: Running multiple AI agents in parallel. When you have Claude Code working on the frontend in one terminal, Codex refactoring the backend in another, and a Browser panel previewing the result, the 2×2 grid lets you watch all of it at the same time.

This is the default layout when you first open 1DevTool, because parallel agent work is what the app is designed for.

Column View

Column view splits the main area into two panels side by side — a left column and a right column. Each column takes up half the screen.

Best for: Focused two-panel work. A common setup is a Terminal on the left and a Browser on the right, so you can type a prompt to your agent and immediately see the result render. Another popular combination is Terminal + Git, so you can review diffs as your agent commits changes.

Fullscreen

Fullscreen mode expands a single panel to fill the entire main area. All other panels are hidden (but still running).

Best for: Deep focus. When you need to read a long AI output, write a detailed prompt, or inspect a complex database result, fullscreen removes all distractions. Press the shortcut again to go back to your previous layout instantly.

How to Switch Layout Modes

There are two ways to switch:

1. Click the layout icon in the toolbar at the top of the main area. It cycles through the three modes in order.
2. Use the keyboard shortcut Cmd+Shift+L on Mac or Ctrl+Shift+L on Windows/Linux.

Both methods work at any time, even when a panel is focused and you're in the middle of typing.

Tip: If you want to temporarily focus on one panel without changing your layout, just press Cmd+Shift+F (Mac) or Ctrl+Shift+F (Windows) to go fullscreen on the active panel, then press it again to come back.

Layout Presets

Once you've arranged your panels in a way you love, you can save it as a layout preset so you can return to it in one click.

To save a preset:

1. Arrange your panels the way you want them.
2. Open the layout menu by clicking the layout icon in the toolbar.
3. Select Save as preset and give it a name (for example, "Agent sprint" or "Review mode").

Saved presets appear at the top of the layout menu. Click any preset name to instantly restore that arrangement, including which panel types are open and where they're positioned.

Presets are saved per project, so you can have different arrangements for different codebases without them interfering with each other.