Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Ionic

Learn Ionic - 9 Code Examples & CST Typing Practice Test

Ionic Framework is an open-source UI toolkit for building high-quality, cross-platform mobile, desktop, and web apps using web technologies like HTML, CSS, and JavaScript, often paired with Angular, React, or Vue.

View all 9 Ionic code examples →
Ionic React Counter ExampleIonic React Toggle Counter ExampleIonic Angular Counter ExampleIonic Angular Dark Mode CounterIonic Vue Counter ExampleIonic Vue Dark Mode CounterIonic React Step CounterIonic React Auto Increment CounterIonic React Multi Counter

Learn IONIC with Real Code Examples

Updated Nov 23, 2025

Explain

Ionic provides a rich library of mobile-optimized UI components and utilities.

It supports building apps for iOS, Android, Web (SPA/PWA), and Desktop via Capacitor or Electron.

Ionic emphasizes performance, cross-platform consistency, theming, and accessibility.

Core Features

Components like IonButton, IonCard, IonList, IonModal

Navigation and routing with IonRouterOutlet

Native device access via Capacitor plugins

Theming with CSS variables and global overrides

TypeScript support and modern frontend framework integration

Basic Concepts Overview

Components: IonButton, IonCard, IonInput, IonList, IonModal

Navigation: IonRouterOutlet, IonTabs, IonMenu

Theming: CSS variables, light/dark modes, global variables

Styling: Ionic CSS utilities, classes, scoped CSS

Responsive design: mobile-first layouts, breakpoints

Project Structure

src/ - main source folder

src/components/ - reusable Ionic components

src/pages/ - page components

ionic.config.json - main Ionic project config

package.json - dependencies and scripts

Building Workflow

Install Ionic CLI and create project

Develop SPA/PWA or mobile app using Ionic components

Customize theme via CSS variables

Use navigation components for app flow

Build and deploy to desired platform via Capacitor/Electron

Difficulty Use Cases

Beginner: basic SPA using prebuilt components

Intermediate: building PWA/mobile app with routing

Advanced: integrating Capacitor plugins for device access

Expert: building complex multi-platform apps

Community: integrating Ionic with state management and backend services

Comparisons

Cross-platform mobile focus vs Quasar (Vue-based SPA + multi-platform)

Framework-agnostic components vs Quasar/Vuetify (Vue-specific)

Native plugin access via Capacitor vs Quasar/Cordova

Responsive and accessible mobile-first UI

Best for hybrid and mobile-first applications

Versioning Timeline

2013 - Initial Ionic release (AngularJS-based)

2015 - Ionic 2 with Angular 2 support

2018 - Ionic 4 cross-framework (Angular, React, Vue) support

2021 - Ionic 5 modern UI components and Capacitor integration

2025 - Current stable with active support and community

Glossary

Component: reusable UI element

Page: IonPage wrapper for each view

Directive: Angular/React/Vue logic binding

Plugin: Capacitor API bridge for device features

PWA: Progressive Web App

Installation Setup

Install via npm: `npm install -g @ionic/cli`

Create project: `ionic start myApp blank`

Choose frontend framework: Angular, React, or Vue

Run dev server: `ionic serve`

Build for platform: `ionic build` or `ionic capacitor build`

Environment Setup

Install Ionic CLI

Create project with selected frontend framework

Configure pages, components, and theme

Run dev server and test responsiveness

Build and deploy to web or mobile platforms

Config Files

package.json - npm dependencies

ionic.config.json - Ionic project configuration

src/components/ - reusable UI components

src/pages/ - app pages

capacitor.config.json - native platform configuration

Cli Commands

npm install -g @ionic/cli

ionic start myApp blank

ionic serve - run dev server

ionic build - build for web

ionic capacitor add android/ios - add mobile platform

Internationalization

Text handled via framework i18n libraries

RTL layout support

Themes unaffected by language

Supports multi-language apps

Integrates with translation plugins

Accessibility

