11. Static Files

Lona has a dynamic loading mechanism for static files like CSS or JavaScript.

Any node and view can define a list of static files in Node.STATIC_FILES or VIEW.STATIC_FILES to tell the frontend which files are required to render the node or view correctly. This makes packaging of components possible.

This example shows a custom node that ships with a CSS file to color its content red.

from lona_picocss.html import HTML, Div, H1
from lona_picocss import install_picocss

from lona.static_files import StyleSheet
from lona import View, App

app = App(__file__)

install_picocss(app, debug=True)

class RedColoredDiv(Div):

    # give the node the right id, in order for the CSS to work
    ID_LIST = [

    # this tells the frontend that this file has to be loaded
    # before the node can be rendered

        # all paths are relative to the file in which
        # the static files are defined in (this file)

class Index(View):
    def handle_request(self, request):
        return HTML(
            H1('Custom CSS'),
            RedColoredDiv('Red Text'),

if __name__ == '__main__':
/* red-colored-div.css */

div#red-colored {
    color: red;

More information: Static Files