Navigating the Pagedraw editor

The Pagedraw editor comprises an upper toolbar, a left layer list, a large central canvas and a right sidebar, also called inspector:

The buttons in the upper toolbar access some important functionalities, listed below:

  1. Add: allows you to add new artboards, multistate groups, inputs (such as texts or images), buttons, check boxes, among others;
  2. Shortcuts: shows the list of keyboard shortcuts that can be used to save time during production;
  3. Documentation: redirects to the Tutorial section, that can also be accessed through the link https://documentation.pagedraw.io/;
  4. Turn into Component: turns the selected features into components;
  5. Import Sketch: imports the selected files from Sketch to Pagedraw;
  6. Export code: lets you have access to and manually export the prepared codes in JSX and CSS;
  7. Zoom in: allows you to zoom into the screen;
  8. Zoom out: allows you to zoom out of the screen;
  9. No snapping: turns on and off the snap grids;
  10. Hide layers: hides/shows the left layer.

The Block List (Left Sidebar)

The left sidebar in the Pagedraw editor lists all the blocks in the doc. It is a tree blocks parent-children (see [parents] (parents)).

Expanding a layer

When you toggle the arrow, you show/hide the child blocks under it. By default, children are hidden in order to minimize clutter. When you select a block in the canvas, the Block List will expand all the parents of the selected block so you can see its’ hierarchy.

Selecting a block

Clicking on a block’s name in the left sidebar selects the block. The blocks selected in the canvas are the same blocks selected in the Block List on the left and in the Inspector on the right.

Locking a block

(add image of the lock icon) Clicking on the lock icon at the right side of the block’s name locks/unlocks the selected block for any further modifications.

Renaming a block

You can rename blocks from the right sidebar. It’s easy to see all the names all in one place on the left sidebar and double click to rename them .. It goes both ways.

The Inspector (right sidebar)

The right sidebar in the Pagedraw editor contains the tools and configuration options to be used during a project development. This sidebar is divided into two main tabs: DRAW and CODE. The DRAW tab mainly comprises the configuration options per individual blocks, such as text boxes, images, rectangles, etc., while the CODE tab comprises the configuration options per selected artboard.

Below is a view of the first portion of the right sidebar. This first portion corresponds to basic block-related adjustments, such as name, type, position and size, and displays independently of the nature of the block selected:

Everything else in the right sidebar depends on the type of the selected block. If the block is of one the types specified below, the sidebar will present the following configuration options:

Artboard

Rectangle

Text**

Text input**

Image**