Search docs/

Designer Overview

The Designer is the powerhouse of Studio, offering a drag-and-drop page builder for pages and components, with a code-behind editor for the template, styles, and scripts (TypeScript)

Introduction

With the Designer, developers can:

  • Drag and drop to build pages and components
  • Select from the entire library of Ionic elements for drag-and-drop and code editing.
  • Switch between visual and code editing for pages and components
  • View and work with most supported Ionic element properties, saving a trip checking the Documentation
Designer Mode

Pages and Components

In the Designer, pages and components work directly off of the files powering them (TypeScript, HTML, CSS).

When first loaded, the Designer index is shown. This index lsits the pages and custom components that Studio detected in the app. Components detected can be seen by switching to the components tab.

Studio finds pages and components by scanning your project looking for Component source files, so works on a variety of project file layouts.

Since the difference between pages and components is conceptual, Ionic Studio relies on convention to differentiate them. If there are pages missing, make sure each page follows the convention Ionic Studio is expecting:

The files that represent each page must have the proper suffixes (e.g. .page.ts, .page.html, .page.scss). See the Angular style guide for additional information about naming conventions.

Page Index

Switching to the component section on the Designer index reveals all the components found in the app.

Component Index

See Adding Pages and Components to create new pages and components.

Adding Pages and Components

To add pages or components to an app, click the New button in the top right of the page index.

New Feature Button

When adding a component (rather than a page), Studio will prompt for the name and a page in which to register it.

New Component Modal

This adds the component as a import in the NgModule of the selected page, which allows it to be used in that page.

The same code changes are necessary to use the component in other pages. See this FAQ for details.

Drag & Drop

The Designer offers a drag & drop canvas for quickly adding new elements and rearranging existing elements.

Selecting Elements

To select an element, click on it in the canvas. To select a child element, double click on its parent. Continue to double click to select deeper child elements and to edit text.

To enable fine-selection, which selects the deepest child under the mouse cursor, hold down the Ctrl key (or Command for macOS) and hover over an element.

To exit the current selection, use the Esc key.

To select any element under the cursor, right click and choose an element from the Select Element dropdown:

Selecting elements

To select any element in the current document, access the element tree and click on the element to select:

Editing Templates

Adding New Elements

To add new elements to a page or component, drag and drop a new element from the Elements list, or use right click and "Quick Add" to add context-specific elements easily.

Add Element Menu

Elements may also be dragged into the HTML for a page or component, and will result in a new code snippet being inserted at the cursor position.

Quick Adding New Elements

Certain elements support quickly adding child elements by right-clicking and selecting an element in the Quick Add menu. Some components that support quickly adding new elements include List, List Item, Grid, Segment Button, and more.

Quick Add Element Menu

Rearranging Existing Elements

To rearrange existing elements in the canvas, click and hold on it, then drag it into place.

Remember, it is also possible to drag and drop code selections in the code editor.

Properties Panel

When an element is selected in the Designer canvas, the properties panel will update to reflect the selected element.

Properties Panel

In the properties panel, the properties that can be modified are listed.

For Ionic components, the properties panel contains a link to the component's documentation at the bottom.

Unfortunately, the properties panel does not show properties for custom components in your app, but this is a feature we'll be adding!

Editor View

The HTML, CSS, and JS (TypeScript) for a page or company can be edited by switching to the Editor View:

Editor View

Template Editing

Each page or component has an HTML template that makes up its structure. Template editing makes it easy to make quick edits to the template, such as changing text or dragging in new element code snippets from the Elements list.

Editor View

Styles Editing

The Styles editor contains the CSS (Sass) for that page or component.

Any changes to the styles are reflected in the canvas when saved. The styles in this mode are only applicable to the current page or component.

Editor View

Scripts Editing

The Scripts editor is for making changes to the controller, or logic, behind a page or component. This editor is used for making quick changes to logic for the page or component. For more complicated changes we recommend opening the project in a full-fledged code editor.

Editor View

Troubleshooting the Canvas

If the canvas gets into an inconsistent or incorrect state, click the reload icon from the canvas utility bar to cause the canvas to reload its current contents:

Editing Scripts