Skip to content

Web Components

Note: Web components are a new experimental feature released under labs and may have breaking changes.

Mesop allows you to define custom components with web components which is a set of web standards that allows you to use JavaScript and CSS to define custom HTML elements.

Use cases

  • Custom JavaScript - You can execute custom JavaScript and have simple bi-directional communication between the JavaScript code running in the browser and the Python code running the server.

  • JavaScript libraries - If you want to use a JavaScript library, you can wrap them with a web component.

  • Rich-client side interactivity - You can use web components to deliver stateful client-side interactions without a network roundtrip.

Anatomy of a web component

Mesop web component consists of two parts:

  • Python module - defines a Python API so that your Mesop app can use the web component seamlessly.
  • JavaScript module - implements the web component.

Next steps

Learn how to build your first web component in the quickstart page.