<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/making-viewer-uis-for-pitivi-jcx7dihcv" -->

---
title: Making Viewer UIs for Pitivi | daily.dev
description: A developer walkthrough of three generations of transformation box UI implementations for the Pitivi video editor, spanning GSoC 2012 through 2016. Each...
canonical: https://daily.dev/posts/making-viewer-uis-for-pitivi-jcx7dihcv
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: Making Viewer UIs for Pitivi | daily.dev
og:description: A developer walkthrough of three generations of transformation box UI implementations for the Pitivi video editor, spanning GSoC 2012 through 2016. Each...
og:url: https://daily.dev/posts/making-viewer-uis-for-pitivi-jcx7dihcv
og:image: https://api.daily.dev/og/posts/Jcx7DIhCv.png
og:image:alt: Making Viewer UIs for Pitivi
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Making Viewer UIs for Pitivi

**[Collabora Blog](https://daily.dev/sources/collabora)** · 4 min read · 0 upvotes · 0 comments

## Summary

A developer walkthrough of three generations of transformation box UI implementations for the Pitivi video editor, spanning GSoC 2012 through 2016. Each iteration used a different GStreamer sink and Cairo overlay approach: the first used a hacky GstOverlay+Cairo combo, the second used glimagesink with Cairo rendered into OpenGL textures, and the third leverages the modern GtkSink (or GtkGLSink) with Gtk Overlay for clean Cairo compositing. The 2016 version maps UI input to GES.UriSource transformations via videomixer and videoscale, supports multiple overlapping clips selectable from the viewer, and is designed to be extensible with separate overlay classes for normal clips and title clips.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.collabora.com/news-and-blog/blog/2016/10/13/making-viewer-uis-for-pitivi>

## Questions this post answers

### What GStreamer sink does Pitivi use for its viewer and how are overlay widgets rendered on top of it?

Pitivi uses GtkSink as its viewer sink, which is a GTK widget. Overlays are added via GTK Overlay, making Cairo rendering straightforward to layer over the video. An alternative, GtkGLSink, uses a GStreamer GL context to display video textures and supports GL plugins like gltransformation without requiring a GPU memory download via gldownload.

_Developers building GStreamer-based video UIs track sink and overlay patterns like these on daily.dev._

## Similar posts on daily.dev

- [Introducing GstPipelineStudio 0.6.0](https://daily.dev/posts/introducing-gstpipelinestudio-0-6-0-ofhghxgo9) · Planet Igalia · 0 upvotes · 0 comments
- [Flowblade Video Editor May Go Wayland-Only As Part Of GTK4 Port](https://daily.dev/posts/flowblade-video-editor-may-go-wayland-only-as-part-of-gtk4-port-el8qh2ogv) · Phoronix · 0 upvotes · 0 comments
- [Cine Linux Video Player: GTK4 style, MPV Performance](https://daily.dev/posts/cine-linux-video-player-gtk4-style-mpv-performance-xjp3fx12o) · omg\! ubuntu\! · 0 upvotes · 0 comments
- [I thought VLC was unbeatable until I tried this open-source media player](https://daily.dev/posts/i-thought-vlc-was-unbeatable-until-i-tried-this-open-source-media-player-tmwluvrze) · XDA Developers · 0 upvotes · 0 comments
- [XMMS Codebase Brought Back To Life By AI With GTK4 \+ GStreamer/PipeWire Port](https://daily.dev/posts/xmms-codebase-brought-back-to-life-by-ai-with-gtk4-gstreamer-pipewire-port-s2i0fqvzj) · Phoronix · 0 upvotes · 0 comments

---

[View this post on daily.dev](https://daily.dev/posts/making-viewer-uis-for-pitivi-jcx7dihcv)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Making Viewer UIs for Pitivi","url":"https://daily.dev/posts/making-viewer-uis-for-pitivi-jcx7dihcv","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/making-viewer-uis-for-pitivi-jcx7dihcv"},"datePublished":"2026-08-11T08:57:05.913Z","dateModified":"2026-08-11T09:41:16.123Z","description":"A developer walkthrough of three generations of transformation box UI implementations for the Pitivi video editor, spanning GSoC 2012 through 2016. Each...","image":"https://media.daily.dev/image/upload/s--ZrL_HSsR--/f_auto/v1722860399/public/Placeholder%2006","thumbnailUrl":"https://media.daily.dev/image/upload/s--ZrL_HSsR--/f_auto/v1722860399/public/Placeholder%2006","isAccessibleForFree":true,"articleSection":"Collabora Blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Collabora Blog","logo":"https://media.daily.dev/image/upload/s--ZGZ0FjqS--/f_auto,q_auto/v1786438306/logos/collabora?_a=BAMAMicg0","url":"https://daily.dev/sources/collabora"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/making-viewer-uis-for-pitivi-jcx7dihcv","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"","timeRequired":"PT4M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Collabora Blog","item":"https://daily.dev/sources/collabora"},{"@type":"ListItem","position":3,"name":"Making Viewer UIs for Pitivi"}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/making-viewer-uis-for-pitivi-jcx7dihcv#faq","mainEntity":[{"@type":"Question","name":"What GStreamer sink does Pitivi use for its viewer and how are overlay widgets rendered on top of it?","acceptedAnswer":{"@type":"Answer","text":"Pitivi uses GtkSink as its viewer sink, which is a GTK widget. Overlays are added via GTK Overlay, making Cairo rendering straightforward to layer over the video. An alternative, GtkGLSink, uses a GStreamer GL context to display video textures and supports GL plugins like gltransformation without requiring a GPU memory download via gldownload. Developers building GStreamer-based video UIs track sink and overlay patterns like these on daily.dev."}}]}
```

