Framework7 is a free and open-source full-featured mobile HTML framework designed for building iOS & Android native-like apps using web technologies. It provides highly customizable UI components that mimic the native look and feel of iOS and Material Design, enabling developers to create progressive web apps (PWAs) or hybrid apps with Cordova/Capacitor. Currently in version 9.0.3, the project demonstrates an active release cadence with frequent patch updates and significant major version releases (like v9.0.0) that introduce new features and breaking changes. Its key differentiators include extensive theming capabilities, a component library that supports Vue, React, and Svelte (alongside plain JavaScript), and a strong focus on performance and a native user experience without relying on external frameworks like React or Vue for its core functionality.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
The primary way to import the Framework7 class. 'framework7/bundle' includes all features and components. Use 'framework7/lite-bundle' for a smaller footprint.
import Framework7 from 'framework7/bundle';
It's crucial to import the main CSS bundle for Framework7 to apply its styles. Alternative imports exist for specific themes like 'framework7/css/ios-bundle' or 'framework7/css/md-bundle'.
import 'framework7/css/bundle';
After initializing Framework7 globally (e.g., `new Framework7(...)`), the `f7` named export from the main package provides access to the initialized app instance across components. Avoid `new Framework7()` more than once.
import { f7 } from 'framework7';
This quickstart demonstrates how to set up a basic Framework7 v9 app with a home page, a navigation bar, and a routed 'about' page, including the necessary HTML structure, CSS, and app initialization with a view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Framework7 v9 App</title>
<!-- Framework7 CSS is imported via JS for modern setups -->
</head>
<body>
<div id="app">
<div class="view view-main">
<div data-name="home" class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">My F7 App</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Welcome to Framework7 v9!</p>
<p>This is a basic app setup with navigation.</p>
</div>
<div class="list">
<ul>
<li>
<a href="/about/" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Go to About</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="module">
import Framework7 from 'framework7/bundle';
import 'framework7/css/bundle';
const app = new Framework7({
root: '#app', // App root element
name: 'MyFramework7App', // App name
id: 'com.example.myapp', // App id
theme: 'auto', // Automatic theme detection
routes: [
{
path: '/',
url: './index.html',
},
{
path: '/about/',
content: `
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">About Page</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>This is the about page content.</p>
</div>
</div>
</div>
`,
},
],
});
app.views.create('.view-main', { url: '/' });
console.log('Framework7 app initialized successfully!');
</script>
</body>
</html>
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.