ARIA roles included

Keyboard navigation supported

Screen-reader friendly

Accessible modals, lists, and forms

WCAG compliance encouraged

Ui Styling

Mobile-first design via Ionic components

Themeable using CSS variables and global styles

Responsive layout with IonGrid, IonRow, IonCol

Customizable colors, typography, spacing

Accessible by default

State Management

Works with Angular/React/Vue state management

Forms and modals manage local state

Dynamic updates handled via framework reactivity

Integration with Redux, NgRx, or Vuex possible

No internal global state in Ionic itself

Data Management

Data handled via props, reactive state, and framework-specific stores

IonList/IonVirtualScroll handles large datasets

Forms use two-way binding (v-model, ngModel)

Integrates with REST APIs or GraphQL

Scales for enterprise apps with large datasets

Architecture

Component-based architecture (Angular/React/Vue)

UI driven by mobile-optimized Ionic components

Theming system with CSS variables

Supports modern frontend frameworks

Capacitor provides native bridge for device APIs

Rendering Model

Web components render HTML and CSS

JavaScript handles interactivity and reactivity

Themes control colors, typography, and spacing

Layout and grid utilities manage responsiveness

Capacitor bridges native device APIs

Architectural Patterns

Component-based architecture

Theme system with global configuration

Navigation and page stack management

Composable components for reuse

Scalable for mobile, PWA, and desktop apps

Real World Architectures

Enterprise mobile apps

Hybrid PWA apps

SPAs and cross-platform mobile apps

Interactive forms, lists, and dashboards

Desktop apps via Electron

Design Principles

Mobile-first and responsive design

Cross-platform component consistency

Theming via CSS variables

Accessibility-first components

Integration with native device features via Capacitor

Scalability Guide

Import only required components

Use theme variables consistently

Compose reusable components and pages

Lazy-load heavy pages and components

Maintain consistent layout and navigation

Migration Guide

Replace legacy components with Ionic equivalents

Refactor navigation to use IonRouterOutlet/IonTabs

Apply theme variables and global CSS

Check breakpoints and responsive layouts

Test accessibility for all components

Performance Notes

Lazy-load heavy pages and components

Optimize CSS variables for runtime performance

Use virtual scroll for long lists

Tree-shake unused components

Minimize DOM elements for mobile performance

Security Notes

Validate and sanitize form inputs

Escape dynamic content

Use HTTPS for API calls

Follow frontend security best practices

Ensure accessible modals and dialogs

Monitoring Analytics

Monitor bundle size

Test responsiveness across devices

Accessibility audits

Performance monitoring for web/mobile

Error logging via services like Sentry

Code Quality

Follow framework best practices

Use semantic components

Lazy-load modules and pages

Document theme and layout usage

Minimize inline style overrides

Practical Examples

Responsive tab navigation using IonTabs and IonRouterOutlet

Card-based lists with IonCard and IonList

Forms with IonInput, IonSelect, IonButton, and validation

Modals using IonModal and dialogs

Building PWAs with offline support

Troubleshooting

Ensure Ionic CLI and dependencies are correctly installed

Verify platform integration via Capacitor

Check routing with IonRouterOutlet syntax

Lazy-load pages to improve performance

Test ARIA props for accessibility

Testing Guide

Unit testing with Jest or Karma

End-to-end testing with Cypress

Accessibility testing using axe-core

Responsive testing on different devices

Integration testing with Capacitor APIs

Deployment Options

Static SPA hosting (Netlify, Vercel)

Progressive Web Apps (PWA)

iOS/Android apps via Capacitor

Desktop apps via Electron

Enterprise mobile apps

Tools Ecosystem

Ionic CLI

Capacitor for native device access

Ionic UI components

Ionic Appflow for CI/CD

Integration with Angular, React, or Vue

Integrations

Angular, React, Vue support

Capacitor plugins for native APIs

TypeScript support

Testing with Jest, Cypress, or Karma

