Awesome Ionic

⚡ A curated list of awesome resources related to the Ionic Framework.
Ionic is an open-source mobile application framework that makes it easy to build cross-platform mobile apps with web technologies.

➡️ Get Instant updates for your Capacitor App with Capgo 🚀

Fix your annoying bug now, Hire a Capacitor expert 💪

Contents

• Current Ionic version
• Official Resources
• Ionic Fundamentals
• Theming
• Components tutorials
• Authentication
• Unit Testing
• Ionic Native / Cordova Plugins
• Capgo Capacitor Plugins
• Payment Gateway Integrations
• Backend as a Service
• i18n & l10n
• Tools
• Video Tutorials
• Books
• Boilerplate/Demo Apps
• Components
  • Libraries
  • Animations
  • UI Library
  • Menu, Tabs
  • Form / Input
  • Input - Date/Calendar
  • Lists/Table
  • Images
  • Charts/Diagram
  • Video/Audio
  • Keyboards
  • Icons
  • Dialog
  • Frames
• Open Source Projects
• Contribute
• Author

Current Ionic version

Official Resources

• Site
• Blog
• Documentation
• Getting Started Guide
• Ionic Native
• Community Forum
• Ionic YouTube Channel
• Showcase
• GitHub Repo
• Awesome Capacitor

Ionic Fundamentals

• Beginners Guide to Getting Started with Ionic

• Ionic First Look Series: Your First Ionic App Explained

• How to Convert an Ionic 1 Application to Ionic

• A Simple Guide to Navigation in Ionic

• 10 Minutes with Ionic: Adding Pages and Navigation

• How to Create a Data Model in Ionic

• Ionic and External Libraries

• Understanding Zones and Change Detection in Ionic & Angular 2

• Custom Pipes in Ionic

• How to Manipulate Data in Ionic: Part 1

• How to Manipulate Data in Ionic: Part 2

• Filtering, Mapping, and Reducing Arrays in Ionic

• Your First Ionic App: Angular

• Read SMS in Ionic 4 apps

• Geolocation with Capacitor

• Push Notifications with Firebase in Ionic

• Google Vision in Ionic 4 apps

• Add headless ButterCMS to your Ionic App by Mike Hartington

Theming

• A Guide to Styling an Ionic Application

• A List of Common CSS Utility Attributes in Ionic

• 5 Animation Packages You Can Immediately Use Inside Your Ionic App

Components tutorials

• How to Create a Sliding Delete Button for Lists
• Creating a Sliding Introduction Component in Ionic
• How to Create a Custom Loading Component in Ionic
• Build a Simple Progress Bar Component in Ionic
• Create a News Feed with 360-Degree Photo Viewing in Ionic
• Build a Tap to Reveal Component in Ionic

Authentication

• Twitter Login in Ionic 4 App using Firebase
• Facebook Login in Ionic with Firebase
• Google Login in Ionic 4 App using Firebase
• Firebase Anonymous Authentication
• Firebase Email/Password Authentication
• Add Touch ID Authentication To An Ionic Mobile App
• Using An Oauth 2.0 Service Within An Ionic Mobile App
• Ionic and Auth0
• Authenticate Ionic with WordPress

Unit Testing

• How to Unit Test an Ionic Application
• Test Driven Development in Ionic: An Introduction to TDD

Ionic Native / Cordova Plugins

• Playing music in Ionic 4 apps

• How to implement health plugin - Pedometer in Ionic 4

• Using Cordova Plugins in Ionic with Ionic Native

• 10 Minutes with Ionic: Using the Camera with Ionic Native

• Determine Network Availability

• Monetize With Google Admob In An Ionic Mobile App

• Show Native Toast Notifications In An Ionic Mobile App

• Use SQLite In Ionic Instead Of Local Storage

• Launch Websites With Ionic Using The InAppBrowser

• Add Barcode Scanning Functionality To Your Ionic App

• Use Google Analytics In An Ionic Android And iOS App

• Share Things On Social Media Via An Ionic Mobile App

• Adding Background Geolocation to an Ionic Application

• Getting Familiar with Local Notifications in Ionic

• Create a Nearby Places List with Google Maps in Ionic – Part 1

• Create a Nearby Places List with Google Maps in Ionic – Part 2

Capgo Capacitor Plugins

