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 - Capacitor plugin to read device accelerometer measurements.
• capacitor-admob - Capacitor plugin to bridge AdMob SDKs for iOS and Android.
• capacitor-age-range - Capacitor plugin age range detection. Google Play Age Signals (Android) + Apple DeclaredAgeRange (iOS).
• capacitor-alarm - Capacitor Plugin to set and open the native alarms.
• capacitor-android-age-signals - Capacitor plugin to use the Play Age Signals API to retrieve age-related signals for users.
• capacitor-android-inline-install - Capacitor plugin to trigger Android inline install feature.
• capacitor-android-kiosk - Capacitor plugin to create application with "kiosk mode". An app with this plugin can be set as an Android launcher.
• capacitor-android-sms-retriever - Capacitor plugin for Android SMS Retriever and Phone Number Hint APIs.
• capacitor-android-usagestatsmanager - Capacitor plugin to get Android app usage stats natively.
• capacitor-app-attest - Capacitor plugin for App Attest on iOS and Play Integrity attestation on Android.
• capacitor-app-tracking-transparency - Capacitor plugin for iOS App Tracking Transparency.
• capacitor-appinsights - Capacitor plugin to allow interact with App insights SDK.
• capacitor-appsflyer - Capacitor plugin for AppsFlyer attribution, analytics, and deep links.
• capacitor-asset-cache - Capacitor plugin for transparent local caching of large images and videos.
• capacitor-audio-recorder - Capacitor plugin to record audio on iOS and Android, keep active in background.
• capacitor-audiosession - Capacitor plugin to manage audio session.
• capacitor-auto - Capacitor plugin for CarPlay and Android Auto communication.
• capacitor-autofill-save-password - Capacitor plugin to prompt to display dialog for saving password to keychain for iOS webview app.
• capacitor-background-geolocation - Capacitor plugin that sends you accurate geolocation updates, even while the app is in the background.
• capacitor-background-task - Capacitor plugin for periodic background fetch tasks on iOS and Android.
• capacitor-barometer - Capacitor plugin to read device barometer.
• capacitor-bluetooth-low-energy - Capacitor plugin Bluetooth Low Energy.
• capacitor-brightness - Capacitor plugin for controlling screen brightness on iOS and Android.
• capacitor-calendar - Capacitor plugin for managing calendar events on iOS and Android, with reminders support on iOS.
• capacitor-camera-preview - Capacitor plugin that allows camera interaction from JavaScript and HTML.
• capacitor-compass - Capacitor plugin to access native compass.
• capacitor-contacts - Capacitor plugin to interact with native contact iOS and Android.
• capacitor-contentsquare - Capacitor plugin for the Contentsquare mobile analytics SDK.
• capacitor-crisp - Capacitor plugin to use Crisp native SDK.
• capacitor-data-storage-sqlite - Capacitor Plugin for Data Storage SQLite for iOS and Android.
• capacitor-date-picker - Capacitor plugin for native date, time, date-time, year-month, and range pickers.
• capacitor-device-info - Capacitor plugin for reading CPU, memory, GPU, storage, and onboard sensor metrics.
• capacitor-device-integrity - Capacitor plugin for device integrity, Android Widevine fingerprints, Play Integrity, iOS App Attest, and DeviceCheck.
• capacitor-document-scanner - Capacitor plugin to scan document iOS and Android.
• capacitor-downloader - Capacitor plugin to download file in background or foreground.
• capacitor-env - Capacitor plugin to store and read env var in capacitor config, helpful for multitenant app.
• capacitor-facebook-analytics - Capacitor plugin for Meta/Facebook App Events analytics.
• capacitor-fast-sql - Capacitor plugin to connect to local SQL with fast protocol.
• capacitor-ffmpeg - Capacitor plugin to run FFmpeg locally on device.
• capacitor-file - Capacitor plugin for file system operations. A modern replacement for cordova-plugin-file with a compatible 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 - Capacitor plugin File picker - Pick files, images, videos, and directories.
• capacitor-file-sharer - Capacitor plugin for sharing and saving files on Android, iOS, and Web.
• capacitor-firebase - Firebase plugins for Capacitor with Android, iOS, and Web support using current Firebase SDKs.
• capacitor-flash - Capacitor plugin to switch the Flashlight / Torch of your device.
• capacitor-gtm - Capacitor plugin to use Google Tag Manager (GTM) natively.
• capacitor-health - Capacitor plugin to interact with data from Apple HealthKit and Google Fit.
• capacitor-home-indicator - Capacitor plugin to hide and show home button indicator.
• capacitor-ibeacon - Capacitor plugin for iBeacon.
• capacitor-in-app-review - Capacitor plugin to prompt users to submit app store ratings.
• capacitor-inappbrowser - Capacitor plugin in app browser with urlChangeEvent.
• capacitor-incoming-call-kit - Capacitor plugin for native incoming call UI with Android full-screen notifications and iOS CallKit.
• capacitor-install-referrer - Capacitor plugin for install attribution with Google Play Install Referrer and Apple AdServices.
• capacitor-intent-launcher - Launch Android intents and open system settings screens from your Capacitor app.
• capacitor-intercom - Capacitor plugin bridge for Intercom SDK.
• capacitor-intune - Capacitor plugin for Microsoft Intune MAM enrollment, app protection policies, app config, and MSAL authentication.
• capacitor-is-root - Capacitor plugin to detect Jailbreak/Root.
• capacitor-ivs-player - Capacitor plugin native IVS player for Android and iOS.
• capacitor-jw-player - Capacitor plugin to play videos natively with JW Player.
• capacitor-keep-awake - Capacitor plugin to 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 - Capacitor plugin to run LLM models locally in iOS and Android, with Apple Intelligence support.
• capacitor-media-session - Capacitor plugin to expose media session controls of the device.
• capacitor-mock-location-detector - Capacitor plugin for detecting simulated GPS locations and developer tooling that enables spoofing apps.
• capacitor-mqtt - Capacitor plugin for MQTT connectivity on Android and iOS.
• capacitor-mute - Capacitor plugin to detect if the mute switch is enabled/disabled on a device.
• capacitor-mux-player - Capacitor plugin to play video with Mux Player SDK on iOS and Android.
• capacitor-native-audio - Capacitor plugin for native audio engine.
• capacitor-native-biometric - Secure biometric authentication for Capacitor with Face ID, Touch ID, and Android biometrics.
• capacitor-native-loader - Native animated loaders, transparent overlays, Lottie assets, and WebView resizing for Capacitor apps.
• capacitor-native-market - Capacitor plugin to open native Play Store/App Store.
• capacitor-native-navigation - Capacitor plugin for Liquid glass native navigation tabs.
• capacitor-native-purchases - Capacitor plugin to manage IAP on Capacitor with the latest Android and iOS libraries.
• capacitor-nativegeocoder - Capacitor plugin for native forward and reverse geocoding.
• capacitor-navigation-bar - Capacitor plugin to set the navigation bar color for Android Lollipop and higher.
• capacitor-network-diagnostics - Capacitor plugin for native network diagnostics.
• capacitor-nfc - Capacitor plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
• capacitor-passkey - Capacitor passkey plugin with a WebAuthn-compatible shim for native apps.
• capacitor-patch - Apply vetted Capgo patches during cap sync and cap update.
• capacitor-pay - Capacitor plugin to trigger native payment for iOS(Apple pay) and Android(Google Pay).
• capacitor-pdf-generator - Capacitor plugin to 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 - Capacitor plugin to persist account data between app install.
• capacitor-persistent-uuid - Capacitor plugin for a persistent app UUID that survives reinstalls and updates.
• 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-plus - Capacitor+ is an always-synced Capacitor fork with community fixes and faster releases.
• capacitor-pretty-toast - Native-first pretty toast notifications for Capacitor and the web.
• capacitor-printer - Capacitor plugin for printing documents, HTML, PDFs, images and web views.
• capacitor-privacy-screen - Capacitor plugin for hiding app content in Android screenshots and iOS app switcher previews.
• capacitor-proximity - Capacitor plugin for enabling proximity monitoring in mobile apps.
• capacitor-realtimekit - Capacitor plugin to use Cloudflare realtime kit.
• capacitor-recaptcha - Capacitor plugin for generating reCAPTCHA and reCAPTCHA Enterprise tokens.
• capacitor-ricoh360-camera-plugin - Capacitor Plugin for ricoh camera 360.
• capacitor-rudderstack - Capacitor plugin for RudderStack analytics, identity, and event tracking.
• capacitor-screen-orientation - Capacitor plugin for screen orientation with support for detecting true physical device orientation.
• capacitor-screen-recorder - Capacitor plugin to record the screen of the phone in native.
• capacitor-shake - Capacitor Plugin to detect when a physical device performs a shake gesture.
• capacitor-share-target - Capacitor plugin to receive share target intent in app.
• capacitor-sheets - Capacitor plugin for framework-agnostic sheets, drawers, dialogs, and overlay primitives.
• capacitor-sim - Capacitor plugin to get information from device's sim cards.
• capacitor-social-login - Capacitor plugin to make login with Google,Apple,Facebook and so on, simple and fast to implement.
• capacitor-speech-recognition - Capacitor plugin for speech recognition.
• capacitor-speech-synthesis - Capacitor plugin to synthesize speech from text with full control over language, voice, pitch, rate, and volume.
• capacitor-ssl-pinning - Capacitor SSL pinning plugin for Android and iOS that integrates with CapacitorHttp.
• capacitor-streamcall - Capacitor plugin for streamcall SDK for capacitor.
• capacitor-stripe-identity - Capacitor plugin for Stripe Identity verification.
• capacitor-stripe-pay - Capacitor plugin for Stripe Payment Sheet, Apple Pay, and Google Pay.
• capacitor-stripe-terminal - Capacitor plugin for Stripe Terminal in-person payments.
• capacitor-supabase - Native Supabase authentication, JWT access, and basic database helpers for Capacitor.
• capacitor-textinteraction - Capacitor plugin to toggle text interaction in iOS apps.
• capacitor-transitions - Framework-agnostic page transitions for Capacitor apps. iOS-style navigation without opinions.
• capacitor-twilio-voice - Capacitor plugin to create and answer calls with Twilio Voice SDK.
• capacitor-updater - Capacitor plugin for Instant updates: Ship updates, fixes, changes, and features within minutes.
• capacitor-uploader - Capacitor plugin to upload file in native layer.
• capacitor-uwb - Capacitor plugin for Ultra-Wideband (UWB) ranging on iOS and Android.
• capacitor-verisoul - Capacitor plugin for Verisoul fraud prevention sessions.
• capacitor-video-player - Capacitor plugin to play video in native player.
• capacitor-video-thumbnails - Generate video thumbnails from local or remote video files - Capacitor plugin.
• 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-crash - Capacitor plugin for detecting recovered WebView crashes.
• 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 with native update prompts and runtime status events.
• capacitor-wechat - Capacitor plugin to interact with WeChat SDK.
• capacitor-widget-kit - Capgo WidgetKit plugin with workout Live Activity example and Maestro smoke test.
• capacitor-wifi - Capacitor plugin to manage WiFi connectivity for your Capacitor app.
• capacitor-youtube-player - Capacitor plugin player to embed YouTube player controls in Capacitor apps.
• capacitor-zebra-datawedge - Capacitor plugin for Zebra DataWedge profile management, notifications, queries, and soft scanning on Zebra Android devices.
• capacitor-zip - 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.
• Capstart - CLI and starter toolkit for creating Capacitor apps with React, Supabase, and shadcn/ui, or adding Capacitor to existing web framework projects.
• 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
• TutorialSearch - Free cross-platform search engine indexing 50,000+ tutorials from Udemy, Skillshare, Pluralsight, and other major learning platforms across 45+ categories.

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 PayPal Payment Integration
• Ionic 4 Apple Pay Payment Integration
• Ionic 4 Razorpay Payment Integration
• 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