Framework7

9.0.3 · active · verified Sun Apr 19

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.

Common errors

```
TypeError: Framework7 is not a constructor
```
cause 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
```
cause 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
```
cause 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.

Warnings

breaking The `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.
breaking In 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.
gotcha Using 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.

Install

npm install framework7 npm
yarn add framework7 yarn
pnpm add framework7 pnpm

Imports

Framework7
wrong:
```
const Framework7 = require('framework7');
```
correct:
```
import Framework7 from 'framework7/bundle';
```
The primary way to import the Framework7 class. 'framework7/bundle' includes all features and components. Use 'framework7/lite-bundle' for a smaller footprint.
styles
wrong:
```
require('framework7/css/bundle.css');
```
correct:
```
import 'framework7/css/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'.
f7 (instance)
wrong:
```
const f7 = new Framework7();
```
correct:
```
import { f7 } from '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.

Quickstart

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>

view raw JSON →