• capacitor-accelerometer - Read device accelerometer measurements with Capacitor.
• capacitor-admob - Capacitor plugin to bridge AdMob SDKs for iOS and Android.
• capacitor-age-range - Cross-platform age range detection. Google Play Age Signals on Android, Apple DeclaredAgeRange on iOS.
• capacitor-alarm - Manage native alarm Capacitor plugin.
• capacitor-android-age-signals - Capacitor plugin that exposes Google Play Age Signals to your app.
• capacitor-android-inline-install - Capacitor plugin to trigger Android inline install feature.
• capacitor-android-kiosk - Android Kiosk Mode plugin for Capacitor - Lock device into kiosk mode with launcher functionality.
• capacitor-android-usagestatsmanager - Exposes the Android's UsageStatsManager SDK to Capacitor.
• capacitor-app-attest - App Attest on iOS and Play Integrity attestation on Android for Capacitor.
• capacitor-app-tracking-transparency - Capacitor plugin for iOS App Tracking Transparency framework. Request user authorization to access app-related data for tracking.
• capacitor-appinsights - A wrapper around the https://github.com/apptopia/appinsights SDK.
• capacitor-audio-recorder - Record audio on iOS, Android, and Web with Capacitor.
• capacitor-audiosession - This capacitor plugin allows iOS applications to get notified audio about interrupts & route changes (for example when a headset is connected), and also query and override the audio device in use.
• capacitor-autofill-save-password - Prompt to display dialog for saving password to keychain from webview app.
• capacitor-background-geolocation - Receive accurate geolocation updates even while the app is in the background.
• capacitor-barometer - Access device barometer readings with Capacitor.
• capacitor-bluetooth-low-energy - Bluetooth Low Energy (BLE) plugin for Capacitor with support for scanning, connecting, reading, writing, and notifications.
• capacitor-brightness - Control screen brightness on iOS and Android.
• capacitor-camera-preview - Camera preview.
• capacitor-compass - Native compass heading plugin for Capacitor.
• capacitor-contacts - Work with device contacts using Capacitor APIs.
• capacitor-crisp - Crisp native SDK for capacitor.
• capacitor-data-storage-sqlite - SQLite Storage of key/value strings pair.
• capacitor-document-scanner - Capacitor plugin to scan document iOS and Android.
• capacitor-downloader - Download file in background or foreground.
• capacitor-env - Set Env var in Capacitor config and read them at runtime.
• capacitor-fast-sql - High-performance native SQLite plugin with custom protocol for efficient sync operations and IndexedDB replacement.
• capacitor-ffmpeg - Exposes the FFmpeg API to Capacitor.
• capacitor-file - Capacitor plugin for file system operations, compatible with Cordova File plugin API.
• capacitor-file-compressor - Capacitor plugin for efficient image compression supporting PNG, JPEG, and WebP formats across iOS, Android, and Web platforms.
• capacitor-file-picker - File picker Capacitor plugin - Pick files, images, videos, and directories.
• capacitor-firebase - Capacitor plugin.
• capacitor-flash - Switch the Flashlight / Torch of your device.
• capacitor-gtm - Google Tag manager plugin for Capacitor.
• capacitor-health - Capacitor plugin to interact with data from Apple HealthKit and Health Connect.
• capacitor-home-indicator - Hide and show home button indicator in Capacitor app.
• capacitor-ibeacon - IBeacon plugin for Capacitor - proximity detection and beacon region monitoring.
• capacitor-in-app-review - Prompt users to submit app store ratings and reviews without leaving your app.
• capacitor-inappbrowser - Capacitor plugin in app browser.
• capacitor-intent-launcher - Capacitor plugin to launch Android intents and open system settings screens on Android and iOS.
• capacitor-intercom - Intercom Capacitor plugin.
• capacitor-is-root - Jailbreak/Root Detection Plugin for Capacitor.
• capacitor-ivs-player - Ivs player for capacitor app.
• capacitor-jw-player - Playes videos from jwplayer.com.
• capacitor-keep-awake - Prevent the device screen from dimming or sleeping.
• capacitor-launch-navigator - Capacitor plugin which launches native route navigation apps for Android, iOS.
• capacitor-light-sensor - Capacitor plugin for accessing the device light sensor (Android only).
• capacitor-live-activities - Manage iOS Live Activities from Capacitor.
• capacitor-live-reload - Capacitor plugin to live reload Capacitor apps from a remote Vite dev server.
• capacitor-llm - Adds support for LLM locally runned for Capacitor.
• capacitor-media-session - Capacitor plugin to expose media session controls of the device.
• capacitor-mute - Detect if the mute switch is enabled/disabled on a device.
• capacitor-mux-player - Native Mux Player SDK to play video on IOS and Android.
• capacitor-native-audio - A native plugin for native audio engine.
• capacitor-native-biometric - This plugin gives access to the native biometric apis for android and iOS.
• capacitor-native-market - A native market plugin for linking to google play or app store.
• capacitor-native-purchases - In-app Subscriptions Made Easy.
• capacitor-nativegeocoder - Capacitor plugin for native forward and reverse geocoding.
• capacitor-navigation-bar - Capacitor plugin Set navigation bar color for android lollipop and higher.
• capacitor-nfc - Native NFC tag discovery, reading and writing for Capacitor apps on iOS and Android.
• capacitor-pay - Capacitor plugin to trigger native payment for iOS(Apple pay) and Android(Google Pay).
• capacitor-pdf-generator - Generate PDF files from HTML strings or URLs on iOS and Android.
• capacitor-pedometer - Capacitor plugin for accessing pedometer data including steps, distance, pace, cadence, and floors.
• capacitor-persistent-account - This plugin allows you to securely store account information for a user in Capacitor.
• capacitor-persona - Capacitor plugin for launching Persona Inquiry flows on iOS and Android.
• capacitor-photo-library - Capacitor plugin Displays photo gallery as web page, or boring native screen which you cannot modify but require no authorization.
• capacitor-printer - Capacitor plugin for printing documents, HTML, PDFs, images and web views.
• capacitor-realtimekit - Cloudflare Calls integration for Capacitor apps with built-in UI for meetings.
• capacitor-ricoh360-camera-plugin - Provides an SDK for the Ricoh360 cameras for Capacitor.
• capacitor-screen-orientation - Screen orientation plugin with support for bypassing orientation lock.
• capacitor-screen-recorder - Record device's screen.
• capacitor-shake - Detect shake gesture in device.
• capacitor-share-target - Receive shared content from other apps.
• capacitor-sim - Capacitor plugin to get information from device's sim cards.
• capacitor-social-login - All social logins in one plugin.
• capacitor-speech-recognition - Capacitor plugin for comprehensive on-device speech recognition with live partial results.
• capacitor-speech-synthesis - Synthesize speech from text with full control over language, voice, pitch, rate, and volume.
• capacitor-streamcall - Uses the https://getstream.io/ SDK to implement calling in Capacitor.
• capacitor-supabase - Native Supabase SDK integration for Capacitor - Auth, Database, and JWT access.
• capacitor-textinteraction - Toggle text interaction in Capacitor based iOS apps.
• capacitor-transitions - Framework-agnostic page transitions for Capacitor apps - iOS-style navigation without opinions.
• capacitor-twilio-voice - Integrates the Twilio Voice SDK into Capacitor.
• capacitor-updater - Live update for capacitor apps.
• capacitor-uploader - Upload file natively.
• capacitor-video-player - Capacitor plugin to play video in native player.
• capacitor-video-thumbnails - Generate video thumbnails from local or remote video files.
• capacitor-volume-buttons - Capacitor plugin to listen to volume button presses.
• capacitor-watch - Capacitor plugin for Apple Watch communication with bidirectional messaging support.
• capacitor-webview-guardian - Capacitor plugin to Detect when the WebView was killed in the background and relaunch it on foreground.
• capacitor-webview-version-checker - Capacitor plugin for checking outdated Android WebView engines, emitting status events, and presenting native update prompts.
• capacitor-wechat - WeChat SDK for Capacitor - enables authentication, sharing, payments, and mini-programs.
• capacitor-wifi - Manage WiFi connectivity for your Capacitor app.
• capacitor-youtube-player - Capacitor player to embed YouTube player controls in Capacitor apps.
• capacitor-zip - A free Capacitor plugin for zipping and unzipping files on iOS, Android, and Web.

