# Outliner
The Outliner (Layer Panel) displays your scene hierarchy and provides quick access to layer controls. Use it to manage layers, organize complex projects, and navigate your scene structure.

## Outliner overview

The Outliner shows all layers in your scene as a hierarchical tree structure.

<Image src="https://assets.docs.lottiefiles.com/static/4d8b47aea3-640.webp" alt="Outliner" caption="Outliner" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/4d8b47aea3-640.webp 640w, https://assets.docs.lottiefiles.com/static/4d8b47aea3-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/4d8b47aea3-1920.webp 1920w" width="2560" height="1440" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAiUlEQVR4nFWNsQrCMBiE8xaCgpLSSIjWWhwEp0YH0T/pUqppxaU1ff+100ni5HjH990x235wrd8o7zVOF8JR32K2rQe5YWJV51FSg3STY7WWmC05tHkg9MYNYFU3QpsGXCrIXYE5T3G2P4CefQB8NBaJgCoOSFQWhb+FcCGyPcQ2j2BceI0g109fUL5IOmps9h8AAAAASUVORK5CYII=" />

**Layer row components:**

<List type="bullet">
  <ListItem>Collapse arrow (expand/collapse child layers)</ListItem>
  <ListItem>Layer name (editable text)</ListItem>
  <ListItem>Layer actions (visibility, lock, focus)</ListItem>
</List>

## Hierarchy display

The Outliner shows layer organization as a tree with indentation showing nesting level. Tree lines connect parents and children.

**Expanding and collapsing:**

<List type="bullet">
  <ListItem>Click the arrow next to the layer name to expand/collapse</ListItem>
  <ListItem>Reveals child layers or shapes</ListItem>
  <ListItem>Keyboard: Arrow keys to expand/collapse selected layer</ListItem>
</List>

## Layer selection

**Single selection:** Click layer name or row

**Multi-selection:**

<List type="bullet">
  <ListItem>**Cmd/Ctrl + Click** — toggle layer in selection</ListItem>
  <ListItem>**Shift + Click** — range select between layers</ListItem>
  <ListItem>**Cmd/Ctrl + A** — select all layers</ListItem>
</List>

**Selection states:**

<List type="bullet">
  <ListItem>Primary selection (brighter highlight)</ListItem>
  <ListItem>Secondary selection (darker, indicates child layers selected)</ListItem>
</List>

<Image src="https://assets.docs.lottiefiles.com/static/f9298ce0e1-640.webp" alt="Selected Layer" caption="Selected Layer" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/f9298ce0e1-640.webp 640w, https://assets.docs.lottiefiles.com/static/f9298ce0e1-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/f9298ce0e1-1920.webp 1920w" width="2560" height="1440" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAiElEQVR4nD3MzQqCQABFYZ+iVUbEQE1JiAlSEDm16GfUjahj0UbT99+6OtFQLe/l4zhp/eKcP4lvOduTJlJXu9O6Q5t2cLJ7R6wLxHLNRMwZuVNUUvL5E9NigUoKZtJD+htcseCYVhboqvmBklW4JzpckMHuD76F3gLhBUg/ZGwLJdmjR5tmeANwCkjjKF6mYQAAAABJRU5ErkJggg==" />

## Layer visibility

**Eye icon:**

<List type="bullet">
  <ListItem>Eye open = visible, eye closed = hidden</ListItem>
  <ListItem>Hidden layers don't render on canvas</ListItem>
</List>

<Image src="https://assets.docs.lottiefiles.com/static/763dd5f2c7-640.webp" alt="Layer Hide" caption="Layer Hide" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/763dd5f2c7-640.webp 640w, https://assets.docs.lottiefiles.com/static/763dd5f2c7-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/763dd5f2c7-1920.webp 1920w" width="2560" height="1440" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAiUlEQVR4nD2MPQ+CMBiE+zc0MakpitYUdXVCITHaj4UApcZFLP9/ZTrzdnC44S7PPcwOX9ybN8png0utU6jbIUL7cWYuRFxNCyELZFKhfhhUrocNEcaPYC5MCeC5xK44Y3M4onIedNT9hwAydFhlObbqhAUXqdP+N5SmxXqvErDkAjfbwb0mMsw/m31Iy0fj24EAAAAASUVORK5CYII=" />

## Layer locking

**Lock icon:**

<List type="bullet">
  <ListItem>Lock icon = locked, unlock icon = unlocked</ListItem>
  <ListItem>Locked layers can't be selected on canvas</ListItem>
  <ListItem>Prevents accidental changes</ListItem>
</List>

<Image src="https://assets.docs.lottiefiles.com/static/5bff1ed5a8-640.webp" alt="Layer Lock" caption="Layer Lock" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/5bff1ed5a8-640.webp 640w, https://assets.docs.lottiefiles.com/static/5bff1ed5a8-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/5bff1ed5a8-1920.webp 1920w" width="2560" height="1440" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAiUlEQVR4nD2MPQ+CMBiE+zc0MakpitYUdXVCITHaj4UApcZFLP9/ZTrzdnC44S7PPcwOX9ybN8png0utU6jbIUL7cWYuRFxNCyELZFKhfhhUrocNEcaPYC5MCeC5xK44Y3M4onIedNT9hwAydFhlObbqhAUXqdP+N5SmxXqvErDkAjfbwb0mMsw/m31Iy0fj24EAAAAASUVORK5CYII=" />

## Layer naming

**Renaming layers:**

1. Select a layer and press **Enter**
2. Type a new name (max 128 characters)
3. Press **Enter** to confirm, **Escape** to cancel

<Image src="https://assets.docs.lottiefiles.com/static/0db8411ef7-640.webp" alt="Layer Rename" caption="Layer Rename" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/0db8411ef7-640.webp 640w, https://assets.docs.lottiefiles.com/static/0db8411ef7-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/0db8411ef7-1920.webp 1920w" width="2560" height="1440" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAhklEQVR4nF3MPwuCQABAcb9EDQmheHBEh9YWtnQ2RN2di/g3WjL9/qvTCx0aGh/8eJ5rP9yKF5dHQXo1nPR9adcOmKafvLwb0aZEqAO+3LEKIjJXkXcDtun5gVAlROmZtYrJXL0AU79nMKBtyVZIpErwA0Fm/w+2JJB7ZHxkEwr0DJ7jfJi+W1BIQMoQz7YAAAAASUVORK5CYII=" />

## Layer reordering

**Drag and drop:**

1. Click and hold layer name
2. Drag up or down in list
3. Blue line indicates drop position
4. Release to drop at new position

<List type="bullet">
  <ListItem>Lower draw order = rendered on top</ListItem>
</List>
