diff --git a/docs.json b/docs.json
index ac63374c..1fad04f7 100644
--- a/docs.json
+++ b/docs.json
@@ -49,13 +49,14 @@
"group": "Interface Overview",
"pages": [
"editor/interface-overview/overview",
+ "editor/interface-overview/selection-and-navigation",
"editor/interface-overview/toolbar",
"editor/interface-overview/hierarchy",
"editor/tagging",
"editor/interface-overview/inspector",
"editor/interface-overview/stage",
- "editor/keyboard-shortcuts",
- "editor/fundamentals/design-vs-animate-mode"
+ "editor/fundamentals/design-vs-animate-mode",
+ "editor/keyboard-shortcuts"
]
}
]
@@ -94,7 +95,6 @@
"group": "Hierarchical Relationships",
"pages": [
"editor/fundamentals/groups",
- "editor/fundamentals/selecting-and-navigating-groups",
"editor/manipulating-shapes/solos",
"editor/fundamentals/transform-spaces",
"editor/fundamentals/freeze-and-origin",
@@ -1225,6 +1225,10 @@
"source": "/account-admin/workspaces/workspace-faqs",
"destination": "/account-admin/workspaces/managing-workspaces#faqs"
},
+ {
+ "source": "/editor/fundamentals/selecting-and-navigating-groups",
+ "destination": "/editor/interface-overview/selection-and-navigation"
+ },
{
"source": "/home/account-admin/workspaces/workspace-status",
"destination": "/account-admin/workspaces/managing-workspaces"
diff --git a/editor/fundamentals/edit-vertices.mdx b/editor/fundamentals/edit-vertices.mdx
index 5f45756d..09d537c0 100644
--- a/editor/fundamentals/edit-vertices.mdx
+++ b/editor/fundamentals/edit-vertices.mdx
@@ -15,11 +15,9 @@ To enter Edit Vertices mode, either select the shape and hit enter twice or sele
After activating Edit Vertices mode, you can select any vertex, reposition it, and edit the bezier handles.
-### Deep Selection
-
-You may want to select and edit a specific path when dealing with a group of shapes. You can either find that path in the Hierarchy or you can use Deep Selection to select it directly on the Stage.
-
-To select a path within a group on the stage, hold `⌘` (Mac) or `ctrl` (Windows) and click the target path. Alternatively, you can double-click on the path you want to select.
+
+ Use [Deep Selection](/editor/interface-overview/selection-and-navigation#deep-select) to select a specific path within a shape.
+
### Path Options
diff --git a/editor/fundamentals/groups.mdx b/editor/fundamentals/groups.mdx
index 5ac8ca53..33f05748 100644
--- a/editor/fundamentals/groups.mdx
+++ b/editor/fundamentals/groups.mdx
@@ -19,11 +19,13 @@ The Style property of a group can be set to Group or Target.
### Group
-Group is the default behavior, which behaves as described in the [Selecting and Navigating Groups](/editor/fundamentals/selecting-and-navigating-groups).
+Group is the default behavior, which behaves as described in the [Selecting and Navigating Groups](/editor/interface-overview/selection-and-navigation).
### Target
-The Target option draws a different icon on the Stage that is always visible, regardless of whether the group has children (usually a group only displays an icon if it is empty). When a group displays as a Target, it also disables the functionality described in [Selecting and Navigating Groups](/editor/fundamentals/selecting-and-navigating-groups) section. This means you can immediately click through to any child of the group (no need to double-click, enter/esc, or Deep Select).
+The Target option draws a different icon on the Stage that is always visible, regardless of whether the group has children (usually a group only displays an icon if it is empty).
+
+Targets are directly selectable on the stage. You don't need to use [Deep Select](/editor/interface-overview/selection-and-navigation#deep-select) to select them.
diff --git a/editor/fundamentals/selecting-and-navigating-groups.mdx b/editor/fundamentals/selecting-and-navigating-groups.mdx
deleted file mode 100644
index 03b474a8..00000000
--- a/editor/fundamentals/selecting-and-navigating-groups.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: "Selecting and Navigating Groups"
----
-
-## Double-click
-
-Click on a group on the [Stage](/editor/interface-overview/stage) to select it. To select an object in a group, double-click on the object you want to select. This takes you down one level in the hierarchy and allows you to select any object on that level.
-
-
-
-You can continue to double-click on other nested groups and shapes to navigate down the [Hierarchy](/editor/interface-overview/hierarchy).
-
-
-
-## Enter and Esc shortcuts
-
-Use the `Enter` key to navigate down a level in the Hierarchy to the selected object's child.
-
-
-
-Use the `Esc` key to quickly navigate up the Hierarchy to select the object's parent.
-
-## Deep Select
-
-Hold `⌘` in macOS or `Ctrl` in Windows, click directly on a shape to select it, no matter where you are in the Hierarchy. This allows you to click through all groups and directly select a shape.
-
-
\ No newline at end of file
diff --git a/editor/interface-overview/selection-and-navigation.mdx b/editor/interface-overview/selection-and-navigation.mdx
new file mode 100644
index 00000000..bd11ebf6
--- /dev/null
+++ b/editor/interface-overview/selection-and-navigation.mdx
@@ -0,0 +1,90 @@
+---
+title: "Selection and Navigation"
+description: "Select objects, move through nested groups, and navigate the stage."
+---
+
+import { YouTube } from '/snippets/youtube.mdx'
+
+Use selection and navigation controls to choose objects, move through nested groups, and move around the stage.
+
+
+ For a complete list of shortcuts, see [Keyboard Shortcuts](/editor/keyboard-shortcuts).
+
+
+## Selecting Objects
+
+
+
+Click an object to select it. To select multiple objects, drag over them to create a marquee selection.
+
+Hold `Shift` while clicking or dragging to add objects to the current selection or remove selected objects.
+
+### Select Objects Inside Groups
+
+To select an object inside a group, double-click the object. This moves you one level down in the hierarchy, so you can select objects inside that group.
+
+
+
+### Deep Select
+
+To select an object inside nested groups, hold `⌘` on macOS or `Ctrl` on Windows, then click the object.
+
+Deep select lets you select an object directly, even when it is inside multiple groups.
+
+
+ [Targets](/editor/fundamentals/groups#target) are directly selectable on the stage. You don't need to use **Deep Select** to select them.
+
+
+
+
+### Select Behind
+
+When you hover over an object on the stage, Rive outlines the object that will be selected if you click.
+
+If multiple objects overlap, press `Alt` to cycle through objects under the cursor. When the object you want is outlined, click to select it.
+
+
+
+### Moving Up and Down the Hierarchy
+
+Use `Enter` and `Esc` to move through nested objects in the hierarchy.
+
+* Press `Enter` to move down into the selected group and select its first child.
+* Press `Esc` to move up and select the parent of the current selection.
+
+
+
+## Navigating the Stage
+
+### Pan
+
+To pan the stage, right-click and drag.
+
+You can also hold `Spacebar` to temporarily switch to the Pan tool, then click and drag to move around the stage.
+
+If you're using a trackpad, scroll left or right to pan horizontally.
+
+
+
+### Zoom
+
+To zoom in or out, place your cursor over the stage, then hold `⌘` on macOS or `Ctrl` on Windows and scroll.
+
+
+You can also use keyboard shortcuts:
+
+* Press `+` to zoom in.
+* Press `-` to zoom out.
+* Press `⌘` + `0` on macOS or `Ctrl` + `0` on Windows to return to 100%.
+
+### Fit Selection
+
+Press `F` to fit the current selection in the viewable stage area.
+
+
+
+If an object is selected, Rive fits that object in view. If an artboard is selected, Rive fits the artboard in view.
+
+
+ If you lose track of an artboard or object on the stage, select it in the hierarchy and press `F` to fit it in view.
+
diff --git a/editor/interface-overview/stage.mdx b/editor/interface-overview/stage.mdx
index e101cacd..4fbbb6c8 100644
--- a/editor/interface-overview/stage.mdx
+++ b/editor/interface-overview/stage.mdx
@@ -5,54 +5,25 @@ description: "The Stage is an infinite canvas where you can place artboards cont
import { YouTube } from '/snippets/youtube.mdx'
-
+
-## Selection
+[Artboards](/editor/fundamentals/artboards) live on the stage. You can pan and zoom around the stage, select objects, and use guides or rulers to help position elements.
-Select an object by simply clicking on it, or click and drag over a number of shapes to perform a marquee selection. Hold the `Shift` modifier key to add or remove from an existing selection (by either single clicking or marqueeing).
+
+ To learn how to navigate and select items on the stage, see [Keyboard Shortcuts](/editor/keyboard-shortcuts).
+
-### Double-click
+### View Options menu
-To select an object in a group, double-click on the object you want to select. This takes you down one level in the hierarchy and allows you to select any object on that level.
+
-### Deep select
-
-In order to select an object within a group, hold `⌘` (macOS) or `Ctrl` (Windows) and click directly on it. This is a quick way to cut through multiple layers of nested groups and directly select a shape. This can be a very fast way to navigate a complex file, especially when used together with the Select behind technique and the Enter and Esc shortcuts described below.
-
-### Select behind
-
-When you hover over an object on the stage, Rive draws an outline around it. This is a hint to let you know that if you click, this object will be selected. Sometimes multiple objects can overlap one another, making it difficult to select the exact one you want. In this case, press `Alt` to cycle to the next object under your cursor. You can continue to press `Alt` until the object you want is outlined. Now click to select it.
-
-### Enter and Esc shortcuts
-
-Use the `Enter` key to quickly navigate down the Hierarchy. If you have a group selected, this allows you to quickly select the first child.
-
-Use the `Esc` key to quickly navigate up the Hierarchy. This allows you to quickly select the parent of your current selection.
-
-## Navigating
-
-
-
-### Panning
-
-
-
-To pan the Stage, right-click and drag your mouse. If you have a trackpad, scroll left and right. Alternatively, hold `Spacebar` to trigger the Pan Tool. With the Pan Tool enabled, click and drag to move to your desired point on the Stage.
-
-### Zooming
-
-
-
-With your cursor positioned over the Stage, hold `⌘` / `Ctrl` and scroll your mouse or trackpad to zoom in and out. Alternatively, use the `+` / `-` keys to zoom between preset points. You can quickly revert back to 100% with `⌘` / `Ctrl` and `0`.
-
-### Fit
-
-
-
-Tap `F` to simultaneously zoom and position your active artboard to fit within the viewable Stage area. Note that if you have an object within the Hierarchy selected this action will be performed on the object as opposed to the artboard.
-
-> There are a few scenarios where you may have "lost" an artboard, while still seeing the hierarchy. This typically happens when the position of an artboard is accidentally keyed or the zoom level is too far out. Using the `F` shortcut will help you fix the issue by Filling the stage with the selected object or artboard.
+The View Options menu controls what appears on the stage while you work. Use it to adjust zoom, snapping, guides, and visual overlays for animation and interaction tools.
+- **Zoom and snapping:** adjust the stage zoom level, enable snapping, or snap objects to pixels
+- **User Cursors:** show or hide other users' cursors
+- **Tool overlays:** show or hide gizmos, bones, targets, motion paths, joysticks, events, layouts, and text modifier ranges
+- **Show Final Playback:** show the final playback state while editing
+- **Rulers and guides:** show rulers, lock guides, or clear guides from the stag
## Rulers and Guides
diff --git a/editor/interface-overview/toolbar.mdx b/editor/interface-overview/toolbar.mdx
index 67c8d1b9..40ab605c 100644
--- a/editor/interface-overview/toolbar.mdx
+++ b/editor/interface-overview/toolbar.mdx
@@ -137,15 +137,12 @@ Learn about Artboards, Components, Layouts and Groups.
-
## Vector Tools menu
Design in Rive using the [Pen Tool](/editor/fundamentals/pen-tool-overview) and [procedural shapes](/editor/fundamentals/procedural-shapes). The Vector Tools menu houses all of the tools you'll need to create vector artwork.
-
-
## Bones menu
Access the [Bone](/editor/manipulating-shapes/bones) and Weight tool (when binding).
@@ -167,82 +164,12 @@ The Events and Joysticks menu lets you add new Events and Joysticks to your File
-## View Options menu
-
-The View options menu allows to control many different view options on the Rive Stage.
-
-
-
-**Zoom**
-
-This option allows you both view and change the zoom level of the Rive editor.
-
-**Snapping**
-
-The Snapping option allows the Rive editor to help you contextually snap and align objects to one another. This can be disabled by either toggling the option off, or by holding CMD or CTRL while dragging an object.
-
-**Snap to pixel**
-
-Snap to pixel forces the Rive editor to snap an objects position to the nearest half pixel. When disabled, objects can be placed on any fraction of a pixel.
-
-**User Cursors**
-
-When multiple users are present in a file, we are able to visualize their mouse cursor. By disabling this option, we can hide other user cursors in our file.
-
-**Gizmo**
-
-The Gizmo is the visual object on the screen which lets us change the position, scale, or rotation of an object. By disabling this option, the Gizmo will no longer appear when selecting an object.
-
-**Bones**
-
-Disabling the Bones, the editor will hide any bones on the stage.
-
-**Targets**
-
-Disabling Targets will hide any Groups set to Target mode.
-
-**Motion Paths**
-
-When an objects X or Y property is selected on the Timeline a visualization of how the object will move over time appears as a motion path. We can disable this visualization by toggling off this option.
-
-**Joysticks**
-
-Disabling Joysticks will hide any Joysticks on the Stage.
-
-**Events**
-
-Disabling this option will hide any Events on the Stage.
-
-**Layouts**
-
-Layouts inherently have a skeleton visualization on the Stage to see the bounds of a layout container. Disabling this option will hide all visualizations of the layouts on the Stage.
-
-**Layout Animations**
-
-Layouts can automatically animate when various properties of a layout container change. Disabling this option will disable playback of all layout animations.
-
-**Modifier Range**
-
-This option visualizes a Text Modifiers Range when it is within view of the text object. Disabling this option hides the visualization.
-
-**Modifier Range Values**
-
-The Modifier Range Values visualize how the range is applied using little pips below each letter, word, or line. Disabling this option hides the visualization.
-
-**Show Final Playback**
-
-Show Final Playback automatically hides all elements and visualizations that would normally be hidden at runtime. For example, Bones and are not visible at runtime, so with this option enabled, the bones would automatically be hidden when a State Machine or Timeline plays. Disabling this option keeps things like bones visible during playback in the editor. Note that this has no effect at runtime.
-
- 
-
-## Export Button
-
+## Publish Button
The Export button allows you to create [Embed URLs](/editor/embed-urls/overview), [publish a file to the Marketplace](/community/marketplace-overview#marketplace-overview), [download a `.riv` file](/editor/exporting/exporting-for-runtime), and [publish a library](/editor/libraries).
-
## Mode toggle
The mode toggle allows you to switch between Design and Animate mode. Press `Tab` to quickly switch modes.
diff --git a/images/editor/interface-overview/fit-selection.gif b/images/editor/interface-overview/fit-selection.gif
new file mode 100644
index 00000000..33e2ebe2
Binary files /dev/null and b/images/editor/interface-overview/fit-selection.gif differ
diff --git a/images/editor/interface-overview/pan.gif b/images/editor/interface-overview/pan.gif
new file mode 100644
index 00000000..da5ebbe5
Binary files /dev/null and b/images/editor/interface-overview/pan.gif differ
diff --git a/images/editor/interface-overview/select-behind.gif b/images/editor/interface-overview/select-behind.gif
new file mode 100644
index 00000000..d3e03b8a
Binary files /dev/null and b/images/editor/interface-overview/select-behind.gif differ
diff --git a/images/editor/interface-overview/zoom.gif b/images/editor/interface-overview/zoom.gif
new file mode 100644
index 00000000..0275add4
Binary files /dev/null and b/images/editor/interface-overview/zoom.gif differ
diff --git a/images/interface/stage-view-options.png b/images/interface/stage-view-options.png
new file mode 100644
index 00000000..660c1ad7
Binary files /dev/null and b/images/interface/stage-view-options.png differ
diff --git a/images/interface/stage.png b/images/interface/stage.png
new file mode 100644
index 00000000..67b9288e
Binary files /dev/null and b/images/interface/stage.png differ