1. Creating App UI - PALETTE

Learn how to create a new project and gives an overview of the Ionic UI components PALETTE


The first step in building an app is always creating a new project with some pages that have the desired UI. This is done in the Appery.io visual App Builder.

This section describes how to start with creating Appery.io projects and explains how to work with the UI components to customize your app appearance.


Appery.io App Builder Overview: Getting Started Video

You can also check this video for instructions on how to get started developing with the Appery.io visual App Builder:


Appery.io Education Video Guide

It's also a great idea to check out our YouTube Education Guide where you will learn how to create a stunning UI for your first mobile app, how to add the needed features to it, debug and test it, and much moreโ€ฆ


Creating New App

To create a new app, click the Create new app button:


The modal window will open offering to select from the four tabs for creating a new app:

  • Ionic
  • jQuery Mobile
  • Templates
  • From backup

The first two tabs offer the selection between two popular frameworks that are currently supported by Appery.io.

A great way to start using Appery.io is to create your own app by using one of our ready-to-go customizable templates. You can learn more about Appery.io Templates here:



The Appery.io team regularly releases new templates. To review the available templates, from under the Appery.io platform Apps tab, click Create new app and select the Templates tab.

This tab also shows your projects that have been previously published as project templates (you can check this link to learn more about exporting projects as templates.):


To create an app from a backup, switch to the From Backup tab and select the project backup file. You can only upload an Appery.io project (exported as a backup):


More information about managing project backups can be found here.

Enter the app name (for example, NewIonic5app), select the needed tab (for example, Ionic 5 Blank) and click Create:


Every new Ionic app created with in the App Builder comes with our educational video guide page as a start page:


App Pages (Screens)

A page is the basic building block of any app.
Every brand new app has two default pages (screens):



It is important to differentiate between these two types of the Page component for different pages types (check the Project view):

  • IndexScreen for app pages (there can be only one app page in a project) and
  • Page for Screen pages (numerous Screen pages can be created in a project).

Note as well that the number of screens is plan-dependent, so check our Pricing table to learn how many screens can be created under your plan.

Please check this document for more details on how to work with screens (pages) and tabs available in the visual App Builder.

Before you can start with building the page UI by adding components to it, you need to create the page (or use the default Screen1 page): so, click CREATE NEW > Page (or select the needed page from the Pages list in the Project view if you already have some page to edit):


By default, the page will be opened in the DESIGN panel with the image of your device in the middle (MOBILE FRAME), the components PALETTE to the left of it, and the PROPERTIES tab to the right:


This view allows the following operations:

  • placing/editing/deleting components.
  • using breadcrumbs for easy navigation between the parent/child components.
  • changing layout (portrait or landscape) and scaling.
  • selecting the screen size and view mode (MD or iOS).

To compact the items on the PALETTE (can be handy for working on a smaller monitor), you can click the button on top of it. To go back to the expanded mode, unclick this button:




All frame panels can be hidden, if you need to increase your working area for some purpose (just click the doubled arrow buttons: >>):


UI Components PALETTE Overview

The components PALETTE is the main instrument for creating the page UI and is shown to the left of the visual App Builder canvas.
The PALETTE items are used to configure the app UI by dragging and dropping them to the frame and include the following groups of UI components all of which can be used for building the page UI:

  • Appery.io components
  • AngularJS and Ionic components
  • HTML components (including HTML for writing custom code)
  • Google Map component.

Adding Components

To start work, you need to locate the needed UI component on the PALETTE and add it to the page editor by using simple drag & drop:


After the UI component is added to the screen, you can see it on the Breadcrumbs on top of the working area. To customize the component, the PROPERTIES tab on the right and/or the context menu appearing in the upper right corner of the component can be used:



Properties & Styles Video Tutorial

You can check this Appery.io YouTube Education Guide video to learn how to modify UI componentsโ€™ properties:


Using OUTLINE can be handy for defining the UI of the page where many components were added.
To show the OUTLINE panel with the elements tree, click the corresponding button in the bottom left corner of the working area and select the needed component. The component will also be shown in the Breadcrumbs chain on top and this particular component's properties will become accessible for editing on the PROPERTIES tab:


