Tiling Shell

This is a Gnome Shell extension implementing modern windows tiling system by extending GNOME's default 2 columns to any layout you want! Can be installed on Gnome Shells from 42 to 48 on X11 and Wayland: the most recent GNOME Shell is supported, and older releases will include all the features and bug fixes!

• 🤩 First and only extension that provides Windows 11's snap assistant
• 🖥️🖥️ multiple monitors support, even with different scaling factors!
• ⚙️ Manage, edit, create and delete layouts with a built-in editor
• 💡 Layouts are not strict, you can span multiple tiles if you want
• 🚀 Automatically sets the same UI of your GNOME theme, for a seamless integration!

See here the video overview

TilingShellOverview.3.mp4

Have issues, you want to suggest a new feature or contribute? Please open a new issue!

Usage

⬇️ Tiling System	⬇️ Snap Assistant	⬇️ Select a layout	⬇️ Select multiple tiles
⬇️ Layout editor	⬇️ Smart resize	⬇️ Tile with Keyboard	⬇️ Edge Tiling
⬇️ Tiling Buttons	⬇️ Per-workspace layout	⬇️ Auto-tiling	⬇️ Tiling context menu
⬇️ Smart border radius	⬇️ Windows Suggestions

🎉🎉 Tiling Shell's AWESOME Supporters!

Thank you to the 🌟 amazing and everyone who donated on ! 🏅Tomoyuki Kashiro and Markus Huggler on Patreon🏅 and Nick, thy-fi, iatanas0v, Chris, wbezs, DaneshManoharan, Tamas, Ivan Banha and many more on Ko-fi! You are on a mission to make Linux window management better for everyone!

Tiling System

When grabbing and moving a window, press CTRL key to show the tiling layout (you can choose another key from the preferences). When moving on a tile, it will highlight. Ungrab the window to place that window on the highlighted tile.

tiling_system.webm

This extension and the tiling system also implements Windows PowerToys FancyZones!

Go to Usage ⬆️

Snap Assistant

When grabbing and moving a window, the snap assistant will be available on top of the screen. Move the window near it to activate the snap assistant. While still grabbing the window, move your mouse to the tile you are interested in. By stopping grabbing the window will be tiled to the selected tile!

snap_assistant.webm

Snap Assistant's sensibility can be customized from the preferences.

Go to Usage ⬆️

Select a layout

Click on Tiling Shell's panel indicator and the available layouts will be shown. Select the one you prefer by clicking on it. That layout will be applied to every monitor in case you have more than one.

layout_selection.webm

Go to Usage ⬆️

Select multiple tiles

The layout is not strict. You can select multiple tiles too! Just hold ALT while using the tiling system (you can choose another key from the preferences).

multiple_selection.webm

Go to Usage ⬆️

Layout editor

Split a tile	Split a tile vertically	Delete a tile	Save, close the editor or open the menu
LEFT CLICK	LEFT CLICK + CTRL	RIGHT CLICK	Click the Tiling Shell's icon on the panel.

layout_editor.webm

Go to Usage ⬆️

Smart resize

You can resize adjacent tiled windows together!

recursive_resize.webm

It can be enabled/disabled from the preferences

Go to Usage ⬆️

Tile with Keyboard

Move window through the tiles using keyboard shortcuts (SUPER+←/↑/↓/→). They can be customized from the preferences!

keybindings.mp4

It can be enabled/disabled from the preferences

Go to Usage ⬆️

Edge Tiling

You can tile a window by moving it to the edge.

Screencast.from.2024-06-22.22-12-22.webm

Go to Usage ⬆️

Tiling Buttons

Right-click on a window to use the auto-tile buttons and the snap assistant from there! The auto-tile buttons allow you to tile to the leftmost or rightmost empty tile, based on your selected layout. The "Move to best tile" button suggests tiling to the nearest empty tile to the center of the screen.

Screencast.from.2024-07-13.18-21-57.webm

Go to Usage ⬆️

Per-workspace layout

You can select your favorite layout for each workspace of each monitor.

perworkspacelayout.mp4

Go to Usage ⬆️

Auto-tiling

When a window is created, it is automatically moved to the best tile according to where other windows are tiled and the current layout. This is disabled by default and can be enabled in the preferences.

Video.del.2024-10-29.17-34-46.webm

Export and import layouts

Tiling Shell supports importing and exporting its layouts to a JSON file. With this you can create your own custom layouts without the built-in graphical editor, or share your layouts with others! If you are interested into knowing more about the contents of the layout file check the official documentation.

Go to Usage ⬆️

Tiling context menu

Right-click on a window to use the auto-tile buttons and the snap assistant from there! These buttons allow you to tile to the leftmost or rightmost empty tile, based on your selected layout. The "Move to best tile" button suggests tiling to the nearest empty tile to the center of the screen.

Check the demonstration video to see it in action!

Screencast.from.2024-07-13.18-21-57.webm

The original idea was to show the snap assistant when hovering the maximize button (as it is done on Windows 11). Unfortunately, GNOME doesn't let us handle the hovering of the maximize button or add another button near it...

Go to Usage ⬆️

Smart border radius

