🔧 Restructure mouse input tutorials

Schneegans · Schneegans · commit 2c0ebd434f5a · 2026-03-06T06:00:52.000+01:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -76,16 +76,17 @@ export default defineConfig({
           label: 'Tutorials',
           items: [
             'autostart',
+            'opening-menus',
             {
-              label: 'Mouse Buttons & More',
-              collapsed: false,
+              label: 'App Guides',
+              collapsed: true,
               items: [
-                'opening-menus',
                 'ahk-tutorial',
-                'input-remapper-tutorial',                
+                'input-remapper-tutorial',
+                'ke-tutorial',
                 'bm-tutorial',
                 'btt-tutorial',
-                'ke-tutorial',
+                'kanata-tutorial',
               ],
             },
             'portable-mode',
diff --git a/src/assets/img/btt_configuration.png b/src/assets/img/btt_configuration.png
diff --git a/src/assets/img/karabiner_elements_add_rule.png b/src/assets/img/karabiner_elements_add_rule.png
diff --git a/src/assets/img/karabiner_elements_devices.png b/src/assets/img/karabiner_elements_devices.png
diff --git a/src/content/docs/ahk-tutorial.mdx b/src/content/docs/ahk-tutorial.mdx
@@ -2,7 +2,7 @@
 # SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
 # SPDX-License-Identifier: CC-BY-4.0
 
-title: AutoHotKey
+title: AutoHotKey (Windows)
 description: A guide on how to use AutoHotKey to open Kando menus with mouse buttons.
 banner:
   content: 🚧 This page is currently under construction 🚧
@@ -15,7 +15,7 @@ import Intro from '../../components/Intro.astro';
 ![banner](../../assets/banners/banner12.png)
 
 <Intro>
-  On Windows, you can use a free tool called [AutoHotKey](https://www.autohotkey.com/) to open Kando menus with mouse buttons!
+  [AutoHotKey](https://www.autohotkey.com/) is a powerful scripting language for Windows. You can use it to run the kando command when you press a mouse button or to remap a mouse button to a keyboard shortcut which opens a Kando menu.
 </Intro>
 
 Until this page is finished, please check out these guides on how to use AutoHotKey to open Kando menus:
diff --git a/src/content/docs/bm-tutorial.mdx b/src/content/docs/bm-tutorial.mdx
@@ -6,26 +6,26 @@ title: BetterMouse (macOS)
 description: A guide on how to use BetterMouse to open Kando menus with mouse buttons.
 ---
 
-import { Aside, Tabs, TabItem, LinkButton } from '@astrojs/starlight/components';
-import { Icon } from 'astro-icon/components';
+import { Steps } from '@astrojs/starlight/components';
 import Intro from '../../components/Intro.astro';
 import {Image} from 'astro:assets';
+
 import bm_config from '../../assets/img/bm_config.png';
 
 ![banner](../../assets/banners/banner12.png)
 
 <Intro>
-  On macOS, you can use a tool called [BetterMouse](https://better-mouse.com/) to open Kando menus with mouse buttons!
+  [BetterMouse](https://better-mouse.com/) is a macOS utility app that gives you smooth mouse scrolling, cursor speed control, and powerful mouse/keyboard bindings. You can use it to open a Kando menu via a mouse button.
 </Intro>
-## Overview
-Not every third-party tool supports all functionality, below you can find a short overview about BetterMouse:
-* Open Kando Menu ✅
-* Use Turbo Mode ❌
-
-##  BetterMouse tutorial
-* In BetterMouse navigate to the 'Buttons' section (1)
-* Create a Trigger with the mouse button you want to use (2)
-* Add the keyboard shortcut you want to send with this mouse button
-* The example sends the keyboard shortcut 'CTRL + F13' when pressing the mouse button 6
-* Adjust the example to your own needs (if necessary)
-<Image src={bm_config} alt="" class="shadow"/>
+
+## Configuration
+
+<Steps>
+    1. In BetterMouse navigate to the 'Buttons' section.
+    2. Create a Trigger with the mouse button you want to use.
+    3. Add the keyboard shortcut you want to send with this mouse button.
+    4. The example sends the keyboard shortcut <kbd>Ctrl</kbd>+<kbd>F13</kbd> when pressing the mouse button 6.
+    5. Adjust the example to your own needs (if necessary).
+</Steps>
+
+<Image src={bm_config} alt="" style="width: 50%;" class="shadow"/>
diff --git a/src/content/docs/btt-tutorial.mdx b/src/content/docs/btt-tutorial.mdx
@@ -6,35 +6,34 @@ title: BetterTouchTool (macOS)
 description: A guide on how to use BetterTouchTool to open Kando menus with mouse buttons.
 ---
 
-import { Aside, Tabs, TabItem, LinkButton } from '@astrojs/starlight/components';
-import { Icon } from 'astro-icon/components';
+import { Steps, Aside } from '@astrojs/starlight/components';
 import Intro from '../../components/Intro.astro';
 import {Image} from 'astro:assets';
+
 import btt_config from '../../assets/img/btt_configuration.png';
 
 ![banner](../../assets/banners/banner12.png)
 
 <Intro>
-  On macOS, you can use a tool called [BetterTouchTool](https://folivora.ai/) to open Kando menus with mouse buttons or trackpad gestures.
+  [BetterTouchTool](https://folivora.ai/) is a great, feature packed app that allows you to customize various input devices on your Mac. You can use it to open a Kando menu via touchpad gestures or a mouse button.
 </Intro>
 
-## Overview
-Not every third-party tool supports all functionality, below you can find a short overview about BetterTouchTool:
-* Open Kando Menu ✅
-* Use Turbo Mode ✅
-
-##  Karabiner-Elements tutorial
-* In BetterTouchTool navigate to the 'Normal Mouse' section (1)
-* Create a Trigger with the mouse button you want to use (in the example it's mouse button 7)
-* Under 'Actions Executed On Press' (2) create a action that 'Send Key Down Only' (3)
-* Under 'Actions Executed On Click RELEASE' create a action that 'Send Key Up Only'
-* Or Copy & Paste the example code below, to send the keyboard shortcut 'CTRL + F13' when pressing the mouse button 7
-* Adjust the example code to your own needs (if necessary)
+## GUI Configuration
 
+<Steps>
+1. In BetterTouchTool navigate to the 'Normal Mouse' section. There, create a Trigger with the mouse button you want to use (in the example it's mouse button 7).
+2. Create an action under 'Actions Executed On Press'.
+3. Select 'Send Key Down Only'.
+4. Similarily, under 'Actions Executed On Click RELEASE' create a action that 'Send Key Up Only'.
+</Steps>
 
 <Image src={btt_config} alt="" class="shadow"/>
 
-```
+## JSON Configuration
+
+Alternatively, you can also Copy & Paste the example code below, to send the keyboard shortcut 'CTRL + F13' when pressing the mouse button 7
+
+```json
 [
   {
     "BTTLastUpdatedAt" : 1772350987.4586649,
@@ -74,4 +73,7 @@ Not every third-party tool supports all functionality, below you can find a shor
   }
 ]
 ```
+
+<Aside type="note">
 For additional information, follow the [BetterTouchTool community discussion about how to trigger Kando](https://community.folivora.ai/t/hold-keyboard-shortcut-while-mousebutton-is-pressed/46351/2)
+</Aside>
diff --git a/src/content/docs/input-remapper-tutorial.mdx b/src/content/docs/input-remapper-tutorial.mdx
@@ -2,7 +2,7 @@
 # SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
 # SPDX-License-Identifier: CC-BY-4.0
 
-title: Input Remapper
+title: Input Remapper (Linux)
 description: A guide on how to use Input Remapper to open Kando menus with mouse buttons.
 ---
 
@@ -13,7 +13,7 @@ import Intro from '../../components/Intro.astro';
 ![banner](../../assets/banners/banner12.png)
 
 <Intro>
-  On Linux, you can use a tool called [Input Remapper](https://github.com/sezanzeb/input-remapper) to remap mouse buttons or controller buttons to keyboard shortcuts and open Kando menus this way!
+  [Input Remapper](https://github.com/sezanzeb/input-remapper)is a tool which allows you to remap mouse buttons to keyboard shortcuts. While you can use it directly to bind menus to mouse buttons via keyboard shortcuts, it also allows for more advanced setups like showing menus when pressing two mouse buttons at the same time.
 </Intro>
 
 <Aside type="note">
diff --git a/src/content/docs/kanata-tutorial.mdx b/src/content/docs/kanata-tutorial.mdx
@@ -0,0 +1,22 @@
+---
+# SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
+# SPDX-License-Identifier: CC-BY-4.0
+
+title: Kanata
+description: A guide on how to use Kanata to open Kando menus with complex key chords.
+banner:
+  content: 🚧 This page is currently under construction 🚧
+---
+
+import { Aside, Tabs, TabItem, LinkButton } from '@astrojs/starlight/components';
+import { Icon } from 'astro-icon/components';
+import Intro from '../../components/Intro.astro';
+
+![banner](../../assets/banners/banner12.png)
+
+<Intro>
+  [Kanata](https://github.com/jtroo/kanata) is a powerful tool for creating complex key chords on Windows, Linux, and macOS. You can use it to open Kando menus with intricate key combinations.
+</Intro>
+
+Until this page is finished, please check out this guide on how to use Kanata to open Kando menus:
+* [Using Kanata to open pie menu](https://github.com/orgs/kando-menu/discussions/1309)
diff --git a/src/content/docs/ke-tutorial.mdx b/src/content/docs/ke-tutorial.mdx
@@ -6,39 +6,35 @@ title: Karabiner-Elements (macOS)
 description: A guide on how to use Karabiner-Elements to open Kando menus with mouse buttons.
 ---
 
-import { Aside, Tabs, TabItem, LinkButton } from '@astrojs/starlight/components';
-import { Icon } from 'astro-icon/components';
+import { Steps } from '@astrojs/starlight/components';
 import Intro from '../../components/Intro.astro';
 import {Image} from 'astro:assets';
+
 import karabiner_elements_add_rule from '../../assets/img/karabiner_elements_add_rule.png';
 import karabiner_elements_devices from '../../assets/img/karabiner_elements_devices.png';
 
 ![banner](../../assets/banners/banner12.png)
 
 <Intro>
-  On macOS, you can use a free tool called [Karabiner-Elements](https://karabiner-elements.pqrs.org/) to open Kando menus with mouse buttons!
+  [Karabiner-Elements](https://karabiner-elements.pqrs.org/) is a powerful and stable keyboard customizer for macOS that also can be used to send keyboard shortcuts with your mouse.
 </Intro>
 
-## Overview
-Not every third-party tool supports all functionality, below you can find a short overview about Karabiner-Elements:
-* Open Kando Menu ✅
-* Use Turbo Mode ✅
-
-##  Karabiner-Elements tutorial
-* In Karabiner-Elements you need to navigate on the left sidebar to 'Devices' (1) activate 'Modify events' (2) for the mouse that you want to use
-<Image src={karabiner_elements_devices} alt="Activate 'Modify events' under 'Devices'" class="shadow"/>
-
-* To setup a keyboard shortcut with your mouse, you need to create a 'Complex Modification' in Karabiner-Elements.
-* On the left sidebar of Karabiner-Elements click on 'Complex Modifications' (1) and then on 'Add your own rule' (2)
-<Image src={karabiner_elements_add_rule} alt="'Add your own rule' under 'Complex Modifications'" class="shadow"/>
-
+## GUI Configuration
 
-* Copy & Paste the example code below, to send the keyboard shortcut 'CTRL + F13' when pressing the middle mouse button
-* Adjust the example code to your own needs (if necessary)
+<Steps>
+1. In Karabiner-Elements you need to navigate on the left sidebar to 'Devices'.
+2. Activate 'Modify events' for the mouse that you want to use. <br /><br />
+   <Image src={karabiner_elements_devices} alt="Activate 'Modify events' under 'Devices'" class="shadow"/>
+3. To setup a keyboard shortcut with your mouse, you need to create a 'Complex Modification' in Karabiner-Elements.
+4. Setup the shortcut by clicking on 'Add your own rule'. <br /><br />
+   <Image src={karabiner_elements_add_rule} alt="'Add your own rule' under 'Complex Modifications'" class="shadow"/>
+</Steps>
 
+## JSON Configuration
 
+Alternatively, copy & paste the example code below to send the keyboard shortcut 'CTRL + F13' when pressing the middle mouse button:
 
-```
+```json
 {
     "description": "Middle Mouse Button sends CTRL + F13",
     "manipulators": [
diff --git a/src/content/docs/opening-menus.mdx b/src/content/docs/opening-menus.mdx
@@ -6,8 +6,8 @@ title: Alternative Ways to Open Menus
 description: How to open Kando menus with mouse buttons or touch gestures.
 ---
 
-import { Aside, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components';
-import { Icon } from 'astro-icon/components';
+import { Aside, Icon, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components';
+import { Icon as AstroIcon } from 'astro-icon/components';
 import Intro from '../../components/Intro.astro';
 
 ![banner](../../assets/banners/banner12.png)
@@ -18,34 +18,42 @@ import Intro from '../../components/Intro.astro';
   this!
 </Intro>
 
-## <Icon name="solar:lightbulb-bolt-line-duotone" class="inline-icon" /> Tutorials and Guides for Specific Tools
+## <AstroIcon name="solar:lightbulb-bolt-line-duotone" class="inline-icon" /> Tutorials and Guides for Specific Tools
 
 Below are some tutorials and guides for specific tools which show you how to open Kando menus with these tools.
 If you want to share your own guide, please let us know!
 You can either open an issue, edit this file, or join the [Discord server](https://discord.gg/hZwbVSDkhy) to discuss your idea!
 
-<LinkCard title="AutoHotkey (Windows only)" description='AHK is a powerful scripting language for Windows. You can use it to run the kando command when you press a mouse button or to remap a mouse button to a keyboard shortcut which opens a Kando menu.' href="/ahk-tutorial" />
-<LinkCard title="Input Remapper (Linux only)" description='Input Remapper is a tool which allows you to remap mouse buttons to keyboard shortcuts. While you can use it directly to bind menus to mouse buttons via keyboard shortcuts, it also allows for more advanced setups like showing menus when pressing two mouse buttons at the same time.' href="/input-remapper-tutorial" />
-<LinkCard title="BetterMouse (macOS only)" description='BetterMouse is a macOS utility app that gives you smooth mouse scrolling, cursor speed control, and powerful mouse/keyboard bindings. You can use it to 
-open a Kando menu via a mouse button.' href="/bm-tutorial" />
-<LinkCard title="BetterTouchTool (macOS only)" description='BetterTouchTool is a great, feature packed app that allows you to customize various input devices on your Mac. You can use it to 
-open a Kando menu via touchpad gestures or a mouse button.' href="/btt-tutorial" />
-<LinkCard title="Karabiner-Elements (macOS only)" description='Karabiner-Elements is a powerful and stable keyboard customizer for macOS that also can be used to send keyboard shortcuts with your mouse.' href="/ke-tutorial" />
+
+Tool  | OS | Free | Features | Kando Tutorial
+:-- | :---: | :---: | :---: | :---:
+**AutoHotkey** ([Homepage](https://www.autohotkey.com/)) | <Icon name="seti:windows" class="inline-icon" />         | ✅ | 🖱️ + ✍️ + 🎮 | **[→ Tutorial](/ahk-tutorial)**
+**Input Remapper** ([Homepage](https://github.com/sezanzeb/input-remapper)) | <Icon name="linux" class="inline-icon" />            | ✅ | 🖱️ + ✍️ + 🎮 | **[→ Tutorial](/input-remapper-tutorial)**
+**Karabiner-Elements** ([Homepage](https://karabiner-elements.pqrs.org/)) | <Icon name="apple" class="inline-icon" />         | ✅ | 🖱️ + ✍️ | **[→ Tutorial](/ke-tutorial)**
+**BetterMouse** ([Homepage](https://better-mouse.com/))  |  <Icon name="apple" class="inline-icon" />              | ❌ | 🖱️ | **[→ Tutorial](/bm-tutorial)**
+**BetterTouchTool** ([Homepage](https://folivora.ai/))  | <Icon name="apple" class="inline-icon" />           | ❌ | 🖱️ + ✍️ + 👆 | **[→ Tutorial](/btt-tutorial)**
+**Kanata** ([Homepage](https://github.com/jtroo/kanata))  | <Icon name="seti:windows" class="inline-icon" /> + <Icon name="linux" class="inline-icon" /> +<Icon name="apple" class="inline-icon" />           | ✅ | ⌨️ | **[→ Tutorial](/kanata-tutorial)**
+
+### Features Legend
+
+* 🖱️ Allows you to bind menus to mouse buttons.
+* ✍️ Start Marking Mode by holding down a mouse button.
+* 🎮 With this, you can bind menus to controller buttons.
+* 👆 Allows you to bind menus to gestures.
+* ⌨️ Open menus with complex key chords.
 
 ## More Third-Party Tools
 
 We do not have specific guides for these tools yet, but they should work with Kando as well.
 Feel free to experiment with them and share your findings with us!
+You can even write a tutorial for one of these tools if you want to share your knowledge with the community!
 
 <Tabs syncKey='os'>
   <TabItem label="Windows" icon="seti:windows">
    * [GestureSign](https://www.microsoft.com/store/productId/9N45WQVK2QQW?ocid=pdpshare) allows opening a Kando menu with multi-touch taps and gestures on both touchpad and touchscreen.
   </TabItem>
   <TabItem label="macOS" icon="apple">
-   * [Karabiner-Elements](https://karabiner-elements.pqrs.org/) can be used to remap mouse buttons to keyboard shortcuts.
-   * [BetterTouchTool](https://folivora.ai/) allows opening a Kando menu via touchpad gestures.
    * [Multitouch](https://multitouch.app) allows to add keyboard shortcut as a gesture for trackpad or Apple Magic Mouse.
-   * [BetterMouse](https://better-mouse.com/) is a tool which allows you to remap mouse buttons to keyboard shortcuts.
   </TabItem>
   <TabItem label="Linux" icon="linux">
    * [fusuma](https://github.com/iberianpig/fusuma) together with it's [sendkey plugin](https://github.com/iberianpig/fusuma-plugin-sendkey?tab=readme-ov-file) can be used to open a Kando menu with touchpad or touchscreen gestures. It works on **X11** and **Wayland**.
@@ -57,7 +65,12 @@ Feel free to experiment with them and share your findings with us!
   </TabItem>
 </Tabs>
 
-<br/>
+
+<Aside type="note" title="Have you discovered another cool tool?">
+If you discovered a cool new way to open menus, please let us know! You can either open an issue, edit this file, or join the [Discord server](https://discord.gg/hZwbVSDkhy) to discuss your idea!
+</Aside>
+
+## How Can I Open Menus with These Tools?
 
 Fundamentally, there are two main ways to open Kando menus from these tools.
 You can either open a menu by simulating the shortcut for the menu (if this is supported by the tool), or you can make the tool call the Kando executable with the [`--menu "menu name"`](/launch-from-cli) or [`--trigger <shortcut>`](/launch-from-cli) argument.
@@ -105,7 +118,3 @@ Depending on your operating system, the command to open a Kando menu would look
     ```
   </TabItem>
 </Tabs>
-
-<Aside type="note" title="Have you discovered another cool tool?">
-If you discovered a cool new way to open menus, please let us know! You can either open an issue, edit this file, or join the [Discord server](https://discord.gg/hZwbVSDkhy) to discuss your idea!
-</Aside>
