Learn Framework7 - 5 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 5 Framework7 code examples →

Framework7 Simple Todo App Framework7 Counter App Framework7 Step Counter Framework7 Multi Counter Framework7 Dark Mode Counter

Learn FRAMEWORK7 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

Framework7 Simple Todo App

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Todo App</div></div>
        <div class="page-content">
        <input type="text" id="todoInput" placeholder="New Todo">
        <button onclick="addTodo()">Add</button>
        <ul id="todoList"></ul>
        </div>
        </div>
        </div>
        </div>

        <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 li = document.createElement('li');
        li.textContent = todo;
        list.appendChild(li);
        });
        }
        </script>
    </body>
</html>

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

Let’s Try →

Framework7 Counter App

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Counter App</div></div>
        <div class="page-content" style="text-align:center;">
        <p id="count" style="font-size:24px;">0</p>
        <button onclick="increment()">+</button>
        <button onclick="decrement()">-</button>
        <button onclick="reset()">Reset</button>
        </div>
        </div>
        </div>
        </div>

        <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 Framework7 components.

Let’s Try →

Framework7 Step Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Step Counter</div></div>
        <div class="page-content" style="text-align:center;">
        <input type="number" id="step" placeholder="Step" style="width:50px;">
        <p id="count" style="font-size:24px;">0</p>
        <button onclick="increment()">+</button>
        <button onclick="decrement()">-</button>
        <button onclick="reset()">Reset</button>
        </div>
        </div>
        </div>
        </div>

        <script>
        let count = 0;
        function getStep() { return parseInt(document.getElementById('step').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 Framework7 components.

Let’s Try →

Framework7 Multi Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Multi Counter</div></div>
        <div class="page-content" style="text-align:center;">
        <p id="count1" style="font-size:24px;">0</p>
        <p id="count2" style="font-size:24px;">0</p>
        <button onclick="increment(1)">+ Counter 1</button>
        <button onclick="increment(2)">+ Counter 2</button>
        </div>
        </div>
        </div>
        </div>

        <script>
        let counters = [0,0];
        function render() {
        document.getElementById('count1').textContent = counters[0];
        document.getElementById('count2').textContent = counters[1];
        }
        function increment(i) { counters[i-1]++; render(); }
        render();
        </script>
    </body>
</html>

Multiple independent counters in a single view using Framework7.

Let’s Try →

Framework7 Dark Mode Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
        <style>
        .dark { background-color:#333; color:#fff; }
        .light { background-color:#fff; color:#000; }
        </style>
    </head>
    <body class="light">
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Dark Mode Counter</div></div>
        <div class="page-content" style="text-align:center;">
        <p id="count" style="font-size:24px;">0</p>
        <button onclick="increment()">+</button>
        <button onclick="decrement()">-</button>
        <button onclick="reset()">Reset</button>
        <button onclick="toggleTheme()">Toggle Theme</button>
        </div>
        </div>
        </div>
        </div>

        <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 Framework7.

Let’s Try →

Frequently Asked Questions about Framework7

What is Framework7?

What are the primary use cases for Framework7?

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 Framework7?

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 Framework7?

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 Framework7 typing speed?

CodeSpeedTest offers 5+ real Framework7 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 Framework7 - 5 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Framework7 Simple Todo App

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Todo App</div></div>
        <div class="page-content">
        <input type="text" id="todoInput" placeholder="New Todo">
        <button onclick="addTodo()">Add</button>
        <ul id="todoList"></ul>
        </div>
        </div>
        </div>
        </div>

        <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 li = document.createElement('li');
        li.textContent = todo;
        list.appendChild(li);
        });
        }
        </script>
    </body>
</html>

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

Let’s Try →

Framework7 Counter App

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Counter App</div></div>
        <div class="page-content" style="text-align:center;">
        <p id="count" style="font-size:24px;">0</p>
        <button onclick="increment()">+</button>
        <button onclick="decrement()">-</button>
        <button onclick="reset()">Reset</button>
        </div>
        </div>
        </div>
        </div>

        <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 Framework7 components.

Let’s Try →

Framework7 Step Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Step Counter</div></div>
        <div class="page-content" style="text-align:center;">
        <input type="number" id="step" placeholder="Step" style="width:50px;">
        <p id="count" style="font-size:24px;">0</p>
        <button onclick="increment()">+</button>
        <button onclick="decrement()">-</button>
        <button onclick="reset()">Reset</button>
        </div>
        </div>
        </div>
        </div>

        <script>
        let count = 0;
        function getStep() { return parseInt(document.getElementById('step').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 Framework7 components.

Let’s Try →

Framework7 Multi Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Multi Counter</div></div>
        <div class="page-content" style="text-align:center;">
        <p id="count1" style="font-size:24px;">0</p>
        <p id="count2" style="font-size:24px;">0</p>
        <button onclick="increment(1)">+ Counter 1</button>
        <button onclick="increment(2)">+ Counter 2</button>
        </div>
        </div>
        </div>
        </div>

        <script>
        let counters = [0,0];
        function render() {
        document.getElementById('count1').textContent = counters[0];
        document.getElementById('count2').textContent = counters[1];
        }
        function increment(i) { counters[i-1]++; render(); }
        render();
        </script>
    </body>
</html>

Multiple independent counters in a single view using Framework7.

Let’s Try →

Framework7 Dark Mode Counter

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
        <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
        <style>
        .dark { background-color:#333; color:#fff; }
        .light { background-color:#fff; color:#000; }
        </style>
    </head>
    <body class="light">
        <div id="app">
        <div class="view view-main">
        <div class="page">
        <div class="navbar"><div class="title">Dark Mode Counter</div></div>
        <div class="page-content" style="text-align:center;">
        <p id="count" style="font-size:24px;">0</p>
        <button onclick="increment()">+</button>
        <button onclick="decrement()">-</button>
        <button onclick="reset()">Reset</button>
        <button onclick="toggleTheme()">Toggle Theme</button>
        </div>
        </div>
        </div>
        </div>

        <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 Framework7.

Let’s Try →

Frequently Asked Questions about Framework7

What is Framework7?

What are the primary use cases for Framework7?

What are the strengths of Framework7?

What are the limitations of Framework7?

How can I practice Framework7 typing speed?

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