In GNOME, different windows may have different border radius. Drawing a border around the focused window is hard because it is not possible to know the window border radius. All the existing extensions just draw a border with a static value, making the UI less polished. Tiling Shell, dynamically computes the focused window border radius at runtime. Moreover, if you have an extension or anything else who customize the border radius, the focused window border radius adapts as well! This can be enabled/disabled from the extension's preferences too.

Go to Usage ⬆️

Windows Suggestions

After placing a window in a tile using the tiling system, snap assistant or active screen edges, you’ll see suggestions for other windows to fill the remaining tiles. Got too many windows open? No problem! If all suggestions don’t fit within the available space, you’ll get a scrollable list for quick and easy navigation. See it in action:

windows_suggestions.mp4

Can I choose to opt in or out?

Yes. From the extension's preferences you find a section called Windows Suggestions. You can enable and disable windows suggestions for tiling system, snap assistant and screen edges. You can choose which of the three to keep enabled, or all of them, to personalize for your needs and preferences.

Go to Usage ⬆️

Installation

This extension is published on extensions.gnome.org! You can install from there or install manually. By installing from extensions.gnome.org you will always have the latest update.

Install manually

Download the latest release. Extract the downloaded archive. Copy the folder to ~/.local/share/gnome-shell/extensions directory. You need to reload GNOME Shell afterwards (e.g. by logging out). Then you can enable the extension:

/usr/bin/gnome-extensions enable [email protected]

Install via Source

Clone the repo then run npm i to install dependencies and then run npm run build to build the extension. To finally install the extension run

npm run install:extension

You can restart your GNOME shell e.g. logout then login, or restart in place with an alt-F2 and entering r (X11 only) and enable the extension. Enjoy it! To enable via the command line you can run

/usr/bin/gnome-extensions enable [email protected]

To read the logs you can run

journalctl --follow /usr/bin/gnome-shell

To read the logs of the preferences you can run

journalctl -f -o cat /usr/bin/gjs

Uninstall Tiling Shell

To uninstall, first disable the extension and then remove it. To disable via the command line you can run

/usr/bin/gnome-extensions disable [email protected]

Contributing

Feel free to submit issues and Pull Requests!

How to add new keybindings

1. Edit the file resources/schemas/org.gnome.shell.extensions.tilingshell.gschema.xml and add a new key with a name, default empty value and a summary. For example, add the following if the name is highlight-current-window and the summary is Minimize all the other windows and show only the focused window:

<key type="as" name="highlight-current-window">
  <default><![CDATA[['']]]></default>
  <summary>Minimize all the other windows and show only the focused window</summary>
</key>

2. Edit the file src/settings/settings.ts and add a static constant at the end of the list of the static constants (for example here). The static constant must be a string equal to the key name. The constant name must start with SETTING_ and must be the key name capitalized and using underscores. For example if the key name is highlight-current-window, add this to the file:

static SETTING_HIGHLIGHT_CURRENT_WINDOW = 'highlight-current-window';

3. Edit the file src/keybindings.ts by adding a new signal with a name equal to the key name. Be sure to put Meta.Display.$gtype followed by all the parameter types you need (if any). For example, if the key name is highlight-current-window and it doesn't need any parameter, add this:

'highlight-current-window': {
    param_types: [Meta.Display.$gtype], // Meta.Display,
},

4. The idea is that, when the user presses the keybindings, the Keybinding singleton class will emit that signal. To achieve that, edit the file src/keybindings.ts by emitting the signal when the keybindings are used, for example here. For example if the key name is highlight-current-window, add this:

Main.wm.addKeybinding(
    Settings.SETTING_HIGHLIGHT_CURRENT_WINDOW,
    extensionSettings,
    Meta.KeyBindingFlags.NONE,
    Shell.ActionMode.NORMAL,
    (display: Meta.Display) => {
        this.emit('highlight-current-window', display);
    },
);

You can put after display all the parameters you need (if any).

5. Ensure you disable the keybindings when the extension is disabled. To achieve that edit the file src/keybindings.ts to remove the keybindings, for example here. For example, if the key name is highlight-current-window then add this:

Main.wm.removeKeybinding(Settings.SETTING_HIGHLIGHT_CURRENT_WINDOW);

6. You can now listen to the keybindings from everywhere by just connecting to the signal. A good place to do so is in the src/extension.ts file, for example here. For example, if the key name is highlight-current-window then add this:

this._signals.connect(
  this._keybindings,
  'highlight-current-window',
  (kb: KeyBindings, dp: Meta.Display) => {
      // handle the keybinding and perform the actions you want
      // to happen when the keybinding is used by the user
      ...
  },
);

7. Edit the file src/prefs.ts to allow the user to choose its preferred keybindings. This can be easily done by adding a new entry in the keybindings array. For example by adding a new entry here. For example, if the key name is highlight-current-window then add this:

[
    Settings.SETTING_HIGHLIGHT_CURRENT_WINDOW,
    _('Highlight focused window'),
    _('Minimize all the other windows and show only the focused window'),
    false,
    false,
],

The first element is the settings key, the second element is the title and the third is the description. The fourth is a boolean used by the preferences to store if that setting is set or not. The last is a boolean that indicates whether or not this setting must be on the main page, otherwise it can be accessed by expanding the list of available keybindings. However, any keybinding set by the user is always put on the main page. Please use the same description you wrote in the schema at step 1.

For any problem, doubts or if you are stuck, feel free to open a pull request with what you have already done. I'm more than happy to help!