Skip to content

Instantly share code, notes, and snippets.

@danhigham

danhigham/sway-cheatsheet.html

Created January 18, 2026 21:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danhigham/524ef33a977004e65d24b69891c7d242 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danhigham/524ef33a977004e65d24b69891c7d242 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sway-cheatsheet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sway Keyboard Cheat Sheet</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #fafaf9;
--surface: #ffffff;
--text: #1c1917;
--text-muted: #57534e;
--accent: #0c4a6e;
--accent-light: #e0f2fe;
--border: #d6d3d1;
--key-bg: #f5f5f4;
--key-border: #a8a29e;
--section-1: #0c4a6e;
--section-2: #065f46;
--section-3: #7c2d12;
--section-4: #581c87;
--section-5: #1e3a8a;
--section-6: #831843;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans 3', -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.4;
font-size: 11px;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 24px;
}
header {
text-align: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 3px solid var(--accent);
}
h1 {
font-family: 'JetBrains Mono', monospace;
font-size: 28px;
font-weight: 700;
color: var(--accent);
letter-spacing: -0.5px;
margin-bottom: 4px;
}
.subtitle {
color: var(--text-muted);
font-size: 12px;
}
.mod-note {
display: inline-block;
background: var(--accent-light);
color: var(--accent);
padding: 4px 12px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
margin-top: 8px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.section {
background: var(--surface);
border-radius: 8px;
padding: 12px;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.section-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid currentColor;
}
.section-icon {
width: 20px;
height: 20px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: white;
font-weight: 700;
}
.section-title {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.s1 { color: var(--section-1); }
.s1 .section-icon { background: var(--section-1); }
.s2 { color: var(--section-2); }
.s2 .section-icon { background: var(--section-2); }
.s3 { color: var(--section-3); }
.s3 .section-icon { background: var(--section-3); }
.s4 { color: var(--section-4); }
.s4 .section-icon { background: var(--section-4); }
.s5 { color: var(--section-5); }
.s5 .section-icon { background: var(--section-5); }
.s6 { color: var(--section-6); }
.s6 .section-icon { background: var(--section-6); }
.shortcut-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.shortcut {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.keys {
display: flex;
gap: 3px;
flex-shrink: 0;
}
kbd {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 600;
background: var(--key-bg);
border: 1px solid var(--key-border);
border-radius: 3px;
padding: 2px 5px;
box-shadow: 0 1px 0 var(--key-border);
white-space: nowrap;
}
.plus {
color: var(--text-muted);
font-size: 9px;
}
.action {
color: var(--text);
font-size: 10px;
text-align: right;
flex-grow: 1;
}
.subsection {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
.subsection-title {
font-size: 9px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.mode-trigger {
background: linear-gradient(135deg, var(--accent-light) 0%, #f0f9ff 100%);
border: 1px dashed var(--accent);
border-radius: 4px;
padding: 6px 8px;
margin-bottom: 8px;
}
.mode-trigger .action {
font-weight: 600;
color: var(--accent);
}
.span-2 {
grid-column: span 2;
}
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
footer {
text-align: center;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: 9px;
}
footer a {
color: var(--accent);
text-decoration: none;
}
@media print {
body {
background: white;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.container {
padding: 12px;
max-width: 100%;
}
.section {
break-inside: avoid;
box-shadow: none;
}
}
@page {
size: A4 landscape;
margin: 10mm;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>⌨ Sway Keyboard Cheat Sheet</h1>
<p class="subtitle">Tiling Wayland Compositor · Quick Reference</p>
<span class="mod-note">$mod = Super (⊞) key</span>
</header>
<div class="grid">
<!-- Workspaces -->
<div class="section s1">
<div class="section-header">
<div class="section-icon">W</div>
<span class="section-title">Workspaces</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>1-8</kbd></div>
<span class="action">Switch to workspace 1-8</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>1-8</kbd></div>
<span class="action">Move window to workspace</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Tab</kbd></div>
<span class="action">Next workspace</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>Alt</kbd><span class="plus">+</span><kbd>Tab</kbd></div>
<span class="action">Previous workspace</span>
</div>
</div>
<div class="subsection">
<div class="subsection-title">Gestures</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>Swipe ↑↓</kbd></div>
<span class="action">Prev / Next workspace</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>Swipe ←→</kbd></div>
<span class="action">Prev / Next focus</span>
</div>
</div>
</div>
</div>
<!-- Window Operations -->
<div class="section s2">
<div class="section-header">
<div class="section-icon">◫</div>
<span class="section-title">Window Operations</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>Q</kbd></div>
<span class="action">Kill focused window</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>R</kbd></div>
<span class="action">Reload Sway config</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>M</kbd></div>
<span class="action">Toggle fullscreen</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>X</kbd></div>
<span class="action">Lock screen</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>A</kbd></div>
<span class="action">Split vertical</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>A</kbd></div>
<span class="action">Split horizontal</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>O</kbd></div>
<span class="action">Cycle layout (tab/split)</span>
</div>
</div>
</div>
<!-- Focus & Navigation -->
<div class="section s3">
<div class="section-header">
<div class="section-icon">⌖</div>
<span class="section-title">Focus & Navigation</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>H J K L</kbd></div>
<span class="action">Focus ← ↓ ↑ →</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>U</kbd></div>
<span class="action">Focus parent container</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>I</kbd></div>
<span class="action">Focus child container</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Q</kbd></div>
<span class="action">Toggle focus mode</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>N</kbd></div>
<span class="action">Next fullscreen window</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>P</kbd></div>
<span class="action">Prev fullscreen window</span>
</div>
</div>
</div>
<!-- Move & Resize -->
<div class="section s4">
<div class="section-header">
<div class="section-icon">↔</div>
<span class="section-title">Move & Resize</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>H J K L</kbd></div>
<span class="action">Move window ← ↓ ↑ →</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Ctrl</kbd><span class="plus">+</span><kbd>H</kbd></div>
<span class="action">Grow width</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Ctrl</kbd><span class="plus">+</span><kbd>L</kbd></div>
<span class="action">Shrink width</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Ctrl</kbd><span class="plus">+</span><kbd>K</kbd></div>
<span class="action">Grow height</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Ctrl</kbd><span class="plus">+</span><kbd>J</kbd></div>
<span class="action">Shrink height</span>
</div>
</div>
</div>
<!-- Floating Windows -->
<div class="section s5">
<div class="section-header">
<div class="section-icon">❏</div>
<span class="section-title">Floating Windows</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Space</kbd></div>
<span class="action">Toggle float + center</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>Space</kbd></div>
<span class="action">Center + resize floating</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>Y</kbd></div>
<span class="action">Center floating window</span>
</div>
</div>
<div class="subsection">
<div class="subsection-title">Screenshots</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>Print</kbd></div>
<span class="action">Full screenshot</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Print</kbd></div>
<span class="action">Edit screenshot</span>
</div>
</div>
</div>
</div>
<!-- Media & Brightness -->
<div class="section s6">
<div class="section-header">
<div class="section-icon">♪</div>
<span class="section-title">Media & Hardware</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>F6/F7</kbd></div>
<span class="action">Volume down / up</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>F5</kbd></div>
<span class="action">Mute toggle</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>F3/F4</kbd></div>
<span class="action">Brightness down / up</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>↑↓</kbd></div>
<span class="action">Play / Pause</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>←→</kbd></div>
<span class="action">Previous / Next track</span>
</div>
</div>
</div>
<!-- Modes Section - Spans 3 columns -->
<div class="section s1 span-2">
<div class="section-header">
<div class="section-icon">M</div>
<span class="section-title">Modal Shortcuts (enter mode, then press key)</span>
</div>
<div class="two-col">
<div>
<!-- Launch Mode -->
<div class="mode-trigger shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Enter</kbd></div>
<span class="action">→ Launch Mode</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>Enter</kbd></div>
<span class="action">Terminal</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>W</kbd></div>
<span class="action">Browser</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>I</kbd></div>
<span class="action">Incognito</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>N</kbd></div>
<span class="action">File manager</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>O</kbd></div>
<span class="action">PDF reader</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>B</kbd></div>
<span class="action">Bluetooth</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>P</kbd></div>
<span class="action">Audio settings</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>M</kbd></div>
<span class="action">Music player</span>
</div>
</div>
<!-- Swap Mode -->
<div class="mode-trigger shortcut" style="margin-top: 12px;">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>U</kbd></div>
<span class="action">→ Swap Mode</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>H J K L</kbd></div>
<span class="action">Swap window ← ↓ ↑ →</span>
</div>
</div>
</div>
<div>
<!-- Rofi Mode -->
<div class="mode-trigger shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>D</kbd></div>
<span class="action">→ Rofi Mode</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>D</kbd></div>
<span class="action">App launcher (drun)</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>D</kbd></div>
<span class="action">Run command</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>W</kbd></div>
<span class="action">Window switcher</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>E</kbd></div>
<span class="action">Emoji picker</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>E</kbd></div>
<span class="action">Power menu</span>
</div>
</div>
<!-- Bookmarks Mode -->
<div class="mode-trigger shortcut" style="margin-top: 12px;">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>W</kbd></div>
<span class="action">→ Bookmarks Mode</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>M</kbd></div>
<span class="action">Open bookmarks</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>⇧</kbd><span class="plus">+</span><kbd>M</kbd></div>
<span class="action">Private bookmarks</span>
</div>
<div class="shortcut">
<div class="keys"><kbd>N</kbd></div>
<span class="action">Bookmarks window</span>
</div>
</div>
<!-- Script & Notify -->
<div class="mode-trigger shortcut" style="margin-top: 12px;">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>S</kbd></div>
<span class="action">→ Script Mode</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>B</kbd> <kbd>T</kbd> <kbd>W</kbd></div>
<span class="action">Waybar / Night light / Wallpaper</span>
</div>
</div>
<div class="mode-trigger shortcut" style="margin-top: 12px;">
<div class="keys"><kbd>$mod</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>M</kbd></div>
<span class="action">→ Notify Mode</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>M</kbd> / <kbd>⇧</kbd><span class="plus">+</span><kbd>M</kbd></div>
<span class="action">Restore / Dismiss all</span>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Reference -->
<div class="section s2">
<div class="section-header">
<div class="section-icon">?</div>
<span class="section-title">Quick Reference</span>
</div>
<div class="shortcut-list">
<div class="shortcut">
<div class="keys"><kbd>Esc</kbd> <kbd>Super</kbd> <kbd>Enter</kbd> <kbd>Space</kbd></div>
<span class="action">Exit any mode</span>
</div>
</div>
<div class="subsection">
<div class="subsection-title">Vim-style Navigation</div>
<div style="text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); padding: 8px 0;">
<span style="opacity: 0.5">↑</span><br>
<span style="opacity: 0.5">←</span> <kbd>H</kbd> <kbd>J</kbd> <kbd>K</kbd> <kbd>L</kbd> <span style="opacity: 0.5">→</span><br>
<span style="opacity: 0.5">↓</span>
</div>
</div>
<div class="subsection">
<div class="subsection-title">Media Keys Also Work</div>
<div class="shortcut-list" style="font-size: 9px; color: var(--text-muted);">
<div class="shortcut">
<span class="action" style="text-align: left;">XF86 brightness, volume, and media keys are mapped as alternatives</span>
</div>
</div>
</div>
</div>
</div>
<footer>
Config source: <a href="https://github.com/bibjaw99/workstation">github.com/bibjaw99/workstation</a> · Print this page for desktop reference
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment