# Keyboard Shortcuts (/editor/hotkeys)



Master these keyboard shortcuts to speed up your workflow and edit more efficiently in the LVGL Pro Editor.

Auto-Completion [#auto-completion]

Activate auto-completion while the cursor is anywhere within the Editor Pane:

<div className="not-prose my-6">
  <table className="w-full">
    <thead>
      <tr className="border-b border-fd-border">
        <th className="text-left py-3 px-4 font-medium">
          Shortcut
        </th>

        <th className="text-left py-3 px-4 font-medium">
          Action
        </th>
      </tr>
    </thead>

    <tbody>
      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              Space
            </Kbd>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Pop-up auto-completion list
        </td>
      </tr>
    </tbody>
  </table>
</div>

Value Modification [#value-modification]

Adjust attribute values with live preview updates while the cursor is within an attribute's value:

<div className="not-prose my-6">
  <table className="w-full">
    <thead>
      <tr className="border-b border-fd-border">
        <th className="text-left py-3 px-4 font-medium">
          Shortcut
        </th>

        <th className="text-left py-3 px-4 font-medium">
          Action
        </th>
      </tr>
    </thead>

    <tbody>
      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <div className="flex items-center gap-2">
            <KbdGroup>
              <Kbd>
                Ctrl
              </Kbd>

              <span className="text-fd-muted-foreground">
                \+
              </span>

              <Kbd>
                ↑
              </Kbd>
            </KbdGroup>

            <span className="text-fd-muted-foreground">
              /
            </span>

            <KbdGroup>
              <Kbd>
                Ctrl
              </Kbd>

              <span className="text-fd-muted-foreground">
                \+
              </span>

              <Kbd>
                ↓
              </Kbd>
            </KbdGroup>
          </div>
        </td>

        <td className="py-3 px-4">
          Modify value by 1
        </td>
      </tr>

      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <div className="flex items-center gap-2">
            <KbdGroup>
              <Kbd>
                Ctrl
              </Kbd>

              <span className="text-fd-muted-foreground">
                \+
              </span>

              <Kbd>
                Shift
              </Kbd>

              <span className="text-fd-muted-foreground">
                \+
              </span>

              <Kbd>
                ↑
              </Kbd>
            </KbdGroup>

            <span className="text-fd-muted-foreground">
              /
            </span>

            <KbdGroup>
              <Kbd>
                Ctrl
              </Kbd>

              <span className="text-fd-muted-foreground">
                \+
              </span>

              <Kbd>
                Shift
              </Kbd>

              <span className="text-fd-muted-foreground">
                \+
              </span>

              <Kbd>
                ↓
              </Kbd>
            </KbdGroup>
          </div>
        </td>

        <td className="py-3 px-4">
          Modify value by 10
        </td>
      </tr>
    </tbody>
  </table>
</div>

Export and Build [#export-and-build]

<div className="not-prose my-6">
  <table className="w-full">
    <thead>
      <tr className="border-b border-fd-border">
        <th className="text-left py-3 px-4 font-medium">
          Shortcut
        </th>

        <th className="text-left py-3 px-4 font-medium">
          Action
        </th>
      </tr>
    </thead>

    <tbody>
      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              E
            </Kbd>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Export code only
        </td>
      </tr>

      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              B
            </Kbd>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Export code and recompile
        </td>
      </tr>

      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              Shift
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              B
            </Kbd>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Clean and rebuild
        </td>
      </tr>
    </tbody>
  </table>
</div>

Preview Pane [#preview-pane]

Navigate and interact with the preview pane using these shortcuts:

Zoom Controls [#zoom-controls]

<div className="not-prose my-6">
  <table className="w-full">
    <thead>
      <tr className="border-b border-fd-border">
        <th className="text-left py-3 px-4 font-medium">
          Shortcut
        </th>

        <th className="text-left py-3 px-4 font-medium">
          Action
        </th>
      </tr>
    </thead>

    <tbody>
      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <span>
              Mouse Wheel
            </span>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Zoom in and out
        </td>
      </tr>

      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              \+
            </Kbd>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Zoom in
        </td>
      </tr>

      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              \-
            </Kbd>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Zoom out
        </td>
      </tr>

      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              0
            </Kbd>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Reset zoom
        </td>
      </tr>

      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <KbdGroup>
            <Kbd>
              Ctrl
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              Shift
            </Kbd>

            <span className="text-fd-muted-foreground">
              \+
            </span>

            <Kbd>
              0
            </Kbd>
          </KbdGroup>
        </td>

        <td className="py-3 px-4">
          Fit to screen
        </td>
      </tr>
    </tbody>
  </table>
</div>

Navigation [#navigation]

<div className="not-prose my-6">
  <table className="w-full">
    <thead>
      <tr className="border-b border-fd-border">
        <th className="text-left py-3 px-4 font-medium">
          Shortcut
        </th>

        <th className="text-left py-3 px-4 font-medium">
          Action
        </th>
      </tr>
    </thead>

    <tbody>
      <tr className="border-b border-fd-border/50">
        <td className="py-3 px-4">
          <span className="font-medium">
            Two-Fingered Scroll
          </span>
        </td>

        <td className="py-3 px-4">
          Pan preview
        </td>
      </tr>
    </tbody>
  </table>
</div>

Advanced Ctrl Key Features [#advanced-ctrl-key-features]

Pressing the <Kbd>Ctrl</Kbd> key while hovering over the preview pane enables additional functionality:

* Visualize bounding box, padding, margins and click area
* Check size and position by dragging
* Perform measurements
* Double click to jump to the XML file
* Single click to change editor focus to the matching XML element