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)
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
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.scss). See the Angular style guide for additional information about naming conventions.
Switching to the component section on the Designer index reveals all the components found in the app.
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.
When adding a component (rather than a page), Studio will prompt for the name and a page in which to register it.
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](/docs/studio/faq#using-a-custom-component-in-additional-pages) for details.
Drag & Drop
The Designer offers a drag & drop canvas for quickly adding new elements and rearranging existing 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:
To select any element in the current document, access the element tree and click on the element to select:
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.
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.
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.
When an element is selected in the Designer canvas, the properties panel will update to reflect the selected element.
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!
The HTML, CSS, and JS (TypeScript) for a page or company can be edited by switching to the Editor View:
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.
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.
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.
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: