framework7

library9.0.3jsnpmunverified

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.

web-framework

npm install framework7

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FRAMEWORK7

framework7

web-frameworkjavascriptv9.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Framework7

✓ import Framework7 from 'framework7/bundle';

✗ const Framework7 = require('framework7');

The primary way to import the Framework7 class. 'framework7/bundle' includes all features and components. Use 'framework7/lite-bundle' for a smaller footprint.

styles

✓ import 'framework7/css/bundle';

✗ require('framework7/css/bundle.css');

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

f7 (instance)

✓ import { f7 } from 'framework7';

✗ const f7 = new Framework7();

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.

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>  </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>

Debug

Known issues

breakingThe `dynamicNavbar` functionality has been completely removed in Framework7 v9. Projects migrating from older versions that relied on `dynamicNavbar` will need to refactor their navbar implementations.

fix

Rebuild navbars using the static navbar structure. Ensure each page has its own navbar defined within its content. Refer to the v9 documentation for updated navbar markup.

affects: >=9.0.0

breakingIn Framework7 v9, the default back link text ('Back') in iOS theme navbars is now empty, favoring only the back icon. This change impacts visual consistency for users accustomed to the text.

fix

To re-add the 'Back' text, explicitly define it in the navbar's back link element: `<a href="#" class="link back"><i class="icon icon-back"></i><span>Back</span></a>`. The `if-not-md` class can be used to conditionally show it only for iOS theme.

affects: >=9.0.0

gotchaUsing CommonJS `require()` syntax (e.g., `const Framework7 = require('framework7');`) for importing Framework7 in modern projects configured for ESM can lead to runtime errors or incorrect module resolution.

fix

Always use ES Module `import` syntax (e.g., `import Framework7 from 'framework7/bundle';`) when working in an ESM-enabled environment. Configure your build tools (Webpack, Rollup, Vite) to correctly handle ESM.

affects: >=6.0.0

Errors

Common errors & fixes

TypeError: Framework7 is not a constructor

Attempting to instantiate Framework7 when it's imported incorrectly as a CommonJS module or without specifying the '/bundle' path for the default export.

fix

Ensure you are using `import Framework7 from 'framework7/bundle';` or `import Framework7 from 'framework7';` (if using a build system that resolves the main entry) and your environment supports ES Modules.

Error: View with selector '.view-main' not found

The main view element (`<div class="view view-main">`) is either missing from the HTML or the JavaScript initialization is executed before the DOM is fully loaded.

fix

Verify that your HTML includes `<div class="view view-main">` inside the `root` element and that your `new Framework7()` call and view creation are placed within a `<script type="module">` tag at the end of `<body>` or after a `DOMContentLoaded` event listener.

Theme styles not applied / App looks unstyled

The Framework7 CSS bundle has not been imported or is not loaded correctly, resulting in a plain HTML appearance.

fix

Add `import 'framework7/css/bundle';` (or specific theme CSS like `framework7/css/ios-bundle`) in your main JavaScript entry file. Ensure your build system processes CSS imports.

Upgrade

Version history

9.0.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/framework7io/framework7 ↗

packagehttps://www.npmjs.com/package/framework7 ↗

homepagehttps://framework7.io/ ↗