Skip to content
Get packs

Guide · Open source

How to use Framework7: install, build and package mobile-style apps

Updated · written with AI from the project's own documentation and checked against our catalogue data

Framework7 is an open-source HTML framework for building mobile-style apps that look like native iOS and Android apps. This guide explains what it is, how to get the source from its README, and what you need to know before you start building. By the end you will know who it suits, what the README does and does not cover, and where to go next.

Framework7framework7io/framework7 · ★ 18.8k · MIT

Quick start

  1. 1Clone the repository. Run the git clone command from the README to download the Framework7 source into a local folder.
  2. 2Read the README. Open the README in the cloned folder and confirm the setup steps, since the online copy used for this guide is truncated.
  3. 3Explore the project files. Look through the repository to see how the components and documentation are organised.
  4. 4Build a single screen. Use HTML, CSS and JavaScript with the framework's interface components to build one mobile-style screen.
  5. 5Test in a browser. Open your screen in a browser and check the layout before adding more screens.
  6. 6Decide how to package the app. Look up the packaging steps in the official documentation for your target iOS or Android platform.
  7. 7Check maintenance status. Review recent activity on the GitHub repository before relying on it for a long-term project.

What is Framework7 and who is it for?

Framework7 provides ready-made interface components styled to look like native iOS and Android apps. You build the screens with web technologies (HTML, CSS and JavaScript), and the result can then be packaged as a native app.

It suits developers who already know HTML, CSS and JavaScript and want to build mobile-style apps without learning a native UI toolkit. It is a poor fit for beginners with no web background, because the framework assumes working knowledge of web code.

  • Good fit: web developers building iOS- or Android-looking interfaces
  • Good fit: projects that want an MIT-licensed, free-to-use mobile UI framework
  • Poor fit: apps that need full native performance or device APIs beyond what a web-based app can reach

Get the Framework7 source code

The README gives one install command: cloning the repository from GitHub. Run it in the folder where you want the project to live.

The README lists no other prerequisites, so check the repository for any tooling you need before you start.

git clone https://github.com/framework7io/framework7

Explore the README and the project files

The README describes Framework7 as a full-featured mobile HTML framework. Read it first to confirm the current setup steps, since the copy available for this guide is truncated and does not list the component set or packaging steps.

Once cloned, look through the repository's files and documentation to see how the components are organised and how the project is structured.

  • Start with the README in the repository root
  • Check the official site at framework7.io for documentation

Build a mobile-style screen with web code

Framework7 is used to build app screens with HTML, CSS and JavaScript. Work from the components and examples in the project to lay out a screen that looks like a native iOS or Android page.

Test the screen in a browser while you build it. Keep the structure simple at first: one screen, one set of components, then add more.

  • Use the ready-made interface components rather than writing every control from scratch
  • Keep your HTML, CSS and JavaScript in clearly named files so the project stays easy to follow

Package the app for iOS or Android

Framework7 is described as a way to build apps that can then be packaged as native apps. The README does not describe the packaging steps, so consult the official documentation or the wider community for the tooling that fits your target platform.

Keep the packaging decision in mind early, because it affects which device features your app can reach.

Check maintenance before you commit

The README's build badges point to older services, and the text available here gives no details about ongoing maintenance. If your project depends on long-term support guarantees, review the repository's activity and open issues before you commit.

Comparable projects include Ionic Framework, Onsen UI and Quasar Framework. Konsta UI is also listed as an alternative.

  • Review recent commits and open issues on GitHub
  • Compare the options against your platform and support needs

What people use it for

  • Building an iOS-style or Android-style interface for a web developer's mobile project
  • Prototyping mobile-style app screens with web code before deciding on a native build
  • Creating an MIT-licensed mobile UI for a project that needs no licence fees for the framework itself

Frequently asked questions

Is Framework7 free to use?

Framework7 is an MIT-licensed open source project, so you can use it under the terms of that licence. The README also says its development is supported by backers and sponsors on Patreon.

What do I need before I start with Framework7?

You need working knowledge of HTML, CSS and JavaScript, because the framework assumes it. The README lists no other prerequisites, so check the repository for any tooling your setup needs.

How do I install Framework7?

The README's install command is git clone https://github.com/framework7io/framework7. Run it in the folder where you want the project, then follow the setup steps in the README.

Can Framework7 apps be published as native apps?

The README says Framework7 apps built with web technologies can be packaged as native apps. It does not describe the packaging steps, so check the official documentation for your target platform.

What are the alternatives to Framework7?

Comparable projects named in the source include Ionic Framework, Onsen UI and Quasar Framework. Konsta UI is also listed as an alternative.

Is Framework7 still maintained?

The text available here does not give maintenance details, and the README's build badges reference older services. Check recent commits and open issues on GitHub before relying on it for a long-term project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Framework7 suits web developers who already know HTML, CSS and JavaScript and want MIT-licensed mobile-style interfaces for iOS and Android. Pick something else if you need full native performance, device APIs beyond a web app's reach, or a guaranteed long-term support commitment, and consider the listed alternatives such as Ionic Framework or Quasar Framework.

Install options & downloads