Quickstart

Contents

The quickstart tutorial walks you through starting a new app, the basics of Compose and Code, and serving your app.

🚧 These docs are a work-in-progress. Check back frequently for updates!

Start a New App

To create a new Ionic project:

  1. Open the New Project modal with File » New Project. Start a New Project with Studio
  2. Supply a name for your app. This can be changed later.
  3. Optionally supply a Bundle ID (aka Package ID), which is used to identify your app when published. It's okay to leave this blank for now.
  4. Choose the tabs starter template for your app.
  5. Click Create Project.

Code & Compose

Ionic Studio offers two main modes for making changes to your app: Code and Compose. Code mode is a text editor like VS Code, Atom, et al. Compose mode is a split view of code and canvas for building pages & components.

Composing Components

For this quickstart tutorial, we are going to focus on using Compose to update a page.

  1. Open Compose mode by clicking the cursor icon in the navigation menu. Compose Page Index
  2. Open the Tab1Page provided by the tabs starter template. Compose
  3. Change text by double-clicking in the canvas. Change "Tab One" to "My New Page".
  4. Delete elements by clicking on them and pressing the Delete or Backspace key. Delete the <ion-img> inside the card that shows shapes.svg.
  5. Insert elements by clicking on the cube icon in the header and dragging them into the canvas or code. Add a button at the bottom of the card.
  6. Modify component properties by clicking on the component and using the properties panel. Change the Theme Color of your button to Secondary.
  7. Save your changes with Ctrl+S (or Command+S for macOS), or with File » Save.

Compose uses the component code itself as a source of truth for rendering a preview in the canvas. Try making direct changes to the code to see how the canvas reacts.

Serving Your App

Serving your app will start a Live Reload server and display your app in a separate browser window.

Run Menu

While serving your app, changes made when files are saved will automatically reload the Serve Window.

See the documentation for Serving Apps for more information. To run your app on a real device or emulator, first make sure your computer is setup for a native iOS or Android environment. Then, see the docs for Running Apps.

Edit this page Updated 2019-07-22