### Install Quickshell on Guix

Source: https://quickshell.org/docs/master/guide/install-setup

Install the release version of Quickshell from the standard Guix repository using guix install.

```bash
guix install quickshell
```

--------------------------------

### Install Quickshell on Ubuntu

Source: https://quickshell.org/docs/master/guide/install-setup

Add the DankLinux PPA and install either the latest release or the git version of Quickshell using apt.

```bash
# Add DankLinux PPA
sudo add-apt-repository ppa:avengemedia/danklinux
sudo apt update

sudo apt install quickshell
# OR
sudo apt install quickshell-git
```

--------------------------------

### I3IpcListener Example

Source: https://quickshell.org/docs/master/types/Quickshell.I3/I3IpcListener

This example demonstrates how to create an I3IpcListener to subscribe to 'input' events and handle them using a callback function. Ensure the 'Quickshell.I3' module is imported.

```javascript
I3IpcListener {
  subscriptions: ["input"]
  onIpcEvent: function (event) {
    handleInputEvent(event.data)
  }
}
```

--------------------------------

### Install Quickshell on Fedora

Source: https://quickshell.org/docs/master/guide/install-setup

Install the release version of Quickshell on Fedora using dnf.

```bash
sudo dnf install quickshell
```

--------------------------------

### Example Usage

Source: https://quickshell.org/docs/master/types/Quickshell.Io/IpcHandler

An example demonstrating the creation of an IpcHandler to control and retrieve properties of a Rectangle, including function calls and signal emission.

```APIDOC
#### Example
The following example creates ipc functions to control and retrieve the appearance of a Rectangle.
```
FloatingWindow {
  Rectangle {
    id: rect
    anchors.centerIn: parent
    width: 100
    height: 100
    color: "red"
  }

  IpcHandler {
    target: "rect"

    function setColor(color: color): void { rect.color = color; }
    function getColor(): color { return rect.color; }

    function setAngle(angle: real): void { rect.rotation = angle; }
    function getAngle(): real { return rect.rotation; }

    function setRadius(radius: int): void {
      rect.radius = radius;
      this.radiusChanged(radius);
    }

    function getRadius(): int { return rect.radius; }
		signal radiusChanged(newRadius: int);
  }
}
```
```

--------------------------------

### QML Import Examples

Source: https://quickshell.org/docs/master/guide/qml-language

Provides concrete examples of various QML import statements, including module imports, versioned module imports, Quickshell imports, and JavaScript imports with namespaces.

```qml
import QtQuick
import QtQuick.Controls 6.0
import Quickshell as QS
import QtQuick.Layouts 6.0 as L
import "jsfile.js" as JsFile
```

--------------------------------

### Install Quickshell on Arch Linux

Source: https://quickshell.org/docs/master/guide/install-setup

Install the release version of Quickshell from the Arch Linux package repository using pacman.

```bash
pacman -S quickshell
```

--------------------------------

### Install Quickshell-git on Arch Linux (AUR)

Source: https://quickshell.org/docs/master/guide/install-setup

Install the development version of Quickshell from the AUR using an AUR helper like yay. Be aware that AUR packages may break with Qt updates.

```bash
yay -S quickshell-git
```

--------------------------------

### Create a Basic Panel Window

Source: https://quickshell.org/docs/master/guide/introduction

Use PanelWindow to create a simple bar or widget. This example displays 'hello world' centered in the panel.

```QML
import Quickshell // for PanelWindow
import QtQuick // for Text

PanelWindow {
  anchors {
    top: true
    left: true
    right: true
  }

  implicitHeight: 30

  Text {
    // center the bar in its parent component (the window)
    anchors.centerIn: parent

    text: "hello world"
  }
}
```

--------------------------------

### PopupWindow Usage Example

Source: https://quickshell.org/docs/master/types/Quickshell/PopupWindow

This example demonstrates how to create a PopupWindow anchored to a PanelWindow, positioning it in the center.

```APIDOC
## PopupWindow: QsWindow 
`import Quickshell`
Pupup window that can display in a position relative to a floating or panel window.
#### Example
The following snippet creates a panel with a popup centered over it.
```
PanelWindow {
  id: toplevel

  anchors {
    bottom: true
    left: true
    right: true
  }

  PopupWindow {
    anchor.window: toplevel
    anchor.rect.x: parentWindow.width / 2 - width / 2
    anchor.rect.y: parentWindow.height
    width: 500
    height: 500
    visible: true
  }
}
```
```

--------------------------------

### Implicit QML Import Example

Source: https://quickshell.org/docs/master/guide/qml-language

Illustrates how QML automatically imports types from neighboring QML files if their names start with an uppercase letter.

```qml
root
(.)MyButton.qml
(.)shell.qml
```

--------------------------------

### Reusing a Window on Every Screen with Quickshell

Source: https://quickshell.org/docs/master/types/Quickshell/Quickshell

This example demonstrates how to create an instance of a window on each connected screen using Quickshell's `screens` property. The window will be created or destroyed as screens are added or removed.

```qml
ShellRoot {
  Variants {
    // see Variants for details
    variants: Quickshell.screens
    PanelWindow {
      property var modelData
      screen: modelData
    }
  }
}
```

--------------------------------

### Container Item with Anchors and Margin

Source: https://quickshell.org/docs/master/guide/size-position

This example demonstrates how to use QtQuick Anchors to achieve the same layout as the previous examples, reducing boilerplate code. It uses `anchors.fill` and `anchors.margins` for positioning and sizing.

```qml
Item {
  property real margin: 5

  implicitWidth: child.implicitWidth + margin * 2
  implicitHeight: child.implicitHeight + margin * 2

  Rectangle {
    id: child

    anchors.fill: parent
    anchors.margins: parent.margin

    implicitWidth: 50
    implicitHeight: 50
  }
}
```

--------------------------------

### Enable Fedora COPR and Install Quickshell

Source: https://quickshell.org/docs/master/guide/install-setup

Enable the errornointernet/quickshell COPR repository on Fedora to install either the latest release or the git version of Quickshell.

```bash
sudo dnf copr enable errornointernet/quickshell

sudo dnf install quickshell
# or
sudo dnf install quickshell-git
```

--------------------------------

### QML Document Structure Example

Source: https://quickshell.org/docs/master/guide/qml-language

Demonstrates the basic structure of a QML document, including imports, object definitions, properties, bindings, signals, handlers, functions, and components.

```qml
// QML Import statement
import QtQuick 6.0

// Javascript import statement
import "myjs.js" as MyJs

// Root Object
Item {
  // Id assignment

  id: root
  // Property declaration
  property int myProp: 5;

  // Property binding
  width: 100

  // Property binding
  height: width

  // Multiline property binding
  prop: {
    // ...
    5
  }

  // Object assigned to a property
  objProp: Object {
    // ...
  }

  // Object assigned to the parent's default property
  AnotherObject {
    // ...
  }

  // Signal declaration
  signal foo(bar: int)

  // Signal handler
  onSignal: console.log("received signal!")

  // Property change signal handler
  onWidthChanged: console.log(`width is now ${width}!")

  // Multiline signal handler
  onOtherSignal: {
    console.log("received other signal!");
    console.log(`5 * 2 is ${dub(5)}`);
    // ...
  }

  // Attached property signal handler
  Component.onCompleted: MyJs.myfunction()

  // Function
  function dub(x: int): int {
    return x * 2
  }

  // Inline component
  component MyComponent: Object {
    // ...
  }
}
```

--------------------------------

### Nested Regions Example

Source: https://quickshell.org/docs/master/types/Quickshell/Region

Demonstrates how to create a complex region by nesting multiple regions. The inner region uses 'Intersection.Subtract' to create a cutout.

```Quickshell
Region {
  width: 100; height: 100;

  Region {
    x: 50; y: 50;
    width: 50; height: 50;
    intersection: Intersection.Subtract
  }
}
```

--------------------------------

### Create a Basic WlSessionLock

Source: https://quickshell.org/docs/master/types/Quickshell.Wayland/WlSessionLock

This example demonstrates creating a WlSessionLock with a button to unlock the session. The lock disappears when the button is clicked. Ensure `lock.locked = true` is called to activate the lock.

```javascript
WlSessionLock {
  id: lock

  WlSessionLockSurface {
    Button {
      text: "unlock me"
      onClicked: lock.locked = false
    }
  }
}