Payment Gateway Integrations

• Stripe Payment Integration in Ionic
• PayPal Integration in Ionic
• Ionic 4 Apple Pay Payment Integration
• Ionic 4 Razorpay Payment Integration

Backend as a Service

• 10 Minutes with Ionic: Calling an API
• Using Http to Fetch Remote Data from a Server in Ionic
• Posting data from Ionic app to a PHP server
• Make HTTP Requests In An Ionic Android And iOS App

i18n & l10n

• Localizing Ionic Apps with ngx-translate
• attranslate - Semi-automated translation of JSON and other resource files.

Tools

• Ionic2-vscode
• Vim-ionic2
• Capacitor safe area simulator - Chrome extension to simulate safe area in the browser, it support Ionic, Knsta UI and Tailwind Capacitor.
• Capgo Skills - Test your Ionic/Capacitor skills with interactive challenges.
• Capgo Security Scanner - Scan your Capacitor app for security vulnerabilities.
• Capgo Semver Tester - Test semantic versioning compatibility for Capacitor plugins.
• AASA Tester - Test Apple App Site Association files for iOS Universal Links.

Video Tutorials

• Build a Todo App from Scratch with Ionic
• Ionic: How to Use Google Maps & Geolocation
• Build a Custom Flash Card Component in Ionic
• Hacking CSS in Ionic
• Learn Ionic 3 From Scratch

