Overview of Mesop
mainMesop is an open-source Python package designed for building user interfaces (UIs) quickly. It is used at Google for rapid internal application development.
Mesop Documentation
repository·main·Indexed 24 days ago
https://github.com/mesop-dev/mesopMesop is an open-source Python-based UI framework designed for the rapid development of web applications, demos, and internal tools. It enables developers to build custom UIs using idiomatic Python without requiring JavaScript, CSS, or HTML. The framework includes features for programmatic navigation, component focusing, and state session caching with backends supporting memory, file, SQL, and Firestore.
What's inside Mesop
Overview of Mesop Web Components
mainMesop supports custom web components, an experimental feature (released under labs) that allows you to use web standards (JavaScript and CSS) to define custom HTML elements. This enables you to extend Mesop's capabilities beyond standard Python components.
Key Use Cases:
- Custom JavaScript: Execute custom JS with simple bi-directional communication between the browser and the Python server.
- JavaScript Libraries: Wrap existing JS libraries into a web component to use them within Mesop.
- Rich Client-side Interactivity: Implement stateful client-side interactions that do not require a network roundtrip to the server.
Overview of Mesop
mainMesop is a Python-based UI framework designed for rapid web application development, specifically targeting engineers without extensive frontend experience. It allows developers to build web UIs using idiomatic Python code while leveraging the mature Angular web framework and Angular Material components under the hood.
Key features include:
- A fast build-edit-refresh loop via hot reload.
- A flexible and composable components API.
- Easy deployment using standard HTTP technologies like Server-Sent Events (SSE).
Display images with the Image component
mainTheimagecomponent in Mesop is the equivalent of the HTML<img>element. It allows you to render images within your web application by providing a source URL or path.Use the Audio component
mainTheaudiocomponent provides a way to embed audio content in your Mesop application using the browser's native<audio>HTML element controls. It allows users to play, pause, and seek through audio files directly within the UI.Use the Checkbox component
mainThecheckboxcomponent is a multi-selection form control based on Angular Material. It allows users to select or deselect options within a web application.Understand Mesop's JavaScript and Content Security Policy
mainMesop uses Angular's built-in security protections and enforces a strict Content Security Policy (CSP).
- Mesop APIs prevent arbitrary JavaScript execution in the main context (e.g., the
markdowncomponent sanitizes content to remove active HTML/JavaScript). - The default CSP prevents arbitrary JavaScript execution unless it complies with Angular's Trusted Types policies.
- Mesop APIs prevent arbitrary JavaScript execution in the main context (e.g., the
Apply styles to components using the Mesop Style API
mainMesop provides a Python API that wraps the browser's native CSSstyleAPI. You can use these helpers to apply inline styles to components, allowing for fine-grained control over layout and appearance.Use the Date Picker component
mainThedate_pickercomponent allows users to enter a date via free text or by selecting a date from a calendar widget. It is based on the Angular Material datepicker component.Render Matplotlib figures with the Plot component
mainTheplotcomponent allows you to render Matplotlib figures directly in a Mesop application as an image. This is useful for visualizing data within your web app.Compare Mesop component extensibility with Streamlit and Gradio
mainFor building custom interfaces:
- Streamlit: Uses custom components rendered in iframes (often React-based) for isolation.
- Gradio: Offers pre-built ML components and allows custom components via Python and JavaScript (Svelte).
- Mesop: Uses general-purpose UI components that can be composed into higher-level components (like
chat). It supports creating custom web components based on open web standards (e.g., Lit), which are rendered in the same frame as the rest of the app for high flexibility.
Use the Radio component for single selection
mainTheradiocomponent is a single selection form control based on Angular Material. It allows users to select one option from a set of predefined choices.