// ...
lock.locked = true
```

--------------------------------

### Using MarginWrapperManager for Size and Position

Source: https://quickshell.org/docs/master/guide/size-position

This example shows how `MarginWrapperManager` simplifies size and position management between a container and its child, automatically handling boilerplate and preventing binding loops.

```qml
Item {
  MarginWrapperManager { margin: 5 }

  // Automatically detected by MarginWrapperManager as the
  // primary child of the container and sized accordingly.
  Rectangle {
    implicitWidth: 50
    implicitHeight: 50
  }
}
```

--------------------------------

### Neovim Configuration for QML Language Server

Source: https://quickshell.org/docs/master/guide/install-setup

Set up the QML language server (qmlls) in Neovim using nvim-lspconfig. This snippet assumes you have nvim-lspconfig installed.

```lua
require("lspconfig").qmlls.setup {}
```

--------------------------------

### Implement HyprlandFocusGrab in QML

Source: https://quickshell.org/docs/master/types/Quickshell.Hyprland/HyprlandFocusGrab

This example demonstrates how to use HyprlandFocusGrab within a QML ShellRoot. It includes a button to toggle the focus grab and a FloatingWindow that is whitelisted to receive input.

```qml
import Quickshell
import Quickshell.Hyprland
import QtQuick.Controls

ShellRoot {
  FloatingWindow {
    id: window

    Button {
      anchors.centerIn: parent
      text: grab.active ? "Remove exclusive focus" : "Take exclusive focus"
      onClicked: grab.active = !grab.active
    }

    HyprlandFocusGrab {
      id: grab
      windows: [ window ]
    }
  }
}
```

--------------------------------

### QML Object Definition

Source: https://quickshell.org/docs/master/guide/qml-language

Shows the basic syntax for defining a QML object, which is an instance of a type from an imported module. Objects must start with an uppercase letter.

```qml
Name {
  id: foo
  // properties, functions, signals, etc...
}
```

--------------------------------

### Hyprland Global Shortcut Binding

Source: https://quickshell.org/docs/master/types/Quickshell.Hyprland/GlobalShortcut

Example of how to bind a global shortcut in Hyprland. This format is used to associate a key combination with a specific application ID and shortcut name.

```bash
bind = <modifiers>, <key>, global, <appid>:<name>

```

--------------------------------

### Reusable Container with Binding

Source: https://quickshell.org/docs/master/guide/size-position

This example shows how to create a reusable container component using `Binding` to control the child item's actual size and position. This approach is exclusive to the `Binding` type.

```qml
Item {
  id: wrapper
  property real margin: 5
  required default property Item child

  children: [child]

  implicitWidth: child.implicitWidth + margin * 2
  implicitHeight: child.implicitHeight + margin * 2

  Binding { wrapper.child.x: wrapper.margin }
  Binding { wrapper.child.y: wrapper.margin }
  Binding { wrapper.child.width: wrapper.width - wrapper.margin * 2 }
  Binding { wrapper.child.height: wrapper.height - wrapper.margin * 2 }
}
```

--------------------------------

### Format System Date and Time with SystemClock

Source: https://quickshell.org/docs/master/guide/introduction

Use SystemClock to get a Date object and Qt.formatDateTime to format it. Set SystemClock.precision to 'Minutes' to conserve battery if seconds are not needed.

```QML
// Time.qml
pragma Singleton

import Quickshell
import QtQuick

Singleton {
  id: root
  // an expression can be broken across multiple lines using {}
  readonly property string time: {
    // The passed format string matches the default output of
    // the `date` command.
    Qt.formatDateTime(clock.date, "ddd MMM d hh:mm:ss AP t yyyy")
  }

  SystemClock {
    id: clock
    precision: SystemClock.Seconds
  }
}
```

--------------------------------

### WlSessionLockSurface Background Color Example

Source: https://quickshell.org/docs/master/types/Quickshell.Wayland/WlSessionLockSurface

Demonstrates setting a background color for a lock surface. Transparent colors may behave unexpectedly; using a colored content item over a transparent window is recommended. Avoid transparent lock screens as compositors may ignore them.

```javascript
ProxyWindow {
  Rectangle {
    anchors.fill: parent
    color: "#20ffffff"

    // your content here
  }
}
```

--------------------------------

### launch

Source: https://quickshell.org/docs/master/types/Quickshell.Services.Greetd/Greetd

Launches the greetd session, exiting quickshell.

```APIDOC
## launch

### Description

Launch the session, exiting quickshell. Must be in `GreetdState.ReadyToLaunch` to call this function.