PWAs, mobile apps, and Electron desktop apps

Productivity Tips

Use prebuilt components for faster development

Leverage Ionic CLI for scaffolding and builds

Use theme variables for consistency

Lazy-load pages for performance

Use TypeScript for type safety

Challenges

Create a responsive PWA with tabs and navigation

Build forms with validation and themed inputs

Implement modals, popovers, and notifications

Integrate device features (camera, geolocation) via Capacitor

Package mobile apps for iOS and Android

Learning Path

Learn HTML, CSS, and JavaScript fundamentals

Understand Ionic components and CLI

Explore navigation and routing

Practice building PWA and mobile apps

Integrate Capacitor plugins for device features

Skill Improvement Plan

Week 1: Core components (IonButton, IonCard, IonInput)

Week 2: Navigation (IonTabs, IonRouterOutlet, IonMenu)

Week 3: Theming and global CSS variables

Week 4: Advanced components (IonList, IonModal, IonPopover)

Week 5: Build full PWA and mobile apps with Capacitor

Interview Questions

What is Ionic Framework and why use it?

Explain Ionic components and navigation system

How do you integrate Capacitor plugins?

Difference between Ionic and Quasar/Vuetify

How to optimize Ionic apps for performance and responsiveness?

Cheat Sheet

`IonButton`, `IonCard`, `IonInput` - common components

`IonPage`, `IonContent` - page structure

`ion-color` and CSS variables - theming

`IonTabs`, `IonRouterOutlet` - navigation

`*ngIf`/v-if/conditional rendering - framework-dependent

Books

Mastering Ionic Framework

Building Mobile Apps with Ionic

Ionic by Example

Progressive Web Apps with Ionic

Advanced Patterns in Ionic Development

Tutorials

Ionic official documentation

YouTube Ionic tutorials

FreeCodeCamp Ionic guides

Community blogs and examples

Udemy courses for Ionic and hybrid apps

Official Docs

https://ionicframework.com/

https://github.com/ionic-team/ionic-framework

https://ionicframework.com/docs

Community Links

Ionic GitHub

Stack Overflow Ionic tag

Ionic Forum

Reddit Ionic discussions

Community templates and starter kits

Community Support

Ionic GitHub repository

Stack Overflow Ionic tag

Ionic Forum

Reddit Ionic and hybrid app discussions

Community templates and starter kits

Monetization

Build Ionic templates or starter apps

Offer hybrid mobile app development services

Create reusable component libraries

Consulting for cross-platform apps

Rapid prototyping for clients

Future Roadmap

Expand cross-framework components

Improve Capacitor plugin ecosystem

Enhance PWA and mobile offline support

Better native integration for Android/iOS

Community-driven templates and examples

When Not To Use

Projects not targeting mobile or cross-platform

Single-page web apps without PWA/mobile needs

Apps requiring highly custom desktop UI

Projects prioritizing minimal bundle size for web

For non-hybrid or native-first apps

Final Summary

Ionic Framework is a hybrid, cross-platform framework for mobile, desktop, and web apps.

Provides mobile-first UI components, navigation, and device integration.

Supports Angular, React, and Vue.

Capacitor enables native device access for mobile apps.

Ideal for PWAs, hybrid apps, and rapid cross-platform development.

Faq

Is Ionic free?

Yes - MIT license.

Does Ionic support native apps?

Yes - via Capacitor.

Is Ionic responsive?

Yes - mobile-first layouts and utilities.

Can I customize Ionic themes?

Yes - CSS variables and global theme settings.

Which platforms does Ionic support?

Web (SPA/PWA), iOS, Android, and Desktop via Electron.

Code Sample Descriptions

1

Ionic React Counter Example

