Skip to main content

Reactive user interfaces

Project description

PyPI version CI status

Collagraph 📓

Reactive user interfaces.

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

Inspired by Vue and React.


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

  • Reactivity (made possible by leveraging observ)
  • Function components
  • Class components with local state and life-cycle methods/hooks
  • Single-file components with Vue-like template syntax (.cgx files)
  • Custom renderers

Here is an example that shows a counter, made with a component with Vue-like syntax:

Contents of counter.cgx:

      :text="f'Count: {count}'"

import collagraph as cg

class Counter(cg.Component):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.state["count"] = 0

    def bump(self):
        self.state["count"] += 1

Contents of

from PySide6 import QtWidgets
import collagraph as cg

# After importing collagraph, it's possible to import
# components directly from .cgx files
from counter import Counter

# Create a Collagraph instance with a PySide renderer
# and register with the Qt event loop
gui = cg.Collagraph(renderer=cg.PySideRenderer())
# Render the component into a container
# (in this case the app but can be another widget)
app = QtWidgets.QApplication()
gui.render(cg.h(Counter), app)

Which looks something like this:

collagraph example

Instead of using a python file as an entry point to run components, you can run them directly using the collagraph CLI:

poetry run collagraph examples/pyside/counter.cgx

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

Currently there are three renderers:

It is possible to create a custom Renderer using the Renderer interface, to render to other UI frameworks, for instance wxPython.


To try out Collagraph or start development, run:

# Basic dev setup (no pygfx or pyside)
poetry install
# Full dev setup
poetry install --with pyside --extras pyside --extras pygfx
# Run example:
poetry run python examples/pyside/
# Run test suite:
poetry run pytest
# Install git pre-commit hooks to make sure tests/linting passes before committing
poetry run pre-commit install

Syntax Highlighting

Syntax highlighting for single-file components (.cgx) is supported for VSCode and Sublime Text:

Formatting and linting

Linting cgx files is possible with a flake8 plugin: flake8-cgx. Formatting the contents of the script tag can be done with black-cgx.

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

collagraph-0.7.0.tar.gz (33.9 kB view hashes)

Uploaded Source

Built Distribution

collagraph-0.7.0-py3-none-any.whl (44.4 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page