### Method

`launch(command: list, environment: list, quit: bool)`

### Parameters

#### Path Parameters

- **command** (list) - Required - The command to launch.
- **environment** (list) - Required - The environment variables for the session.
- **quit** (bool) - Required - Whether to exit quickshell after launching.

### Notes

The `launched()` signal can be used to perform an action after greetd has acknowledged the desired session. Note that greetd expects the greeter to terminate as soon as possible after setting a target session, and waiting too long may lead to unexpected behavior such as the greeter restarting. Performing animations and such should be done _before_ calling `launch`.
```

--------------------------------

### RetainableLock Usage Example

Source: https://quickshell.org/docs/master/types/Quickshell/RetainableLock

This example demonstrates how to use RetainableLock to keep a retainable object alive as long as the lock exists.

```APIDOC
## RetainableLock

### Description
A RetainableLock provides extra safety and ease of use for locking Retainable objects. A retainable object can be locked by multiple locks at once, and each lock re-exposes relevant properties of the retained objects.

### Properties
* **object** (QtObject) - The object to lock. Must be Retainable.
* **locked** (bool) - If the object should be locked.
* **retained** (bool, readonly) - If the object is currently in a retained state.

### Signals
* **dropped** ()
Rebroadcast of the object’s dropped signal.
* **aboutToDestroy** ()
Rebroadcast of the object’s aboutToDestroy signal.

### Example
The code below will keep a retainable object alive for as long as the RetainableLock exists.
```
RetainableLock {
  object: aRetainableObject
  locked: true
}
```
```

--------------------------------

### Configure and Execute a Process

Source: https://quickshell.org/docs/master/types/Quickshell.Io/Process

Launches a process with detailed configuration including environment variables and working directory. Passed parameters override current settings.

```javascript
process.exec({
  command: ["echo", "hello"],
  environment: {
    "MY_VAR": "value"
  },
  clearEnvironment: true,
  workingDirectory: "/tmp"
});
```

--------------------------------

### Quickshell Module Import Syntax

Source: https://quickshell.org/docs/master/guide/qml-language

Demonstrates the syntax for importing Quickshell modules using the 'qs' prefix, supporting nested paths and optional namespaces.

```qml
import qs.<path> [as <Namespace>]
```

--------------------------------

### ToplevelManager Properties

Source: https://quickshell.org/docs/master/types/Quickshell.Wayland/ToplevelManager

Access properties of the ToplevelManager to get information about active and all toplevel windows.

```APIDOC
## ToplevelManager
singleton
`import Quickshell.Wayland`

Exposes a list of windows from other applications as Toplevels via the zwlr-foreign-toplevel-management-v1 wayland protocol.

### Properties

*   **activeToplevel** : Toplevel readonly
    Active toplevel or null. If multiple are active, this will be the most recently activated one. Usually compositors will not report more than one toplevel as active at a time.

*   **toplevels** : ObjectModel <Toplevel> readonly
    All toplevel windows exposed by the compositor.
```

--------------------------------

### Asynchronous PopupWindow Loading with LazyLoader

Source: https://quickshell.org/docs/master/types/Quickshell/LazyLoader

Demonstrates how to use LazyLoader to asynchronously prepare a PopupWindow. The main bar loads first, and the popup is loaded in the background. Accessing the popup's item will force synchronous loading if it's not yet ready.

```qml
import QtQuick
import QtQuick.Controls
import Quickshell

ShellRoot {
  PanelWindow {
    id: window
    height: 50

    anchors {
      bottom: true
      left: true
      right: true
    }

    LazyLoader {
      id: popupLoader

      // start loading immediately
      loading: true

      // this window will be loaded in the background during spare
      // frame time unless active is set to true, where it will be
      // loaded in the foreground
      PopupWindow {
        // position the popup above the button
        parentWindow: window
        relativeX: window.width / 2 - width / 2
        relativeY: -height

        // some heavy component here

        width: 200
        height: 200
      }
    }

    Button {
      anchors.centerIn: parent
      text: "show popup"

      // accessing popupLoader.item will force the loader to
      // finish loading on the UI thread if it isn't finished yet.
      onClicked: popupLoader.item.visible = !popupLoader.item.visible
    }
  }
}
```

--------------------------------

### UPower Properties

Source: https://quickshell.org/docs/master/types/Quickshell.Services.UPower/UPower

Access properties of the UPower service to get information about devices and power status.

```APIDOC
## UPower: QtObject
singleton
`import Quickshell.Services.UPower`
An interface to the UPower daemon, which can be used to view battery and power statistics for your computer and connected devices.
The UPower daemon must be installed to use this service.

