Cordova wrapped a web page in a native shell. That solves distribution, but not appearance: a WebView shows whatever HTML you give it, and plain HTML does not look like an iPhone or Android app. Framework7 572,986 is the missing layer. It is an MIT-licensed framework of HTML, CSS and JavaScript components (navbars, tab bars, lists, sheets, dialogs, pickers, swipe-back navigation) that follow Apple's iOS design and Google's Material Design 15,533 , picking the right one for the device at startup.
This chapter uses Framework7 9.1.3, released in August 2026. Version 9 restyled every component for iOS 26 and updated the Material theme to the latest Material You color schemes. Two themes remain, iOS and Material: the desktop-oriented Aurora theme you may find in older tutorials was removed in version 8. The chapter teaches Framework7 Core, the plain-JavaScript flavor, and then shows how the same components are used from React 7,897 and Vue 5,482 .
Everything here runs in a browser. You develop against Vite 25,978 's dev server, check both themes in Chrome 1 at phone width, and finish with an installable Progressive Web App. Turning that app into an Android or iOS package is the job of Cordova 129 (Cordova) and Capacitor 243,123 (Capacitor), so this chapter points to them instead of repeating their builds.
The running example is BookNest, a small bookshop app. It starts as a single page that lists six sample books, from The Quiet Harbor (fiction, $14.99) to Patterns of the Deep Web (technology, $39.50), and one of them, Salt and Saffron, is out of stock so the app has something to warn about. Section by section, BookNest gains a tab bar, a book detail page reached through the router, live search, a checkout form, a cart in a sheet modal, a filter panel, and a Store that keeps the cart in one place. The same six books appear in the Cordova, React Native 36,878 , Capacitor and Kotlin versions of BookNest in the other chapters, so you can compare the screens side by side.
What you will learn:
Where Framework7 fits beside Cordova, Capacitor, React Native and native Kotlin, and how it is licensed and released
Creating a project with the Framework7 CLI 89 and running it on Vite
The app, view and page hierarchy, and the iOS and Material themes with their color schemes
Navbars, toolbars, tabs, the router, page lifecycle events and async routes
Lists, cards, forms, pickers, searchbars, dialogs, popups, sheets and side panels
Swipeout, virtual lists, infinite scroll, the photo browser and Swiper 135,050
Dom7 163 , the app instance and the built-in Store for shared state
Framework7 React and Vue, a production build, and packaging BookNest as a PWA
How Framework7 compares with Ionic 20,753 , Onsen UI 450,074 , Konsta UI and Quasar 295,643
Sections
- Framework7 Landscape
- BookNest Setup
- App Layout and Initialization
- Themes and Color Schemes
- Navbars, Toolbars and Tabs
- Routes and Navigation
- Lifecycle and Async Routes
- Routable Tabs and Split View
- Lists, Cards and Catalog
- Forms, Inputs and Smart Select
- Calendar, Picker and Search
- Dialogs and Overlays
- Lists and Scrolling
- Photos, Swiper, Messages
- Dom7, App API and Store
- React, Vue, PWA, Native
- Comparing UI Frameworks
- Test Yourself!