Flask-HTML. HTML generator for Flask applications.

Odilkhon Mukhtorkhujaev — Wed, 31 Jan 2024 02:23:21 +0000

Hello everybody. Today i am going to tell you about Flask-HTML package for Flask framework. This package helps you to generate HTML/CSS/JS content for your applicationg by using classes.

Table of content:

Install
Usage

Install

You can install Flask-HTML with pip package manager

pip install flask_html

Usage

Simple use it in you page route

from flask_html import Page, Head
from flask_html.core import Style
from flask_html.tags import Body, Div, P
from flask import request
@app.route('/')
def index():
    head = Head('Title', ['link to css'],['link to js'], [{"meta_property": "value"}])
    page = Page(head)
    body = Body(page, styles=Style(color="red", padding_top="15px"),classes=['class1', 'class2'], id='body_id',elements=[
        Div(styles=Style(margin="10px"), classes=['class1', 'class2'], id='div_id', elements=[
            P(styles=Style(color="blue"), classes=['class1', 'class2'], id='p_id', elements=[
                "Hello World"
            ])
        ])
    ])
    return page.render(body, request)

U can use event listeners with your DOM nodes

Note: Jquery automatically injected

opts = [Option('{}'.format(x),'Name {}'.format(x)) for x in range(10)]
sel = Select(opts).on('change', 'let val = $(this).val(); alert(val)')
page = Page(Head('Title', ['link to css'],['link to js'], [{"meta_property": "value"}]))
body = Body(page, elements=[
    sel
])
return page.render(body, request)

All html elements have docstring to help you to understand how to use it

"""Div HTML element

Args:
    styles (Style, optional): Inline css styles. Defaults to None.
    classes (List[str], optional): List of class names. Defaults to [].
    id (str, optional): Unique ID. Defaults to None.
    elements (List[object], optional): List of child elements. Defaults to [].
    props (Dict[str, str], optional): Additional tag properties. Defaults to {}.
"""
Div(styles=None, classes=[], id=None, elements=[], props={})

Flask-HTML written by myself and it open to contribute.
Have an idea? Fork package, contribute and open pull request

Forem: Odilkhon Mukhtorkhujaev

Flask-HTML. HTML generator for Flask applications.

Install

Usage

Links