## Properties
  * devices  : ObjectModel <UPowerDevice> readonly
All connected UPower devices.
  * displayDevice  : UPowerDevice readonly
UPower’s DisplayDevice for your system. Cannot be null, but might not be initialized (check  if you need to know).
This is an aggregate device and not a physical one, meaning you will not find it in . It is typically the device that is used for displaying information in desktop environments.
  * onBattery  : bool readonly
If the system is currently running on battery power, or discharging.
```

--------------------------------

### IpcHandler Properties

Source: https://quickshell.org/docs/master/types/Quickshell.Io/IpcHandler

Properties of an IpcHandler can be read using `qs ipc prop get` if they are of an IPC-compatible type.

```APIDOC
#### Properties
  * enabled  : bool
If the handler should be able to receive calls. Defaults to true.
  * target  : string
The target this handler should be accessible from. Required and must be unique. May be changed at runtime.
```

--------------------------------

### Run a Process and Display Output

Source: https://quickshell.org/docs/master/guide/introduction

Utilize the Process object to execute system commands and StdioCollector to capture their output. The text is updated when the process stream finishes.

```QML
import Quickshell
import Quickshell.Io // for Process
import QtQuick

PanelWindow {
  anchors {
    top: true
    left: true
    right: true
  }

  implicitHeight: 30

  Text {
    // give the text an ID we can refer to elsewhere in the file
    id: clock

    anchors.centerIn: parent

    // create a process management object
    Process {
      // the command it will run, every argument is its own string
      command: ["date"]

      // run the command immediately
      running: true

      // process the stdout stream using a StdioCollector
      // Use StdioCollector to retrieve the text the process sends
      // to stdout.
      stdout: StdioCollector {
        // Listen for the streamFinished signal, which is sent
        // when the process closes stdout or exits.
        onStreamFinished: clock.text = this.text // `this` can be omitted
      }
    }
  }
}
```

--------------------------------

### Process Object Configuration

Source: https://quickshell.org/docs/master/types/Quickshell.Io/Process

Demonstrates how to configure a Process object, including setting the command, environment variables, and stdout stream handling.

```APIDOC
## Process Object Configuration

This example shows how to instantiate and configure a `Process` object.

### Properties

*   **running**: `bool` - Set to `true` to start the process.
*   **command**: `list<string>` - The command and its arguments to execute.
*   **stdout**: `DataStreamParser` - Configures how to handle the standard output stream.

### Example

```
Process {
  running: true
  command: [ "some-command", "arg" ]
  stdout: StdioCollector {
    onStreamFinished: console.log(`line read: ${this.text}`)
  }
}
```
```

--------------------------------

### Start Process Detached

Source: https://quickshell.org/docs/master/types/Quickshell.Io/Process

Launches a process that runs independently of Quickshell. The subprocess will not be tracked or terminated by Quickshell.

```javascript
process.startDetached();
```

--------------------------------

### ElapsedTimer Functions

Source: https://quickshell.org/docs/master/types/Quickshell/ElapsedTimer

The ElapsedTimer class offers functions to get the elapsed time in various precisions and to restart the timer.

```APIDOC
## ElapsedTimer: QtObject 
`import Quickshell`
The ElapsedTimer measures time since its last restart, and is useful for determining the time between events that don’t supply it.

## Functions [?]
  * elapsed () : real
Return the number of seconds since the timer was last started or restarted, with nanosecond precision.
  * elapsedMs () : int
Return the number of milliseconds since the timer was last started or restarted.
  * elapsedNs () : int
Return the number of nanoseconds since the timer was last started or restarted.
  * restart () : real
Restart the timer, returning the number of seconds since the timer was last started or restarted, with nanosecond precision.
  * restartMs () : int
Restart the timer, returning the number of milliseconds since the timer was last started or restarted.
  * restartNs () : int