Books

• Building Mobile Apps with Ionic

Boilerplate/Demo Apps

• Ionic Official Starter Templates

• Ionic Boilerplate

• Cordova File Transfer

• Update your App

• NFC Demo

• Fullscreen Content

• Card Layout

• Ionic 2

• Ionic 2 Advanced Components

• OCR Scan App

• Ionic 4 Payment Gateway Starter - Stripe

• Ionic 4 Payment Gateway Starter - Paypal

• Ionic 4 Payment Gateway Starter - Razorpay

• Ionic 4 Payment Gateway Starter - Apple Pay

• Ionic 5 Complete App and PWA Starter

• Ionic 5 Complete Taxi Booking Platform Starter

• Ionic 5 Grocery Shopping Starter with Admin Panel

• Ionic 5 Tinder Starter

• Ionic 5 Food Delivery App Starter

• Ionic 6 Capacitor Full App Starter

Components

Libraries

• Capacitor Tailwind - A Tailwind CSS plugin for Capacitor.
• Ionic Blocks - A collection of free and premium Ionic components.

Animations

• Lottie Animation
• Lottie Animation

UI Library

• Ionic 4 UI Component Library

Menu, Tabs

• Scrollabel Tabs
• Circular Tabs
• Fab Toolbar
• Multi Level Sidemenu
• Popover Sidemenu
• Drop down Title

Form / Input

• Autocomplete
• Form Generator based on JSON
• Dynamic Forms
• Form Builder
• Sidemenu tabs
• Selectable
• Masks

Input - Date/Calendar

• Calendar
• Calendar
• Calendar
• Calendar (very powerful)
• Calendar - Fullcalendar
• Datepicker
• Datepicker (selectable range dates calendar)
• Datepicker
• Rating
• Inputfield Mask

Lists/Table

• Sortable/Filter Tables
• Smart table (sorting, filtering)
• Flexible and Light Table

Images

• Signatur - Works perfect with Ionic.
• Image Fallback
• Lazy Load
• Image Loader
• Facebook Gallery
• Image Viewer
• Gallery Modal
• Image Zoom

Charts/Diagram

• Charts
• D3 Service
• D3 Angular Examples
• D3 Line/Bar/Pie Charts

Video/Audio

• Video Editor
• Simple Audioplayer

Keyboards

• Digit Keyboard

Icons

• @robsonos/ionic-mdi - Material Design Icons for the Ionic addIcons function.

Dialog

• Dialogbox with Counter

Frames

• ng Lightning (for Salesforce Apps)

Open Source Projects

• Ionic Conference App
• IonicRealty
• Ionic Firebase Chat App
• Ionic Ecommerce App
• Ionic Conference App based on Lanyrd API
• Ionic Stock Tracking App
• Ionic Wordpress Client
• Ionic Media Player
• Ionic Social App
• Ionic 5 WhatsApp clone
• Ionic 5 Social Network Starter
• Ionic Push Notification
• Ionic Weather app
• Ionic Reddit Reader
• Ionic aiEyes - Azure Computer Vision API
• Ionic Soundboard
• Firebase push notifications in Ionic 4
• Receive SMS automatically in Ionic 4
• Playing music in Ionic 4
• Ionic 4 Stripe Payment Integration
• Ionic 4 PayPal Payment Integration
• Ionic 4 Apple Pay Payment Integration
• Ionic 4 Razorpay Payment Integration
• Ionic 4 Twitter login with Firebase
• Ionic 4 Facebook login with Firebase
• Translation in Ionic 4 - Internationalization and localization

Contribute

Contributions welcome! Read the contribution guidelines first.

Author

Capgo — Live updates for capacitor