Learn Onsen-ui - 4 Code Examples & CST Typing Practice Test

Onsen UI is an open-source framework for building hybrid and mobile web apps using HTML5, CSS, and JavaScript. It provides ready-to-use UI components optimized for iOS and Android, supporting frameworks like Angular, React, and Vue.

View all 4 Onsen-ui code examples →

Onsen UI Simple Todo App Onsen UI Counter App Onsen UI Step Counter Onsen UI Dark Mode Counter

Learn ONSEN-UI 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

Onsen UI Simple Todo App

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    </head>
    <body>
        <ons-page>
        <ons-toolbar>
        <div class="center">Todo App</div>
        </ons-toolbar>
        <ons-input id="todoInput" placeholder="New Todo"></ons-input>
        <ons-button onclick="addTodo()">Add</ons-button>
        <ons-list id="todoList"></ons-list>
        </ons-page>

        <script>
        const todos = [];
        function addTodo() {
        const input = document.getElementById('todoInput');
        if(input.value.trim()) {
        todos.push(input.value.trim());
        input.value = '';
        renderTodos();
        }
        }
        function renderTodos() {
        const list = document.getElementById('todoList');
        list.innerHTML = '';
        todos.forEach(todo => {
        const item = document.createElement('ons-list-item');
        item.textContent = todo;
        list.appendChild(item);
        });
        }
        </script>
    </body>
</html>

Demonstrates a simple Onsen UI app with a Todo list, adding tasks, and displaying them using Onsen UI components.

Let’s Try →

Onsen UI Counter App

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    </head>
    <body>
        <ons-page>
        <ons-toolbar>
        <div class="center">Counter App</div>
        </ons-toolbar>
        <ons-text id="count" style="font-size:24px; display:block; text-align:center; margin:10px;">0</ons-text>
        <ons-button onclick="increment()">+</ons-button>
        <ons-button onclick="decrement()">-</ons-button>
        <ons-button onclick="reset()">Reset</ons-button>
        </ons-page>

        <script>
        let count = 0;
        function render() {
        document.getElementById('count').textContent = count;
        }
        function increment() { count++; render(); }
        function decrement() { count--; render(); }
        function reset() { count = 0; render(); }
        </script>
    </body>
</html>

A simple counter app with increment, decrement, and reset buttons using Onsen UI components.

Let’s Try →

Onsen UI Step Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    </head>
    <body>
        <ons-page>
        <ons-toolbar>
        <div class="center">Step Counter</div>
        </ons-toolbar>
        <ons-input id="stepInput" placeholder="Step"></ons-input>
        <ons-text id="count" style="font-size:24px; display:block; text-align:center; margin:10px;">0</ons-text>
        <ons-button onclick="increment()">+</ons-button>
        <ons-button onclick="decrement()">-</ons-button>
        <ons-button onclick="reset()">Reset</ons-button>
        </ons-page>

        <script>
        let count = 0;
        function getStep() { return parseInt(document.getElementById('stepInput').value || '1'); }
        function render() { document.getElementById('count').textContent = count; }
        function increment() { count += getStep(); render(); }
        function decrement() { count -= getStep(); render(); }
        function reset() { count = 0; render(); }
        </script>
    </body>
</html>

Counter app with customizable step increment using Onsen UI components.

Let’s Try →