import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonTitle, IonToolbar, IonText } from '@ionic/react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    const toggleTheme = () => {
        setIsDark(!isDark);
        document.body.className = isDark ? 'light-theme' : 'dark-theme';
    };

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Ionic Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{ textAlign: 'center' }}>
        <IonText><h2>Counter: {count}</h2></IonText>
        <IonButton color="primary" onClick={() => setCount(count + 1)}>+</IonButton>
        <IonButton color="danger" onClick={() => setCount(count - 1)}>-</IonButton>
        <IonButton color="medium" onClick={() => setCount(0)}>Reset</IonButton>
        <br /><br />
        <IonButton color="tertiary" onClick={toggleTheme}>Switch Theme</IonButton>
        </IonContent>
        </IonApp>
    );
};

export default Counter;

Demonstrates a simple counter layout using Ionic React components and React for interactivity.

Let’s Try →
2

Ionic React Toggle Counter Example

import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonTitle, IonToolbar, IonText } from '@ionic/react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [double, setDouble] = useState(false);

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Toggle Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{ textAlign: 'center' }}>
        <IonText><h2>Counter: {count}</h2></IonText>
        <IonButton onClick={() => setCount(count + (double ? 2 : 1))}>+</IonButton>
        <IonButton onClick={() => setCount(count - (double ? 2 : 1))}>-</IonButton>
        <IonButton onClick={() => setCount(0)}>Reset</IonButton>
        <br /><br />
        <IonButton onClick={() => setDouble(!double)}>Toggle Double: {double ? 'ON' : 'OFF'}</IonButton>
        </IonContent>
        </IonApp>
    );
};

export default Counter;

Demonstrates a counter with an additional toggle button to double the increment in Ionic React.

Let’s Try →
3

Ionic Angular Counter Example

<ion-header>
    <ion-toolbar>
        <ion-title>Ionic Angular Counter</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding" style="text-align:center">
    <h2>Counter: {{ count }}</h2>
    <ion-button (click)="increment()">+</ion-button>
    <ion-button (click)="decrement()">-</ion-button>
    <ion-button (click)="reset()">Reset</ion-button>
</ion-content>

export class CounterComponent {
    count = 0;
    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
}

Demonstrates a simple counter using Ionic Angular components with event bindings.

Let’s Try →
4

Ionic Angular Dark Mode Counter

<ion-header>
    <ion-toolbar>
        <ion-title>Dark Mode Counter</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding" style="text-align:center" [ngClass]="{dark: isDark}">
    <h2>Counter: {{ count }}</h2>
    <ion-button (click)="increment()">+</ion-button>
    <ion-button (click)="decrement()">-</ion-button>
    <ion-button (click)="reset()">Reset</ion-button>
    <br/><br/>
    <ion-button (click)="toggleTheme()">Switch Theme</ion-button>
</ion-content>

export class DarkCounterComponent {
    count = 0;
    isDark = false;
    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; } 
}

Demonstrates an Ionic Angular counter with dark mode toggle functionality.

Let’s Try →
5

Ionic Vue Counter Example

<template>
    <ion-app>
        <ion-header>
        <ion-toolbar>
        <ion-title>Ionic Vue Counter</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding" style="text-align:center">
        <h2>Counter: {{ count }}</h2>
        <ion-button @click="count++">+</ion-button>
        <ion-button @click="count--">-</ion-button>
        <ion-button @click="count=0">Reset</ion-button>
        </ion-content>
    </ion-app>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        return { count };
    }
}
</script>

Demonstrates a simple counter using Ionic Vue with reactive state.

Let’s Try →
6

Ionic Vue Dark Mode Counter

<template>
    <ion-app :class="isDark ? 'dark-theme' : 'light-theme'">
        <ion-header>
        <ion-toolbar>
        <ion-title>Dark Mode Counter</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding" style="text-align:center">
        <h2>Counter: {{ count }}</h2>
        <ion-button @click="count++">+</ion-button>
        <ion-button @click="count--">-</ion-button>
        <ion-button @click="count=0">Reset</ion-button>
        <br/><br/>
        <ion-button @click="toggleTheme">Switch Theme</ion-button>
        </ion-content>
    </ion-app>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);
        const toggleTheme = () => { isDark.value = !isDark.value };
        return { count, isDark, toggleTheme };
    }
}
</script>

