Framework7 — Full-Featured Mobile UI Framework for iOS and Android

Introduction

Framework7 is an open-source UI framework for building cross-platform mobile, desktop, and web apps with a native look and feel. It provides pixel-perfect iOS and Android (Material Design) components out of the box, letting web developers create mobile apps using familiar HTML, CSS, and JavaScript without learning native SDKs.

What Framework7 Does

• Renders native-quality iOS and Material Design interfaces using HTML and CSS
• Includes 100+ UI components like navigation bars, modals, lists, and action sheets
• Supports React, Vue, and Svelte through official bindings
• Provides built-in page transitions, swipe gestures, and pull-to-refresh
• Works standalone or integrates with Capacitor and Cordova for native device access

Architecture Overview

Framework7 uses a view-based router where each view manages its own page stack and navigation history. The core is a vanilla JavaScript library that handles DOM manipulation, touch events, and component lifecycle. Framework-specific bindings (React, Vue, Svelte) wrap the core components as reactive wrappers. Theming is handled via CSS variables that switch between iOS and Material Design automatically based on the device.

Self-Hosting & Configuration

• Create new projects with the official CLI wizard (framework7-cli)
• Install via npm and integrate into existing React, Vue, or Svelte projects
• Configure theme (ios, md, or auto) in the App component props
• Customize colors and styles via CSS variables without modifying source
• Build for iOS and Android using Capacitor or Cordova for native deployment

Key Features

• Pixel-perfect iOS and Material Design components that adapt automatically
• Built-in swipeable views, infinite scroll, and virtual list for smooth performance
• Integrated router with animated page transitions and nested routes
• Native-grade touch handling with fast click, swipe-back, and gestures
• Standalone mode works without any framework; React/Vue/Svelte are optional

Comparison with Similar Tools

• Ionic — uses Web Components and Angular/React/Vue; Framework7 is lighter and has more opinionated native-style components
• React Native — compiles to native views; Framework7 uses web rendering for simpler deployment
• NativeScript — accesses native APIs directly; Framework7 stays in the web layer for portability
• Onsen UI — similar HTML5 mobile framework; Framework7 has a larger component set and more active updates
• Quasar — Vue-specific with SSR support; Framework7 supports multiple frameworks and focuses on mobile UX

FAQ

Q: Can I build both iOS and Android apps from one codebase? A: Yes. Framework7 auto-detects the platform and applies the matching theme, or you can force a specific theme.

Q: Does Framework7 support PWA? A: Yes, it includes service worker support and app manifest generation for progressive web apps.

Q: How does performance compare to native apps? A: Framework7 uses hardware-accelerated CSS transitions and virtual DOM diffing for near-native scrolling and animation performance.

Q: Can I use Framework7 without React or Vue? A: Yes, the core library works with plain JavaScript and HTML templates without any framework.

Sources

• https://github.com/framework7io/framework7
• https://framework7.io