Meld is a framework for Flask that allows you to create dynamic user interfaces using Python and the Jinja2 templating engine.
Project description
Flask-Meld
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!
Initialize Meld in your project
Example of how add Flask-Meld to a Flask application
from flask import Flask, render_template
from flask_meld import Meld
app = Flask(__name__)
app.config['SECRET_KEY'] = 'big!secret'
socketio = app.socketio
meld = Meld()
meld.init_app(app)
@app.route('/')
def index():
return render_template("base.html")
if __name__ == '__main__':
socketio.run(app)
Add {% meld_scripts %} to your base html template
<!DOCTYPE html>
<html>
<head>
<title>Meld Example</title>
</head>
<body>
<div>
<!-- Add the line below to include the necessary meld scripts-->
{% meld_scripts %}
{% block content %}
<!-- Using a component in your template is easy! -->
{% meld 'counter' %}
{% endblock %}
</div>
<style>
</style>
</body>
</html>
Components
Components are stored in meld/components either within your application folder or in the base directory of your project.
Components are simple Python classes. No magic here.
Here is an example of a Counter Component:
# app/meld/components/counter.py
from flask_meld.component import Component
class Counter(Component):
count = 0
def add(self):
self.count = int(self.count) + 1
def subtract(self):
self.count = int(self.count) - 1
Templates
Create a component template in templates/meld/counter.html. By creating a file
within the templates/meld directory just include {% meld 'counter' %} where
you want the component to load.
Here is an example for counter:
<!-- templates/meld/counter.html -->
<div>
<button meld:click="subtract">-</button>
<input type="text" meld:model="count" readonly></input>
<button meld:click="add">+</button>
</div>
Let's take a look at that template file in more detail.
The buttons use meld:click to call the add or subtract function of the
Counter component.
The input uses meld:model to bind the input to the count property on the
Counter component.
Pretty simple right? You can use this to create very dynamic user interfaces using pure Python and HTML. We would love to see what you have built using Meld so please share!
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for Flask_Meld-0.0.5-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 3f3122b398de3b7cd957bb85059f7721dc6402fb747dba1e3f4fec43b9e10e15 |
|
| MD5 | 112c5f938279c787a4e9c0ab70003d82 |
|
| BLAKE2b-256 | f9ee800bdea715251278c872a1bf6433b28ea9c08e3c513dcd9c052e3fded032 |
