Shaper projects can consist of multiple pages (or screens) – similar to an app with multiple routes or a website with multiple screens. Managing pages and layers effectively will help you stay organized as your project grows. Pages Panel: On the left sidebar, you have a Pages panel where you can create, rename, or delete pages. Each page in Shaper typically corresponds to a distinct screen or route in your app (and in a Next.js codebase, each page might map to a file in the pages/ directory or a route in the app). For example, you might have pages like “Home”, “Dashboard”, “Settings”, or custom pages for different user flows. Click the “+” to add a new page. You can group pages into folders too (useful for organizing by feature or app section). Switching between pages is just a click away – and when you select a page, the canvas and layer tree update to show that page’s content. Each page has its own independent layer hierarchy. Layer Tree: Directly under the Pages list (or in a separate tab next to it) is the Layer Tree, which shows all elements on the currently selected page in a hierarchical tree format. This is like the DOM tree for your design:
  • Hierarchy: Parent-child relationships are indicated by indentation. For instance, if a Text is inside a Container, the Text will be indented under that Container in the tree.
  • Reordering: You can drag layers up and down to reorder elements at the same level, or drag into/out of containers to move elements between sections. This provides precise control, especially if dragging on the canvas is tricky for nested elements.
  • Visibility and Locking: Each layer may have icons to toggle visibility (eye icon) or lock its position (lock icon). Hiding a layer is useful to focus on other parts of the design without deleting elements. Locking prevents accidental moves/edits on critical layers (like a background or layout grid).
  • Naming Layers: Double-click the layer name to rename an element or component. It’s good practice to name key layers (e.g., “Header”, “Footer”, “Hero Section”) for clarity. These names can also reflect in the code (as component names or semantic tags) for developers’ ease.
  • Breadcrumb Navigation: When an element is selected, Shaper often shows a breadcrumb (e.g., Page > Section > Container > Button) either atop the canvas or in the property panel. This helps you understand where you are in the hierarchy and you can click on parent levels to select them quickly.
By keeping pages separate and layers well-structured, you maintain a clean project. Remember that because Shaper is generating real code, a well-organized layer tree translates to clean, manageable code structure too. (Screenshot: The left sidebar showing the Pages list and a opened Layer Tree for one page, with nested elements like header, containers, and elements.)