Framework7 Explained — Build Native-Like Mobile Apps with Web Tech

Framework7 is a full-featured HTML framework for building iOS and Android apps that look and feel native, providing platform-specific UI components, smooth animations, a built-in router with swipe-back gestures, and offline support via service workers.

What You’ll Learn

• How Framework7 creates native-looking UIs for both iOS and Android from the same code
• How the built-in router handles page navigation with transitions and gestures
• How to use Framework7 UI components — navbar, list views, cards, modals, side panels
• How platform-specific styling automatically adapts to iOS or Material Design
• How service workers enable offline support for mobile apps
• How Framework7 integrates with Vue, React, and Svelte

Why Framework7 Matters

Building a mobile app usually means choosing: write native code (Swift for iOS, Kotlin for Android) and maintain two codebases, or use a cross-platform framework. Framework7 lets you build mobile apps using HTML, CSS, and JavaScript — technologies you already know — while delivering a user experience that rivals native apps. The animations, gestures, and UI patterns match each platform’s design language perfectly. At DodaTech, this approach powers hybrid mobile interfaces for Doda Browser companion apps and Durga Antivirus Pro mobile dashboards, delivering native-quality experiences without maintaining separate iOS and Android codebases.

Security note: Understanding Framework7 helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

    flowchart LR
    A[HTML, CSS & JavaScript] --> B[Framework7 Basics]
    B --> C[UI Components]
    B --> D[Router & Navigation]
    C --> E[Platform-Specific Styling]
    D --> E
    E --> F[Service Worker & Offline]
    F --> G[Hybrid Mobile App]
    style B fill:#4a90d9,color:#fff
  

Core Concepts — How Framework7 Thinks

Framework7 embraces a “mobile-first” philosophy. Every component and layout pattern matches the native mobile experience users expect on their phones — not a desktop website squeezed into a mobile viewport.

Pages and Navigation

Every screen in Framework7 is a “page” with a predictable structure:

<!-- Each page has: navbar, content area, optionally a toolbar at bottom -->
<div class="page" data-name="home">
  <!-- Navbar — top bar with title and buttons -->
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">My App</div>
    </div>
  </div>

  <!-- Page content — scrollable area between navbar and toolbar -->
  <div class="page-content">
    <div class="block-title">Welcome</div>
    <div class="block">
      <p>This looks and feels like a native app!</p>
    </div>

    <!-- List view — the most common mobile UI pattern -->
    <div class="list">
      <ul>
        <li>
          <!-- item-link makes the row clickable — navigates to another page -->
          <a href="/about/" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">About</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Why this structure? Native mobile apps follow a standard pattern: a top bar (navbar), a scrollable content area, and optionally a bottom bar (toolbar). By using this structure, Framework7 apps feel familiar to users of iPhone and Android devices. The .block and .list classes create the sectioned look seen in system Settings apps.

Built-in Router — Navigation That Feels Native

Framework7’s router handles page transitions, history, and gestures — including the swipe-back gesture users expect on iOS:

// Initialize Framework7 with routing
const app = new Framework7({
  root: "#app",
  routes: [
    {
      path: "/",
      url: "pages/home.html"
    },
    {
      path: "/about/",
      url: "pages/about.html"
    },
    {
      path: "/users/:id/",
      url: "pages/user.html"
    }
  ]
});

Why a built-in router? In a website, clicking a link reloads the page. In a mobile app, screens slide in from the right, and swiping back feels natural. Framework7’s router provides these native transitions — including iOS-style swipe-back and Android-style shared element transitions — that a regular web router cannot match.

Platform-Specific Styling

Framework7 detects the user’s device and automatically applies the correct design language:

• On iOS: Rounded buttons, translucent navbars, San Francisco font, iOS-style toggles
• On Android: Material Design shadows, ripple effects, Roboto font, MD-style switches

<!-- The same HTML renders differently on each platform -->
<div class="list">
  <ul>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-star"></i></div>
      <div class="item-inner">
        <div class="item-title">Settings</div>
        <!-- On iOS: > chevron ; On Android: arrow icon -->
        <div class="item-after">More</div>
      </div>
    </li>
  </ul>
