Search docs/

Compose Overview

Compose is the powerhouse of Ionic app development, offering a powerful side-by-side coupling of component code and an interactive canvas for building components.

Introduction

Pages and components are opened in a split view, bringing code and canvas together.

Compose mode features include:

  • Quickly navigate and hone in on code
  • Immediate feedback upon even the smallest of changes
  • Select from a rich library of elements right at your fingertips
  • Reorganize the structure of components simply by dragging them around
  • Deep understanding of the elements that make up app components
  • Focus on building the app, not fighting with the file tree
Compose Mode

Pages and Components

In Compose mode, pages and components are brought to life from the collection of files (such as TypeScript, HTML, CSS, Module, and Spec files) that represent them.

When first loaded, the page index is shown. This list comprises the pages that Ionic Studio found in the app.

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 index reveals all the components found in the app.

Component Index

See Adding Features to create new pages and components.

Adding Features

To add features to an app, click the Add Feature button at the top left of Ionic Studio.

New Feature Button

There are several types of features available:

  • Pages
  • Components
  • Services
  • Directives
  • Route Guards
  • Pipes

Adding Components

When adding a component, Ionic 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.

Template Mode

In Template mode, the code on the left and canvas on the right are synchronized. Navigating or making changes in one will update the other. The properties panel is also updated each time the selected element changes.

A great deal can be accomplished with the interactive canvas and the properties panel alone, but template code may need to be manually edited when extensive dynamic template logic is used, or other complex use cases.

Editing Templates

Drag & Drop

Compose mode offers drag & drop support when 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 exit the current selection, use the Esc key.

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 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 template, first open the element insertion dropdowns by clicking one of the buttons near the top of Compose.

Add Element Menu

These menus contains HTML elements, Ionic components, and the custom components in the app.

To insert an element, click and hold on it, then drag it into place in either canvas or code (in Template mode).

Dragging an element into code allows more precise placement, but dragging it into the canvas may be easier and offers intelligent slot usage when using Ionic components.

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 the cursor is inside of an element in the code editor, or selected in canvas, the properties panel will update to reflect the selected element.

Properties Panel

In the properties panel, the properties for the selected element are listed. Properties can be changed, as well.

For Ionic components, the properties panel contains a link to the component's documentation at the top, next to its name.

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

Styles Mode

In Styles mode, changes to the component's styles are reflected in the canvas when saved. The styles in this mode are only applicable to the current page or component.

Editing Styles

Other Compose Modes

The Scripts and Module modes are for making changes to the controller and NgModule, respectively. These modes are mostly here for convenience and do not actively change the canvas or properties panel.

Editing Scripts

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