Description #
Ionic is an open-source UI toolkit for building cross-platform mobile and web apps using HTML, CSS, and JavaScript — often powered by Angular, React, or Vue.
History #
Created in 2013 by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co., Ionic started as a mobile-first UI library built on AngularJS. It later expanded to support multiple frontend frameworks and integrated tightly with Capacitor for native functionality.
Hello World Code #
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Hello, World!</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p>Welcome to Ionic!</p>
</ion-content>
</ion-app>How to Run #
Option 1: Online
https://stackblitz.com/@ionic
Option 2: Local
npm install -g @ionic/cli
ionic start helloWorld blank
cd helloWorld
ionic serveKey Concepts #
- Web-first UI components
- Built-in theming and styling
- Supports Angular, React, and Vue
- Native mobile integration via Capacitor
- Pre-styled mobile components
- CLI-powered scaffolding
- Responsive design defaults
- PWA capabilities
- Live reload development
- Great for hybrid apps
Try It Online #
Fun Facts #
- Ionic powers apps used by millions, including ones from NASA, Target, and the U.S. Army.
- It can deploy a single app to Android, iOS, desktop, and web from one codebase.
- Ionic components follow mobile design patterns (Material & iOS) automatically.
- Capacitor, its native bridge, gives access to sensors, cameras, and more using web code.
- Developers can build full-featured mobile apps without ever writing Swift or Kotlin.