Restart the timer, returning the number of nanoseconds since the timer was last started or restarted.
```

--------------------------------

### Handle Signals with Connections Object

Source: https://quickshell.org/docs/master/guide/qml-language

Illustrates using a `Connections` object to handle signals, which is useful when direct signal handlers are inconvenient or when connecting to singleton signals.

```QML
Item {
  Button {
    id: myButton
    text "click me"
  }

  Connections {
    target: myButton

    function onClicked() {
      // ...
    }
  }
}
```

--------------------------------

### Set WlrLayershell Layer in PanelWindow

Source: https://quickshell.org/docs/master/types/Quickshell.Wayland/WlrLayershell

Configure the shell layer for a PanelWindow when it's backed by WlrLayershell. This example sets the layer to Bottom.

```qml
PanelWindow {
  // When PanelWindow is backed with WlrLayershell this will work
  WlrLayershell.layer: WlrLayer.Bottom
}
```

--------------------------------

### QML Module Import Syntax

Source: https://quickshell.org/docs/master/guide/qml-language

Illustrates the syntax for importing QML modules, specifying version, and using optional namespaces.

```qml
import <Module> [Major.Minor] [as <Namespace>]
```

--------------------------------

### Invoke IPC Handler Functions

Source: https://quickshell.org/docs/master/types/Quickshell.Io/IpcHandler

Examples of calling IPC handler functions remotely using 'qs ipc call' with different arguments.

```Shell
$ qs ipc call rect setColor orange
$ qs ipc call rect setAngle 40.5
$ qs ipc call rect setRadius 30
```

--------------------------------

### Connect to Signals using connect() Method

Source: https://quickshell.org/docs/master/guide/qml-language

Demonstrates how to explicitly connect a signal to a function using the `connect()` method. This is useful for handling events from other components.

```QML
ColumnLayout {
  property int clicks: 0

  function updateText() {
    clicks += 1;
    label.text = `the button has been clicked ${clicks} times!`;
  }

  Button {
    id: button
    text: "click me"
  }

  Text {
    id: label
    text: "the button has not been clicked"
  }

  Component.onCompleted: {
    button.clicked.connect(updateText)
  }
}
```

--------------------------------

### Basic Process Configuration

Source: https://quickshell.org/docs/master/types/Quickshell.Io/Process

Configure a process to run a command and capture its standard output. The onStreamFinished signal can be used to process output as it becomes available.

```javascript
Process {
  running: true
  command: [ "some-command", "arg" ]
  stdout: StdioCollector {
    onStreamFinished: console.log(`line read: ${this.text}`)
  }
}
```

--------------------------------

### Manual Binding with Qt.binding in QML

Source: https://quickshell.org/docs/master/guide/qml-language

Illustrates creating a binding at runtime using Qt.binding. This is useful for dynamically attaching bindings based on user interaction or other conditions.

```qml
Item {
  Text {
    id: boundText
    text: "not bound to anything"
  }

  Button {
    text: "bind the above text"
    onClicked: {
      if (boundText.text == "not bound to anything") {
        text = "press me";
        boundText.text = Qt.binding(() => `button is pressed: ${this.pressed}`);
      }
    }
  }
}
```

--------------------------------

### Use Lambda Callback for Event Handling

Source: https://quickshell.org/docs/master/guide/qml-language

An example of using a lambda expression as a callback function to handle button clicks and update UI elements.

```QML
ColumnLayout {
  property int clicks: 0

  function incrementAndCall(callback) {
    clicks += 1;
    callback(clicks);
  }

  Button {
    text: "click me"
    onClicked: incrementAndCall(clicks => {
        label.text = `the button was clicked ${clicks} time(s)!`;
    })
  }

  Text {
    id: label
    text: "the button has not been clicked"
  }
}
```

--------------------------------

### Initialize ColorQuantizer

Source: https://quickshell.org/docs/master/types/Quickshell/ColorQuantizer

Instantiate ColorQuantizer with source image, depth, and rescale size. Rescaling is recommended for faster processing.

```javascript
ColorQuantizer {
  id: colorQuantizer
  source: Qt.resolvedUrl("./yourImage.png")
  depth: 3 // Will produce 8 colors (2³)
  rescaleSize: 64 // Rescale to 64x64 for faster processing
}
```

--------------------------------

### Generated JSON from JsonAdapter

Source: https://quickshell.org/docs/master/types/Quickshell.Io/JsonAdapter

This JSON structure represents the data managed by the JsonAdapter example, showing how QML properties map to JSON keys and values.

```json
{
   "myStringProperty": "default value",
   "stringList": [
     "default",
     "value"
   ],
   "subObject": {
     "subObjectProperty": "default value"
   },
   "inlineJson": {
     "a": "b"
   }
}
```

--------------------------------

### Reloadable Scope Example

Source: https://quickshell.org/docs/master/types/Quickshell/Scope

Demonstrates the usage of the Scope type within ShellRoot and Variants. Elements defined inside this Scope inherit reloadable behavior.

```javascript
ShellRoot {
  Variants {
    variants: ...

    Scope {
      // everything in here behaves the same as if it was defined
      // directly in `Variants` reload-wise.
    }
  }
}
```

--------------------------------

### Reusable MarginWrapper Component

Source: https://quickshell.org/docs/master/guide/size-position

This example defines a reusable component that utilizes `MarginWrapperManager`, exposing properties like `margin` and `child` for external control and customization.

```qml
Item {
  // A bidirectional binding to manager.margin,
  // where the default value is set.
  property alias margin: manager.margin

  // MarginWrapperManager tries to automatically detect
  // the primary child of the container, but exposing the
  // child property allows us to both access the child
  // externally and override it if automatic detection fails.
  property alias child: manager.margin

  // MarginWrapperManager automatically manages the implicit size
  // of the container and actual size of the child.
  MarginWrapperManager {
    id: manager
    margin: 5 // the default value of margin
  }
}
```

--------------------------------

### Hyprland Properties

Source: https://quickshell.org/docs/master/types/Quickshell.Hyprland/Hyprland

Access read-only properties to get information about the current Hyprland state, such as active toplevels, socket paths, monitors, workspaces, and toplevels.

```APIDOC
## Hyprland Properties

