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 →

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 →