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. Check out the documentation to get started.

Features

Write your Python interfaces in a declarative manner as single-file components with Vue-like syntax (.cgx files), but with Python!

Fine-grained reactivity (made possible by leveraging observ)
Class components with local state and life-cycle methods/hooks
Single-file components with Vue-like template syntax (.cgx files)
Renderers for PySide6 and Pygfx, with support for custom renderers

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

Contents of counter.cgx:

<widget>
  <label>Count: {{ count }}</label>
  <button @clicked="bump">bump</button>
</widget>

<script>
import collagraph as cg


class Counter(cg.Component):
    def init(self):
        self.state["count"] = 0

    def bump(self):
        self.state["count"] += 1
</script>

Contents of app.py:

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(Counter, app)
app.exec()

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:

uv run collagraph examples/pyside/counter.cgx

To inspect the Python code that is compiled for a component, use the --show-code flag:

uv run collagraph --show-code examples/pyside/counter.cgx

For more examples, please take a look at the examples folder. For guides and API reference, visit the documentation.

Currently there are two renderers:

PysideRenderer: for rendering PySide6 applications
PygfxRenderer: for rendering 3D graphic scenes with Pygfx

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

Development

To try out Collagraph or start development, run:

# Basic dev setup (no pygfx or pyside)
uv sync
# Full dev setup
uv sync --all-groups
# Run example:
uv run python examples/pyside/layout-example.py
# Run test suite:
uv run pytest
# Install git pre-commit hooks to make sure tests/linting passes before committing
uv run prek install

Editor Integration

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

These plugins use collagraph-lsp for editor integration and ruff-cgx for formatting and linting capabilities.

Metadata

Release files for collagraph 0.10.0

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for collagraph 0.10.0
File	Size	Uploaded
collagraph-0.10.0.tar.gz	192.8 kB	Jul 21, 2026	Details

Built distribution (wheel)

Table of built distributions (wheels) for collagraph 0.10.0
File	Interpreter	ABI	Platform	Reset
collagraph-0.10.0-py3-none-any.whl 80.2 kB Jul 21, 2026	Python 3	none	any	Details

Total release size: 273.0 kB

Release files / collagraph-0.10.0.tar.gz

Download URL	collagraph-0.10.0.tar.gz
Size	192.8 kB
Tags	Source
SHA-256 checksum How to use checksums	`dcc682846f5ff272ee33a2db42b6dca3468d986798c2524f75b827c093fb9e31`
BLAKE2b-256 checksum How to use checksums	`10ff12929e321d0f22ce366f8a56fa5b24116cde7348287f7bda5d346ac78e81`
Upload date	Jul 21, 2026
Uploaded using Trusted Publishing? What is trusted publishing?	Yes
Uploaded via	`twine/6.1.0 CPython/3.13.14`

Provenance

Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.

Identity

Publishing platform: GitHub Actions
Publishing repository: github.com/fork-tongue/collagraph
Publishing commit: github.com/fork-tongue/collagraph/tree/5f051f483bf1d9bc0262ddeb4535a8841df9556f

Workflow

Publishing configuration: github.com/fork-tongue/collagraph/blob/5f051f483bf1d9bc0262ddeb4535a8841df9556f/.github/workflows/ci.yml
Publishing logs: github.com/fork-tongue/collagraph/actions/runs/29841683003/attempts/1

Artifact

Subject: collagraph-0.10.0.tar.gz
SHA-256 checksum: dcc682846f5ff272ee33a2db42b6dca3468d986798c2524f75b827c093fb9e31 Verifying attestations

Release files / collagraph-0.10.0-py3-none-any.whl

Download URL	collagraph-0.10.0-py3-none-any.whl
Size	80.2 kB
Tags	Python 3
SHA-256 checksum How to use checksums	`79bf8b4d8d2627f96c1b8fe6804d06cf6972ab24461236fcfd34abfa3533ca6d`
BLAKE2b-256 checksum How to use checksums	`911e63bf060ee63e8e95da1b53ff06d7c3197399d6e2d4405933e72ce06435b7`
Upload date	Jul 21, 2026
Uploaded using Trusted Publishing? What is trusted publishing?	Yes
Uploaded via	`twine/6.1.0 CPython/3.13.14`

Provenance

Identity

Publishing platform: GitHub Actions
Publishing repository: github.com/fork-tongue/collagraph
Publishing commit: github.com/fork-tongue/collagraph/tree/5f051f483bf1d9bc0262ddeb4535a8841df9556f

Workflow

Publishing configuration: github.com/fork-tongue/collagraph/blob/5f051f483bf1d9bc0262ddeb4535a8841df9556f/.github/workflows/ci.yml
Publishing logs: github.com/fork-tongue/collagraph/actions/runs/29841683003/attempts/1

Artifact

Subject: collagraph-0.10.0-py3-none-any.whl
SHA-256 checksum: 79bf8b4d8d2627f96c1b8fe6804d06cf6972ab24461236fcfd34abfa3533ca6d Verifying attestations