{"id":10919,"library":"framework7","title":"Framework7","description":"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.","status":"active","version":"9.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/framework7io/framework7","tags":["javascript","mobile","framework","framework7","cordova","ios","iphone","ipad","apple","typescript"],"install":[{"cmd":"npm install framework7","lang":"bash","label":"npm"},{"cmd":"yarn add framework7","lang":"bash","label":"yarn"},{"cmd":"pnpm add framework7","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary way to import the Framework7 class. 'framework7/bundle' includes all features and components. Use 'framework7/lite-bundle' for a smaller footprint.","wrong":"const Framework7 = require('framework7');","symbol":"Framework7","correct":"import Framework7 from 'framework7/bundle';"},{"note":"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'.","wrong":"require('framework7/css/bundle.css');","symbol":"styles","correct":"import 'framework7/css/bundle';"},{"note":"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.","wrong":"const f7 = new Framework7();","symbol":"f7 (instance)","correct":"import { f7 } from 'framework7';"}],"quickstart":{"code":"\n\n\n \n \n Framework7 v9 App\n \n\n\n
\n
\n
\n
\n
\n
\n
My F7 App
\n
\n
\n
\n
\n

Welcome to Framework7 v9!

\n

This is a basic app setup with navigation.

\n
\n
\n \n
\n
\n
\n
\n
\n\n \n\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"To re-add the 'Back' text, explicitly define it in the navbar's back link element: `Back`. The `if-not-md` class can be used to conditionally show it only for iOS theme.","message":"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.","severity":"breaking","affected_versions":">=9.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to instantiate Framework7 when it's imported incorrectly as a CommonJS module or without specifying the '/bundle' path for the default export.","error":"TypeError: Framework7 is not a constructor"},{"fix":"Verify that your HTML includes `
` inside the `root` element and that your `new Framework7()` call and view creation are placed within a `