Google Mesop Framework: Quick and Easy Web App Building with Python

Overview

Mesop is a Python-based UI framework that allows you to rapidly build web apps like demos and internal apps:

Easy to get started

• Write UI in idiomatic Python code
• Skip the FE learning curve.
• Ready to use components (e.g. chat)

Fast iteration

• Hot reload so the browser automatically reloads and preserves state
• Rich IDE support with strong type safety

Flexible & composable

• Build custom UIs without writing Javascript/CSS/HTML
• Compose your UI into components, which are just Python functions

Why Mesop?

Mesop is a new UI framework that enables Python developers to quickly build delightful web apps in a scalable way.

Many Python UI frameworks are easy to get started with, but customizing beyond the defaults often requires diving into JavaScript, CSS, and HTML — a steep learning curve for many developers.

Mesop provides a different approach, offering a framework that’s both easy to learn and enables flexible UI building, all within Python.

I want to share a couple concrete ways in which Mesop achieves this.

Build UIs with Functions (i.e. Components)

Mesop embraces a component-based philosophy where the entire UI is composed of reusable, building blocks which are called components. Using a component is as simple as calling a Python function. This approach offers several benefits:

• Simplicity: You can use your existing Python knowledge to build UIs quickly and intuitively since components are just functions.
• Maintainability: Complex UIs become easier to manage and understand by breaking them down into smaller, focused components.
• Modularity: Components are self-contained, enabling easy reuse within a project or across different projects.

Installing

If you are familiar with setting up a Python environment, then run the following command in your terminal:

pip install mesop

If you’re not familiar with setting up a Python environment, follow one of the options below.

A. Colab (Recommended for beginners)

Colab is a free hosted Jupyter notebook product provided by Google.

Try Mesop on Colab:

B. Command-line

If you’d like to run Mesop locally on the command-line, follow these steps.

Pre-requisites: Make sure you have Python version 3.10 or later installed by running:

python --version

If you don’t, please download Python.

Create a venv environment

Open the terminal and navigate to a directory:

cd project_directory

Create a virtual environment by using venv, which will avoid Python environment issues. Run:

python -m venv .venv

Activate your virtual environment:

• macOS and Linux:

source .venv/bin/activate

• Windows command prompt:

.venv\Scripts\activate.bat

Once you’ve activated the virtual environment, you will see “.venv” at the start of your terminal prompt.

Install mesop:

pip install mesop

Make sure your Python environment is setup correctly by running a hello world app.

Copy the following hello world code into a file hello_world.py:

hello_world.py

import mesop as me

@me.page()
def app():
  me.text("Hello World")

Then run the following command in your terminal:

mesop hello_world.py

Open the URL printed in the terminal (i.e. http://localhost:32123) in the browser to see your Mesop app loaded.

If you make changes to the code (e.g. change "Hello World" to "Hi"), the Mesop app should be automatically hot reloaded.

FAQ

General

What kinds of apps is Mesop suited for?

Mesop is well-suited for ML/AI demos and internal tools because it enables developers without frontend experience to quickly build web apps. For use cases that prioritize developer experience and velocity, Mesop can be a good choice.

Demanding consumer-facing apps, which have strict requirements in terms of performance, custom UI components, and i18n/localization would not be a good fit for Mesop and other UI frameworks may be more suitable.

How does Mesop compare to other Python UI frameworks?

Because every Python UI framework has a differnet set of trade-offs, I recommend reading Mesop’s philosophy for building UIs.

Is Mesop production-ready?

Dozens of teams at Google have used Mesop to build demos and internal apps.

Although Mesop is pre-v1, we take backwards-compatibilty seriously and avoid backwards incompatible change. This is critical to us because many teams within Google rely on Mesop and we need to not break them.

Occasionally, we will do minor clean-up for our APIs, but we will provide warnings/deprecation notices and provide at least 1 release to migrate to the newer APIs.

Is Mesop an official Google product?

No, Mesop is not an official Google product and Mesop is a 20% project maintained by a small core team of Google engineers with contributions from the broader community.

Deployment

How do I share or deploy my Mesop app?

The best way to share your Mesop app is to deploy it to a cloud service. You can follow our deployment guide for step-by-step instructions to deploy to Google Cloud Run.