README.md

Kolla 📓

Reactive user interfaces.

The word Kollay is derived from the Greek word koll or kolla, meaning glue, and graph, meaning the activity of drawing.

Unholy marriage of concepts from Svelte, [Solid][https://solidjs.com], Vue and Collagraph.

• 'No virtual DOM approach' with fine-grained reactivity (like Svelte and Solid)
• Syntax for single-file components (.cgx) from Vue
• Renderers from Collagraph (PySide6, Pygfx, PyScript)

Features

Write your Python interfaces in a declarative manner with plain render functions, component classes or even single-file components using Svelte-like syntax, but with Python!

• Reactivity (made possible by leveraging observ)
• Single-file components with Vue-like syntax (.cgx files)
• Class components with local state and life-cycle methods/hooks
• Build your own custom renderer

Here is an example that shows a simple counter:

from PySide6 import QtWidgets
import kolla
from kolla.sfc import compiler

# The source normally resides in a .cgx file
# which can be imported like any other python file
# after the `import kolla` line. For this example
# we'll just parse directly from a string.
source = """
<widget>
  <label :text="f'Count: {count}'" />
  <button text="Bump" @clicked="bump" />
</widget>

<script>
import kolla

class Counter(kolla.Component):
    def __init__(self, props):
        super().__init__(props)
        self.state["count"] = 0

    def bump(self):
        self.state["count"] += 1
</script>
"""
Counter, module = compiler.load_from_string(source)

if __name__ == "__main__":
    app = QtWidgets.QApplication()
    # Create a Kolla instance with a PySide renderer
    gui = kolla.Kolla(renderer=kolla.PySideRenderer())
    # Render the function component into a container
    # (in this case the app but can be another widget)
    gui.render(Counter, app)
    app.exec()

For more examples, please take a look at the examples folder.

Currently there are four renderers:

• PysideRenderer: for rendering PySide6 applications
• PygfxRenderer: for rendering 3D graphic scenes with Pygfx
• DomRenderer: for rendering to HTML DOM with PyScript
• DictRenderer: for testing purposes

It is possible to create a custom Renderer using the Renderer interface, to render to other UI frameworks, for instance wxPython and GTK or any other dynamic tree-like structure that you can think of.

Notable differences from Vue

The root template tag is not required for components and can have multiple elements:

<widget>
</widget>
<button />

<script>
import kolla

class Example(Component):
    pass
</script>