Coding on a MacBook: VS Code, browser and terminal on one screen

Start with VS Code and a browser in separate windows, and use VS Code's integrated terminal for commands. That gives you a workable coding setup on one MacBook screen without finding room for a third window.

When you need a separate terminal or more reference windows, keep the editor readable and move between the other windows. Trying to display everything at once often leaves too little room for the code.

Try it right here — this is a working model of Glidro, not a video.

Interactive Glidro demo

Safari
Glidro
Terminal
~/project ❯ git status
On branch main
nothing to commit
~/project ❯ cargo test
running 42 tests
test result: ok
~/project ❯
Code
Notes
Chat

A working model of Glidro, not a video. Drag a title bar to reorder, click a Dock icon to open an app, close a window with its red button. In the real app every key here is ⌥ plus the key.

  • macOS 13+ on Apple silicon
  • Native Glidro Engine
  • No usage tracking
  • Only needs the Accessibility permission
  • Release downloads via Payhip

Try a two-window setup first

Open your project in VS Code and your preview or documentation in the browser. On macOS 15 or later, use the green window button's tiling options to arrange them on the desktop. Apple's tiling guide covers the controls. On older versions, resize the pair manually or use Split View.

In VS Code, choose Terminal > New Terminal. Use Control + backtick to toggle the terminal panel, or choose View > Terminal if that key is awkward on your keyboard. The VS Code terminal documentation describes these controls.

Give the editor most of the usable width. If the Explorer sidebar leaves the code cramped, Command + B toggles that sidebar with VS Code's default bindings. Keep the terminal panel open when you need its output, then hide it when you need more editor height.

Separate the terminal when its output needs space

An integrated terminal is convenient for short commands. A separate terminal window can be easier to read when a long-running process produces logs or you need to compare output with a browser error.

For a small web project, try this sequence: edit a component, check the browser preview, inspect the terminal if the preview fails, then return to the editor. You only need the relevant windows visible at each step. This is a proposed workflow to adapt to your project, rather than a measured speed improvement.

Build a scrolling layout with Glidro

Glidro places windows in a horizontal strip. A useful starting order is editor, browser, terminal. The editor can stay wide enough for code while the other windows remain reachable along the strip. You don't need prior experience with Linux window managers to use that arrangement.

Complete the Glidro setup and open the three apps as normal desktop windows. Use Option + Shift + Left or Right to reorder a focused window. Then use Option + Left or Right to move focus through the strip. Custom shortcuts saved in Glidro may differ from these defaults.

Focus VS Code and press Option + R to cycle its width. Try the 65% preset, then check a real file with your usual sidebar, font size and split editors. Use a wider preset if lines wrap too much. The right width is the one that lets you read and edit the code comfortably.

The browser might need similar room for a desktop preview. A narrow browser column can be useful for a small reference page, but it changes the viewport you are testing. Check the viewport size separately when validating a responsive layout; the window manager doesn't define your site's test coverage.

Choose between a visible stack and a tabbed column

If you want the browser above a separate terminal, first put their windows in neighboring columns with the terminal on the right. Focus the terminal and press Option + ] to stack it into the browser's column. Both windows share that column's height.

If the half-height views are cramped, press Option + D after creating the stack. That makes a tabbed column with one member visible at a time. Use Option + Up or Down to change the focused member. A tabbed column is useful for alternating between a preview and logs; use a visible stack when you need to read both together.

Keep documentation close without crowding the editor

A second browser window can hold documentation while the first keeps your preview open. Put it beside the windows you use most. Browser tabs work too if you prefer fewer application windows; choose the arrangement that makes the page easy to find.

When you connect another display, Option + N moves the focused window to the next display. It moves the window itself, so use it when you want the browser or terminal on that screen.

For more on laptop widths, see the MacBook window guide. Readers coming from Linux can also compare the layout with Niri-style scrolling on Mac.

This guide is published by Glidro, a paid scrolling window manager for Apple silicon Macs on macOS 13 or later. VS Code's panels and terminals remain part of VS Code; Glidro arranges the app windows around them.