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 Example Ionic React Toggle Counter Example Ionic Angular Counter Example Ionic Angular Dark Mode Counter Ionic Vue Counter Example Ionic Vue Dark Mode Counter Ionic React Step Counter Ionic React Auto Increment Counter Ionic React Multi Counter

Learn IONIC with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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?

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

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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 →

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?

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?

What are the limitations of Ionic?

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.