### activeToplevel
- **Description**: Currently active toplevel (might be null).
- **Type**: Toplevel readonly

### eventSocketPath
- **Description**: Path to the event socket (.socket2.sock).
- **Type**: string readonly

### requestSocketPath
- **Description**: Path to the request socket (.socket.sock).
- **Type**: string readonly

### toplevels
- **Description**: All hyprland toplevels.
- **Type**: ObjectModel <Toplevel> readonly

### focusedMonitor
- **Description**: The currently focused hyprland monitor. May be null.
- **Type**: HyprlandMonitor readonly

### monitors
- **Description**: All hyprland monitors.
- **Type**: ObjectModel <HyprlandMonitor> readonly

### focusedWorkspace
- **Description**: The currently focused hyprland workspace. May be null.
- **Type**: HyprlandWorkspace readonly

### workspaces
- **Description**: All hyprland workspaces, sorted by id. Named workspaces have a negative id, and will appear before unnamed workspaces.
- **Type**: ObjectModel <HyprlandWorkspace> readonly
```

--------------------------------

### Execute Desktop Entry Application

Source: https://quickshell.org/docs/master/types/Quickshell/DesktopEntry

This code demonstrates how to execute the application associated with a DesktopEntry object. It is equivalent to calling `Quickshell.execDetached()` with the command and working directory from the DesktopEntry.

```javascript
Quickshell.execDetached({
  command: desktopEntry.command,
  workingDirectory: desktopEntry.workingDirectory,
});
```

--------------------------------

### activate()

Source: https://quickshell.org/docs/master/types/Quickshell.I3/I3Workspace

Activates the workspace, making it the current workspace on its monitor.

```APIDOC
## activate ()

### Description
Activates the workspace. This is equivalent to running `I3.dispatch(`workspace number ${workspace.number}`);`.

### Method
- `activate()`

### Returns
- Type: void
```

--------------------------------

### Define IpcHandler for Rectangle Control

Source: https://quickshell.org/docs/master/types/Quickshell.Io/IpcHandler

This example demonstrates how to create an IpcHandler for a Rectangle object, exposing functions to control its color, angle, and radius, as well as signals for changes.

```QML
FloatingWindow {
  Rectangle {
    id: rect
    anchors.centerIn: parent
    width: 100
    height: 100
    color: "red"
  }

  IpcHandler {
    target: "rect"

    function setColor(color: color): void { rect.color = color; }
    function getColor(): color { return rect.color; }

    function setAngle(angle: real): void { rect.rotation = angle; }
    function getAngle(): real { return rect.rotation; }

    function setRadius(radius: int): void {
      rect.radius = radius;
      this.radiusChanged(radius);
    }

    function getRadius(): int { return rect.radius; }
		signal radiusChanged(newRadius: int);
  }
}
```

--------------------------------

### DesktopEntry.execute()

Source: https://quickshell.org/docs/master/types/Quickshell/DesktopEntry

Executes the application associated with the DesktopEntry.

```APIDOC
## DesktopEntry.execute()