Demonstrates an Ionic Vue counter with dark/light theme toggle.

Let’s Try →
7

Ionic React Step Counter

import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonTitle, IonToolbar, IonText, IonInput } from '@ionic/react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [step, setStep] = useState(1);

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Step Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{textAlign:'center'}}>
        <IonText><h2>Counter: {count}</h2></IonText>
        <IonInput type='number' value={step} onIonChange={e => setStep(parseInt(e.detail.value,10)||1)} placeholder='Step'/>
        <IonButton onClick={() => setCount(count + step)}>+</IonButton>
        <IonButton onClick={() => setCount(count - step)}>-</IonButton>
        <IonButton onClick={() => setCount(0)}>Reset</IonButton>
        </IonContent>
        </IonApp>
    );
}

export default Counter;

Ionic React counter example with customizable step increment.

Let’s Try →
8

Ionic React Auto Increment Counter

import React, { useState, useEffect } from 'react';
import { IonApp, IonContent, IonHeader, IonToolbar, IonTitle, IonText, IonButton } from '@ionic/react';

const AutoCounter = () => {
    const [count, setCount] = useState(0);
    const [isRunning, setIsRunning] = useState(true);

    useEffect(() => {
        const interval = setInterval(() => {
        if(isRunning) setCount(c => c+1);
        }, 1000);
        return () => clearInterval(interval);
    }, [isRunning]);

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Auto Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{textAlign:'center'}}>
        <IonText><h2>Counter: {count}</h2></IonText>
        <IonButton onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Resume'}</IonButton>
        <IonButton onClick={() => setCount(0)}>Reset</IonButton>
        </IonContent>
        </IonApp>
    );
}

export default AutoCounter;

Ionic React counter example that automatically increments every second.

Let’s Try →
9

Ionic React Multi Counter

import React, { useState } from 'react';
import { IonApp, IonContent, IonButton, IonHeader, IonToolbar, IonTitle, IonText } from '@ionic/react';

const MultiCounter = () => {
    const [counters, setCounters] = useState([0,0,0]);

    const increment = index => {
        const newCounters = [...counters];
        newCounters[index]++;
        setCounters(newCounters);
    };

    return (
        <IonApp>
        <IonHeader>
        <IonToolbar>
        <IonTitle>Multi Counter</IonTitle>
        </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" style={{textAlign:'center'}}>
        {counters.map((count, index) => (
        <div key={index} style={{marginBottom:'20px'}}>
        <IonText><h2>Counter {index+1}: {count}</h2></IonText>
        <IonButton onClick={() => increment(index)}>+</IonButton>
        </div>
        ))}
        </IonContent>
        </IonApp>
    );
}

export default MultiCounter;

Ionic React example with multiple independent counters in one page.

Let’s Try →

Frequently Asked Questions about Ionic

What is Ionic?

Ionic Framework is an open-source UI toolkit for building high-quality, cross-platform mobile, desktop, and web apps using web technologies like HTML, CSS, and JavaScript, often paired with Angular, React, or Vue.

What are the primary use cases for Ionic?

Cross-platform mobile apps (iOS, Android). Progressive Web Apps (PWA). Desktop apps via Electron. Single Page Applications (SPA). Rapid prototyping of mobile-first interfaces

What are the strengths of Ionic?

Cross-platform app development with one codebase. Rich library of mobile-first components. Strong integrations with Angular, React, and Vue. Support for native features via Capacitor. Active community and ecosystem of plugins

What are the limitations of Ionic?

Web-first framework; native performance depends on Capacitor. Some components may need customization for true native feel. Bundle size can be larger for web apps. Learning curve for hybrid and PWA-specific optimizations. Opinionated mobile design style (iOS/Material) may not fit all projects

How can I practice Ionic typing speed?

CodeSpeedTest offers 9+ real Ionic code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.