Flask-Meld is a library to provide server rendered templates over websockets for Flask applications to build reactive components without Javascript

mikeabrahamsen, updated 🕥 2022-01-22 20:57:59


Official Website - Flask-Meld.dev

Project inspiration (outdated examples) - Ditch Javascript Frameworks For Pure Python Joy

Join the community on Discord - https://discord.gg/DMgSwwdahN

Meld is a framework for Flask to meld your frontend and backend code. What does that mean? It means you can enjoy writing dynamic user interfaces in pure Python.

Less context switching. No need to write javascript. More fun!

Flask-Meld Developer information


Installing test requirements

sh pip install -r tests/requirements.txt playwright install

Run with browser tests


run tests


to watch the browser tests

pytest --headed ```

Run without browser tests

sh pytest --ignore=tests/browser


Dependency issue

opened on 2022-11-15 10:12:17 by israel-oye

When I install flask-meld, it says flask-meld 0.13.1 requires click==7.1.2, but you have click 8.1.3 which is incompatible because flask-2.2.2 requires click>=8.0

Downgrading Flask does NOT solve the issue either as flask-sqlalchemy-3.0.2 requires flask>=2.2.2

To reproduce: pip install flask-meld pip install flask==2.0.3

Cannot use SQLAlchemy models: "Object of type XYZ is not JSON serializable"

opened on 2022-05-25 13:18:40 by kemaleren

I cannot recreate the search example on https://www.flask-meld.dev/ which shows the function users() running a query and returning the results. Then the template directly uses those objects, such as in <h3>{{ user.name }}</h3>.

When I try to recreate that pattern, I get an exception: TypeError: Object of type XYZ is not JSON serializable, related to line 259 in componenty.py.

I was hoping that since the templates were rendered on the server, I would not need to write a serializer for my models. Is that not correct?

Erroron on load

opened on 2021-09-14 08:23:42 by systematicanet

Updated to the last flask-meld with pip. I have this error on loading of a page using meld component

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

And then I'm not able to have a component working (with a previous version it work)

File uploads

opened on 2021-07-17 05:44:47 by JarriqTheTechie

Is there a process to upload files using a component?

Recaptcha field disappears

opened on 2021-06-24 17:47:33 by mikeabrahamsen

Example of google recaptcha that will disappear when using form validation https://user-images.githubusercontent.com/467659/123309097-b8e9eb00-d4e1-11eb-868f-ef595a63256c.mp4

Add a diagram of the project layout to guide new users.

opened on 2021-05-18 23:29:38 by aambrioso1

Beginning at the following paragraph the README shows new users how to build a minimal app that illustrates what is possible with Flask-Meld:


A tree showing the project layout would be helpful.


v0.13.1 2021-11-20 03:29:29

What's Changed

  • bind field render_kw args to extend form field binding
  • Add info about usage of components by @eruvanos in https://github.com/mikeabrahamsen/Flask-Meld/pull/44

Full Changelog: https://github.com/mikeabrahamsen/Flask-Meld/compare/0.13.0...0.13.1

v0.13.0 2021-11-06 19:03:25

Full Changelog: https://github.com/mikeabrahamsen/Flask-Meld/compare/0.7.0...0.13.0

What's Changed

  • added example of passing data to a meld component by @olierxleben in https://github.com/mikeabrahamsen/Flask-Meld/pull/33
  • Add basic documentation by @mikeabrahamsen in https://github.com/mikeabrahamsen/Flask-Meld/pull/34
  • Fix broken Application Factory link in index.md (Issue #35) by @aambrioso1 in https://github.com/mikeabrahamsen/Flask-Meld/pull/36
  • Use flask root_path for path references by @eruvanos in https://github.com/mikeabrahamsen/Flask-Meld/pull/43

New Contributors

  • @olierxleben made their first contribution in https://github.com/mikeabrahamsen/Flask-Meld/pull/33

Full Changelog: https://github.com/mikeabrahamsen/Flask-Meld/compare/0.7.0...0.13.0

0.7.0 2021-05-24 20:31:48

  • Added event system to Emit and Listen for events between components (Thank you @erik-hasse)
  • Added source maps for JS (Thank you @RusinR)
  • Added a CLI option to create a component (Thank you @RusinR )
  • Modified CLI commands
  • 'meld new project name_of_project`
  • 'meld new component name_of_component` (Thank you @RusinR)
  • SECRET_KEY will be generated automatically if not found as ENV VAR
  • Fixed examples: no longer use HTML comments as they cause issues when copying to template files (Thank you @aambrioso1)
  • Added example of passing variables to Meld components (Thank you @olierxleben)

These changes were made as part of the PyCon 2021 code sprint. Huge thank you to everyone involved, these contributions have helped extend the capabilities of Meld as well as make it easier for new users to get started!

Meld CLI 2021-04-28 18:12:32

The fastest way to get started with Flask-Meld

Install flask-meld to your Python environment: pip install flask-meld

  1. Replace "project_name" with the name of your project meld new project_name

  2. Change to your project_name directory and install requirements cd project_name; pip install -r requirements.txt

  3. Run the flask-meld development server flask run

Michael Abrahamsen

Helping Python developers deploy applications at conveyor.dev

GitHub Repository Homepage

flask python