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. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
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 |