</div>

UI Components

Framework7 includes all the standard mobile UI components:

// Programmatically open a modal
app.dialog.create({
  title: "Confirm",
  text: "Are you sure you want to delete this item?",
  buttons: [
    { text: "Cancel" },
    { text: "Delete", color: "red", onClick() { /* delete logic */ } }
  ]
}).open();

Service Workers — Offline Support

Framework7 generates a service worker that caches your app’s assets, enabling it to work offline or on slow networks:

// service-worker.js (auto-generated by Framework7)
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("app-v1").then((cache) => {
      return cache.addAll([
        "/",
        "/index.html",
        "/css/app.css",
        "/js/app.js"
      ]);
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Why service workers? Mobile users frequently have unreliable connections (subways, elevators, rural areas). A service worker caches your app’s shell (HTML, CSS, JS) so it loads instantly even offline — just like a native app installed from an app store.

Common Mistakes

1. Using <a> tags without .item-link class in list views: In Framework7, a plain <a> inside a list item won’t trigger the router’s page transition. Always add class="item-link" to enable native-style navigation.

2. Forgetting to initialize the app instance: Framework7 components and router only work after const app = new Framework7({...}) is called. Components created before initialization won’t have event handlers or navigation.

3. Not handling the back button on Android: Android users expect the hardware back button to navigate to the previous page. Use app.router.back() or configure the back button handler in the app initialization.

4. Ignoring safe areas on notched devices: iPhones with notch and Android devices with camera cutouts need proper padding. Use Framework7’s safe-area CSS classes to handle these automatically.

5. Building complex layouts without page-content wrapper: All scrollable content must be inside .page-content. Content outside this wrapper won’t scroll and may overlap with the navbar or toolbar.

Practice Questions

1. How does Framework7 detect which platform the user is on? It checks the user agent string and applies iOS or Material Design theme classes automatically. You can also force a theme with theme: "ios" or theme: "md" in the config.

2. What is the difference between .page and .page-content? .page is the full-screen container that includes navbar, toolbar, and content. .page-content is specifically the scrollable content area between the navbar and toolbar.

3. How does the service worker enable offline support? During installation, the service worker caches specified assets. When the user is offline, the fetch event intercepts network requests and serves the cached versions instead.

4. What does data-name="home" on a .page element do? It gives the page a name that the router uses to match routes. When navigating to a matching route, Framework7 shows this page with the appropriate transition.

5. How do you create a swipe-back gesture in Framework7? Swipe-back is built into the router for iOS theme. On Android, it’s disabled by default to match platform conventions. You can enable it with swipeBackPage: true in the config.

Challenge

Build a settings screen: Create a Framework7 page with a navbar titled “Settings”, a list view with items for “Notifications”, “Privacy”, “Storage”, and “About”, each with a chevron icon on the right. Add a section toggle for “Dark Mode” using Framework7’s toggle component. Add a side panel that slides in from the left with navigation links.

FAQ

Try It Yourself

Create a simple Framework7 app:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@8.3.4/css/framework7-bundle.min.css">
</head>
<body>
  <div id="app">
    <div class="view view-main">
      <div class="page" data-name="home">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">My App</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block-title">Quick Actions</div>
          <div class="list">
            <ul>
              <li>
                <a href="#" class="item-link item-content" onclick="app.dialog.alert('Hello from Framework7!')">
                  <div class="item-inner">
                    <div class="item-title">Say Hello</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/framework7@8.3.4/js/framework7-bundle.min.js"></script>
  <script>
    const app = new Framework7({ root: "#app" });
  </script>
</body>
</html>

Expected output: A mobile-styled page with a navbar titled “My App” and a list item “Say Hello” that shows an alert dialog when tapped. The UI automatically styles for iOS or Android based on your device.

What’s Next

Related terms: HTML, CSS, JavaScript, iOS, Android

What’s Next

Congratulations on completing this Framework7 tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!