Ionic Framework is a complete open-source SDK for hybrid mobile app development, combining a UI component library with native runtime integration via Capacitor and framework support for Angular, React, and Vue. Unlike platform-specific SDKs, Ionic lets developers write once and deploy to iOS, Android, and web from a single codebase, with adaptive styling that automatically matches each platform's design guidelines. The key differentiator is web-native architecture—Ionic apps are built with standard web technologies but access native device features through a unified API, making them maintainable by web developers while delivering near-native performance and UX.
What This Cheat Sheet Covers
This topic spans 20 focused tables and 169 indexed concepts, 114 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Core Concepts and Setup
Everything you need to spin up an Ionic project and grasp how it works under the hood lives here. The CLI scaffolds and serves your app, Capacitor bridges to native APIs, and the components themselves are framework-agnostic Web Components — so the same <ion-button> works whether you reach for Angular, React, or Vue, and styles adapt to each platform automatically.
| Concept | Example | Description | |
|---|---|---|---|
npm install -g /cli | Installs the Ionic CLI globally for creating and managing Ionic projects | ||
ionic start myApp tabs --type=angular | • Creates a new Ionic project using a starter template • --type specifies Angular, React, or Vue | ||
ionic serve | Starts local development server with live reload on file changes | ||
<ion-button>Click</ion-button> | Ionic components are framework-agnostic Web Components usable in any JS framework | ||
Automatic iOS/Android styling | Components adapt appearance based on platform automatically without code changes | ||
npm install /core | Native runtime that provides access to native APIs and builds native app binaries | ||
/angular/react/vue | Framework-specific wrappers providing deep integration with Angular, React, or Vue | ||
<ion-header><ion-content><ion-footer> | Standard page layout with header, scrollable content area, and optional footer | ||
<script type="module" src="..."> | Components can be used without a framework via CDN script includes |