Skip to content

Wide

Main window on top, remaining windows arranged horizontally below. Ideal for ultrawide monitors where vertical space is limited.

┌───────────────────────────────────────────────────────────┐
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ 1 │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
└───────────────────────────────────────────────────────────┘
┌───────────────────────────────────────────────────────────┐
│ │
│ │
│ │
│ 1 │
│ │
│ │
│ │
│ │
├───────────────────────────────────────────────────────────┤
│ │
│ │
│ │
│ 2 │
│ │
│ │
│ │
│ │
└───────────────────────────────────────────────────────────┘
┌───────────────────────────────────────────────────────────┐
│ │
│ │
│ │
│ 1 │
│ │
│ │
│ │
│ │
├─────────────────────────────┬─────────────────────────────┤
│ │ │
│ │ │
│ │ │
│ 2 │ 3 │
│ │ │
│ │ │
│ │ │
│ │ │
└─────────────────────────────┴─────────────────────────────┘
┌───────────────────────────────────────────────────────────┐
│ │
│ │
│ │
│ 1 │
│ │
│ │
│ │
│ │
├───────────────────┬───────────────────┬───────────────────┤
│ │ │ │
│ │ │ │
│ │ │ │
│ 2 │ 3 │ 4 │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
└───────────────────┴───────────────────┴───────────────────┘

Stack windows share equal width. More windows means narrower columns.

  • Adjustable ratio: Yes - resize the main area
  • Adjustable main count: Yes - put multiple windows in main
  • Stateful: No
spoon.Shoji:configure({
default_layout = "wide",
main_ratio = 0.5, -- Main area gets 50% of screen height
main_count = 1, -- One window in main area
})

The main ratio controls how much vertical space the main area occupies. Bind hotkeys to adjust it dynamically:

spoon.Shoji:bindHotkeys({
increase_main_ratio = { { "ctrl", "alt" }, "=" }, -- Taller main
decrease_main_ratio = { { "ctrl", "alt" }, "-" }, -- Shorter main
})
┌───────────────────────────────────────────────────────────┐
│ │
│ │
│ 1 │
│ │
│ │
├─────────────────────────────┬─────────────────────────────┤
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
│ 2 │ 3 │
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
└─────────────────────────────┴─────────────────────────────┘
┌───────────────────────────────────────────────────────────┐
│ │
│ │
│ │
│ │
│ │
│ 1 │
│ │
│ │
│ │
│ │
│ │
├─────────────────────────────┬─────────────────────────────┤
│ │ │
│ │ │
│ 2 │ 3 │
│ │ │
│ │ │
└─────────────────────────────┴─────────────────────────────┘

Increase main_count to share the main area. With main_count = 2, main windows sit side-by-side on top:

┌─────────────────────────────┬─────────────────────────────┐
│ │ │
│ │ │
│ │ │
│ 1 │ 2 │
│ │ │
│ │ │
│ │ │
│ │ │
├─────────────────────────────┴─────────────────────────────┤
│ │
│ │
│ │
│ 3 │
│ │
│ │
│ │
│ │
└───────────────────────────────────────────────────────────┘

Wide layout shines on:

  • Ultrawide monitors (21:9 or wider) with abundant horizontal pixels
  • Laptop screens with limited vertical space
  • Video editing and timeline-based workflows
  • Horizontal content like spreadsheets or logs
Aspect Wide Tall
Main position Top Left
Stack direction Horizontal Vertical
Best for Ultrawide, short screens Standard, tall screens

Prefer the main window on the bottom? Use the Mirror modifier:

local Modifiers = require("layouts.modifiers")
local Mirror = require("layouts.modifiers.mirror")
local Wide = require("layouts.wide")
local wideBottom = Modifiers.wrap(Wide, Mirror.vertical(), {
name = "wide-bottom",
displayName = "Wide (Bottom)",
})
┌─────────────────────────────┬─────────────────────────────┐
│ │ │
│ │ │
│ │ │
│ 2 │ 3 │
│ │ │
│ │ │
│ │ │
│ │ │
├─────────────────────────────┴─────────────────────────────┤
│ │
│ │
│ │
│ 1 │
│ │
│ │
│ │
│ │
└───────────────────────────────────────────────────────────┘