### Description
Run the application. Currently ignores `execString` and `runInTerminal` field codes.
This is equivalent to calling Quickshell.execDetached() with `command` and `workingDirectory` as shown below:
```
Quickshell.execDetached({
  command: desktopEntry.command,
  workingDirectory: desktopEntry.workingDirectory,
});
```

### Method
`execute()`

### Returns
`void`
```

--------------------------------

### Assign Functions to Properties

Source: https://quickshell.org/docs/master/guide/qml-language

Shows how to assign functions to properties, including using traditional function declarations and concise lambda expressions.

```QML
Item {
  // using functions
  function dub(number: int): int { return number * 2; }
  property var operation: dub

  // using lambdas
  property var operation: number => number * 2
}
```

--------------------------------

### startDetached

Source: https://quickshell.org/docs/master/types/Quickshell.Io/Process

Launches an instance of the process detached from Quickshell. The subprocess will not be tracked and will not be killed by Quickshell.

```APIDOC
## startDetached ()

### Description
Launches an instance of the process detached from Quickshell. The subprocess will not be tracked, `process.running` will be false, and the subprocess will not be killed by Quickshell.

### Notes
This function is equivalent to Quickshell.execDetached().
```

--------------------------------

### Using ScriptModel with Unique Object Models

Source: https://quickshell.org/docs/master/types/Quickshell/ScriptModel

Demonstrates how to use ScriptModel with unique object models provided by Quickshell types, such as DesktopEntries.applications.values. Ensure the values provided are unique, as duplicate entries lead to undefined behavior.

```qml
ScriptModel {
  values: DesktopEntries.applications.values.filter(...)
}
```

--------------------------------

### Check Quickshell Version and Features

Source: https://quickshell.org/docs/master/types/Quickshell/Quickshell

Use this to conditionally execute code based on Quickshell version and available features. The feature list is optional.

```javascript
//@ if hasVersion(0, 3, ["feature"])
...
//@ endif
```

--------------------------------

### Create Panel Windows for Each Screen

Source: https://quickshell.org/docs/master/guide/introduction

Use Variants to create PanelWindow instances for each screen detected by Quickshell.screens. The screen data is injected into each component's modelData property.

```qml
import Quickshell
import Quickshell.Io
import QtQuick

Variants {
  model: Quickshell.screens;

  delegate: Component {
    PanelWindow {
      // the screen from the screens list will be injected into this
      // property
      required property var modelData

      // we can then set the window's screen to the injected property
      screen: modelData

      anchors {
        top: true
        left: true
        right: true
      }

      implicitHeight: 30

      Text {
        id: clock
        anchors.centerIn: parent

        Process {
          id: dateProc
          command: ["date"]
          running: true

          stdout: StdioCollector {
            onStreamFinished: clock.text = this.text
          }
        }

        Timer {
          interval: 1000
          running: true
          repeat: true
          onTriggered: dateProc.running = true
        }
      }
    }
  }
}
```

--------------------------------

### Handle CheckBox State Changes

Source: https://quickshell.org/docs/master/guide/qml-language

Use the `on<PropertyName>Changed` signal handler to react to property changes. This example listens for changes in `checkState` and updates a label's text accordingly.

```qml
ColumnLayout {
  CheckBox {
    text: "check me"

    onCheckStateChanged: {
      label.text = labelText(checkState == Qt.Checked);
    }
  }

  Text {
    id: label
    text: labelText(false)
  }

  function labelText(checked): string {
    return `the checkbox is checked: ${checked}`;
  }
}
```

--------------------------------

### Configure SystemClock Precision

Source: https://quickshell.org/docs/master/types/Quickshell/SystemClock

Instantiate SystemClock and set its precision to Seconds. Use Qt.formatDateTime to display the clock's date and time.

```javascript
SystemClock {
  id: clock
  precision: SystemClock.Seconds
}

Text {
  text: Qt.formatDateTime(clock.date, "hh:mm:ss - yyyy-MM-dd")
}
```