Learn ONSEN-UI with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
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.
2
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.
3
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.
4
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.