Onsen UI Dark Mode Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
        <style>
        .dark { background-color:#333; color:#fff; }
        .light { background-color:#fff; color:#000; }
        </style>
    </head>
    <body class="light">
        <ons-page>
        <ons-toolbar>
        <div class="center">Dark Mode Counter</div>
        </ons-toolbar>
        <ons-text id="count" style="font-size:24px; display:block; text-align:center; margin:10px;">0</ons-text>
        <ons-button onclick="increment()">+</ons-button>
        <ons-button onclick="decrement()">-</ons-button>
        <ons-button onclick="reset()">Reset</ons-button>
        <ons-button onclick="toggleTheme()">Toggle Theme</ons-button>
        </ons-page>

        <script>
        let count = 0;
        function render() { document.getElementById('count').textContent = count; }
        function increment() { count++; render(); }
        function decrement() { count--; render(); }
        function reset() { count = 0; render(); }
        function toggleTheme() {
        document.body.className = document.body.className === 'light' ? 'dark' : 'light';
        }
        </script>
    </body>
</html>

Counter app with light/dark theme toggle using Onsen UI.

Let’s Try →

Frequently Asked Questions about Onsen-ui

What is Onsen-ui?

What are the primary use cases for Onsen-ui?

Hybrid mobile apps for iOS and Android. Progressive Web Apps (PWAs). Rapid prototyping of mobile interfaces. Apps needing consistent cross-platform UI. Integration with Angular, React, or Vue frameworks

What are the strengths of Onsen-ui?

Single codebase for multiple platforms. Native-like UI without writing native code. Works with major JS frameworks or plain JS. Lightweight and fast for hybrid apps. Good documentation and example projects

What are the limitations of Onsen-ui?

Less performant than fully native apps for heavy UI tasks. Some complex native features require Cordova/Capacitor plugins. Smaller community compared to React Native or Flutter. Limited ecosystem of third-party components. Debugging hybrid apps may be trickier than native apps

How can I practice Onsen-ui typing speed?

CodeSpeedTest offers 4+ real Onsen-ui 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 →

Learn Onsen-ui - 4 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Onsen UI Simple Todo App

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    </head>
    <body>
        <ons-page>
        <ons-toolbar>
        <div class="center">Todo App</div>
        </ons-toolbar>
        <ons-input id="todoInput" placeholder="New Todo"></ons-input>
        <ons-button onclick="addTodo()">Add</ons-button>
        <ons-list id="todoList"></ons-list>
        </ons-page>

        <script>
        const todos = [];
        function addTodo() {
        const input = document.getElementById('todoInput');
        if(input.value.trim()) {
        todos.push(input.value.trim());
        input.value = '';
        renderTodos();
        }
        }
        function renderTodos() {
        const list = document.getElementById('todoList');
        list.innerHTML = '';
        todos.forEach(todo => {
        const item = document.createElement('ons-list-item');
        item.textContent = todo;
        list.appendChild(item);
        });
        }
        </script>
    </body>
</html>

Demonstrates a simple Onsen UI app with a Todo list, adding tasks, and displaying them using Onsen UI components.

Let’s Try →

Onsen UI Counter App

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    </head>
    <body>
        <ons-page>
        <ons-toolbar>
        <div class="center">Counter App</div>
        </ons-toolbar>
        <ons-text id="count" style="font-size:24px; display:block; text-align:center; margin:10px;">0</ons-text>
        <ons-button onclick="increment()">+</ons-button>
        <ons-button onclick="decrement()">-</ons-button>
        <ons-button onclick="reset()">Reset</ons-button>
        </ons-page>

        <script>
        let count = 0;
        function render() {
        document.getElementById('count').textContent = count;
        }
        function increment() { count++; render(); }
        function decrement() { count--; render(); }
        function reset() { count = 0; render(); }
        </script>
    </body>
</html>

A simple counter app with increment, decrement, and reset buttons using Onsen UI components.

Let’s Try →

Onsen UI Step Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    </head>
    <body>
        <ons-page>
        <ons-toolbar>
        <div class="center">Step Counter</div>
        </ons-toolbar>
        <ons-input id="stepInput" placeholder="Step"></ons-input>
        <ons-text id="count" style="font-size:24px; display:block; text-align:center; margin:10px;">0</ons-text>
        <ons-button onclick="increment()">+</ons-button>
        <ons-button onclick="decrement()">-</ons-button>
        <ons-button onclick="reset()">Reset</ons-button>
        </ons-page>

        <script>
        let count = 0;
        function getStep() { return parseInt(document.getElementById('stepInput').value || '1'); }
        function render() { document.getElementById('count').textContent = count; }
        function increment() { count += getStep(); render(); }
        function decrement() { count -= getStep(); render(); }
        function reset() { count = 0; render(); }
        </script>
    </body>
</html>

Counter app with customizable step increment using Onsen UI components.

Let’s Try →

Onsen UI Dark Mode Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
        <style>
        .dark { background-color:#333; color:#fff; }
        .light { background-color:#fff; color:#000; }
        </style>
    </head>
    <body class="light">
        <ons-page>
        <ons-toolbar>
        <div class="center">Dark Mode Counter</div>
        </ons-toolbar>
        <ons-text id="count" style="font-size:24px; display:block; text-align:center; margin:10px;">0</ons-text>
        <ons-button onclick="increment()">+</ons-button>
        <ons-button onclick="decrement()">-</ons-button>
        <ons-button onclick="reset()">Reset</ons-button>
        <ons-button onclick="toggleTheme()">Toggle Theme</ons-button>
        </ons-page>

        <script>
        let count = 0;
        function render() { document.getElementById('count').textContent = count; }
        function increment() { count++; render(); }
        function decrement() { count--; render(); }
        function reset() { count = 0; render(); }
        function toggleTheme() {
        document.body.className = document.body.className === 'light' ? 'dark' : 'light';
        }
        </script>
    </body>
</html>

Counter app with light/dark theme toggle using Onsen UI.

Let’s Try →

Frequently Asked Questions about Onsen-ui

What is Onsen-ui?

What are the primary use cases for Onsen-ui?

What are the strengths of Onsen-ui?

What are the limitations of Onsen-ui?

How can I practice Onsen-ui typing speed?

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