Besides, selecting and deleting components can be done by clicking on the component on the OUTLINE list (to expand/collapse the list sub-items, use the triangle icon next to the item name:


Another great option available under the OUTLINE view you can use to organize your UI elements on the screen is Drag-and-drop:




You will be warned if trying to do something that cannot be implemented for this particular component:



OUTLINE Video Tutorial

You can check this Appery.io YouTube Education Guide video to learn how to arrange components on the screen using the OUTLINE panel:

Context Menu Overview

Appery.io provides a standard set of tools to copy, paste, clone (duplicate), and remove UI components. All of these actions can be easily accessed through the context menu.
To manage a component, you can select it using Breadcrumbs or opening the OUTLINE view (bottom left) and access the context menu by clicking the gear button:


Generally, the context menu consists of the ะกlone, ะกopy, Paste, and Delete options. However, several UI components (for example, Card or Grid) have more than one option available from the context menu. The green + button duplicated by an Add item option from the drop-down menu will add another nested item to such components. For example, it will add another item to the Card:



Depending on the situation certain options may be unavailable.

Cloning Components

The cloning option can be useful and time-saving in creating a full clone of a UI component with all of the nested children, including other components. To apply it, select the component from the context menu and click Clone.
The component with the same properties appears right after the original component by default. For the most part, all UI components or their parts can be cloned, but the ability to be cloned depends on the componentโ€™s environment. Some components cannot clone their own parts, for example, you cannot clone a Button inside the Input Addon in an AngularJS project. In this instance, cloning will be unavailable for the Button component.

Copying and Pasting Components

Most of the components of the PALETTE can be copied with all their properties and nested components by using the context menu for the selected components.
To use the copy-paste feature:

  1. Click Copy to deposit the selected component in local storage, (this also allows copying and pasting for different projects and sessions).
  2. Then select any container UI component. The component may be located on the same page or placed on the other one.
  3. Open the intended destination context menu and select Paste.


If the Paste option is disabled, the remembered component may not be contained within the currently selected one.

Hiding Components

Components can also be hidden by clicking the icon located next to the Context Menu icon (the gear button):


The corresponding eye sign on the screen gets crossed indicating that the screen contains hidden components and, in the OUTLINE tab, the eye icon appears next to the hidden item (to unhide the item, click this icon):


Copy-Paste Hotkeys

Components can be copied and pasted via the Ctrl+C (โŒ˜+C for Mac) and Ctrl+V (โŒ˜+V for Mac) hotkeys as well. Some components (i.e. those not present in the PALETTE cannot be copied, as well as sub-components (e.g. Card Item, Grid Cell, etc.).
The previously copied component cannot be pasted into the currently selected one due to the following reasons:

  • different project types (e.g. copying from an Ionic5 project and trying to paste into a JQM project)
  • incompatible components (e.g. trying to paste a Grid component into the IndexScreen editor page
  • nothing to paste (in this case, the Empty Clipboard message appears)
    With Ctrl+V hotkeys (โŒ˜+V for Mac), you can paste a component inside of the currently selected one, but also right after it. If the selected component is not a container or is incompatible with the component being pasted โ€“ the latter attempts to be pasted near the selected component (only if it is compatible with oneโ€™s parent).


Copying/pasting works for the active frame context only: clicking outside the DESIGN tab of the screen editor (for example, Toolbar or Project view) and applying special hotkeys will result in no action. Click within the Project pages: DESIGN, PROPERTIES, PALETTE panels, etc, to make the hotkeys work.


Every component has a set of properties some of which are general, others are specific to particular components. All properties that are available for a particular component can be accessed from the PROPERTIES view to the right of the working area:



PALETTE UI Components Properties

Here is the detailed description of the properties that can be defined for specific PALETTE UI components can be found.


Most properties are provided with their corresponding ? tooltips: by hovering over them, you can get information on the property and how to use it:


General Components Properties

Every Appery.io UI component has its properties; some are general, others are specific to particular components.
General properties belonging to most components available in the visual App Builder include:

Property NameProperty Description
Component NameThe mandatory property used for identifying the component. When you drag and drop the component from the components PALETTE the Appery.io Visual App Builder gives it a standard name (e.g. GoogleMap1, Image1 , etc.). Itโ€™s beneficial to rename the components so that you could easily identify them.
This property exists inside the Visual Editor only and does not have any reflection in an application.
ColorColor to use from your application's color palette.
Value types: primary, secondary, tertiary, success, warning, danger, light, medium, dark).
ClassList classes here.
VisibleDetermines whether the component is visible on the page.
DisabledEvery component on the page is enabled by default. You may need to disable components.
If set to true, the user cannot interact with the component.
IconSome components support icons. To choose the icon you need, expand Icon and click the No icon button for Style.
Attribute nameA new attribute value.
ModeDetermines which platform styles to use. Possible values are iOS or MD.
SlotPosition inside another component. It can be set to Fixed.
Some components can have different settings: Start or End.


You can select and manage components using Breadcrumbs or the OUTLINE view.

Detailed (Common and Styles) Components Properties


To check for the properties of a particular UI component, please see the documentation for the corresponding component; for example, the details of the Chart component can be found here.

Most Appery.io Ionic UI components feature subdivision into common properties and properties related to the particular components' styling and they can be found under PROPERTIES > Common/ Styles tabs respectively:


So, you are also free to customize your app appearance (and/or behavior) by defining the properties of the particular UI component(s) used in your app.
This can be easily done under the Common and/or Styles tabs of the PROPERTIES panel:



PROPERTIES Panel View Modes

Also, note that in the App Builder, you can make styling UI components even more comfortable and easily adjustable to different monitors' sizes: to do that, you are free to switch the PROPERTIES panel views between 2 Panels, 1 Column or Tabs modes:


2 Panels Mode


1 Column Mode


Tabs Mode

Whatโ€™s Next