When you open a project in Shaper, the screen is divided into several sections, each with a specific purpose. (Refer to the annotated screenshot below for a visual guide.)

[Insert image of the Shaper editor UI, with major sections labeled: Left Sidebar, Layers Panel, Workspace, Properties Panel, Code Panel, Top Bar]

The left sidebar is your project navigator. At the top, you’ll see your Project Name and options to add or switch pages (artboards). Below that, Shaper displays a list of pages/screens in your project. This makes it easy to manage multiple screens (e.g. a Home page, Dashboard page, etc.) in one place. Use the sidebar to switch between pages or to organize your project’s structure.

​
Layers Panel

Just below the page list in the sidebar is the Layers Panel – a hierarchical tree of all elements on the current page. It works like layers in other design tools: every shape (text, image, button, etc.) on your canvas is represented here. You can click on a layer to select that element on the canvas, drag layers to reorder elements (e.g. to bring an element forward or backward), or group elements into containers. The Layers Panel helps you keep track of complex layouts at a glance and select items that might be hidden or overlapped on the canvas.

​
Workspace Canvas

The center of the screen is your Workspace (canvas) – this is where you visually design your UI. It shows the current page or artboard. You can drag shapes onto this canvas, arrange them, and edit text or other content directly. The workspace is WYSIWYG: what you design here is exactly what appears in the actual app UI. You can zoom and pan around to navigate large pages. This is your primary creative area for building interfaces.

​
Properties Panel (Inspector)

On the right side, you’ll find the Properties Panel (inspector). When you select any element on the canvas (or any layer in the Layers Panel), the Properties Panel shows that element’s settings. Here you can adjust visual properties like layout (position, padding, alignment), styling (colors, fonts, borders, shadows), and component-specific options. For example, if you click a text heading, the Properties Panel lets you change its font family, size, color, etc. If you select a container/frame, you’ll see layout settings (like flex or grid options). This panel is where you fine-tune the appearance and behavior of selected elements.

​
Code Panel (Code Editor)

Shaper is a design tool, but it’s also showing you real code. You can toggle open the Code Panel to view and even edit the underlying code of your project. When opened, you’ll see a code editor with your project’s file structure (e.g. React/Next.js files, CSS/Tailwind config). You can inspect the code for the currently selected element or page, and even make edits. Changes you make in the code panel will sync back to the visual design. This is great for advanced tweaks or for developers who want to collaborate directly in Shaper. If you’re not into code, you can ignore this panel – but it’s there to provide transparency and power when you need it.

​
Top Bar

At the very top of the editor is the Top Bar. This contains common actions and settings. On the left, you might find the project menu and Artboard settings (like device size or orientation for your canvas). On the right, you have buttons for Preview mode (to toggle the interactive preview), Undo/Redo, and perhaps an AI Prompt button (to open the AI design assistant). You’ll also see indicators or options for Sync/Publish (connecting to Git or deploying your project). The Top Bar is essentially your toolbar for global controls and switching modes in Shaper.

With these sections in mind, you should feel comfortable navigating Shaper’s interface. Each part of the UI is designed to streamline your workflow – from laying out shapes on the canvas, to adjusting details in the inspector, to reviewing the code behind your design.

Next Step: Now that you know your way around, let’s build something! Proceed to the Sample Project: Build a Landing Page to apply these tools in a real-world design.