gpui-elements

Implement custom GPUI UI elements via the Element trait lifecycle.

Updated Mar 6, 2026

Search Tags:#layout #rendering #canvas #gpui #custom element #trait implementation

Ready to run

npx skills add https://github.com/onehr/gpui-skills --skill gpui-elements-onehr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gpui-elements
Source: https://github.com/onehr/gpui-skills/tree/main/skills/gpui-elements
Command: npx skills add https://github.com/onehr/gpui-skills --skill gpui-elements-onehr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides the tools and patterns to create highly customized user interface elements in GPUI when standard components like div() are insufficient for complex layout, painting, or input handling needs.

Core Features & Use Cases

Custom Element Implementation: Define and implement the Element trait for unique UI behaviors.
Advanced Rendering: Utilize low-level painting methods and the canvas() API for bespoke visual elements.
Use Case: Building a custom graph visualization or a specialized text editor component that requires fine-grained control over rendering and layout.

Quick Start

Implement a custom element by defining a struct that derives IntoElement and implements the Element trait, handling its request_layout, prepaint, and paint phases.

Frequently Asked Questions about gpui-elements

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a custom GPUI element when div is not enough?▼

To create a custom GPUI element, define a struct that derives `IntoElement` and implement the `Element` trait, managing its `request_layout`, `prepaint`, and `paint` lifecycle phases for bespoke rendering and interaction.

What is the Element trait lifecycle in GPUI for custom rendering?▼

The GPUI `Element` trait lifecycle consists of three phases: `request_layout` for bespoke layout calculations, `prepaint` for pre-rendering preparation, and `paint` for executing the actual low-level drawing and visual rendering.

How do I draw bespoke visuals using the GPUI canvas API?▼

You can draw bespoke visuals in GPUI by utilizing the low-level `canvas()` API within the `paint` phase of your custom `Element` trait implementation, enabling fine-grained control over rendering complex visual elements.

When should I implement a custom element instead of using standard GPUI components?▼

You should implement a custom element when standard components like `div()` are insufficient for complex layout, painting, or input handling needs, such as building specialized graph visualizations or custom text editors.

Does implementing the Element trait in GPUI require managing layout manually?▼

Yes, implementing the `Element` trait requires manual layout management through the `request_layout` phase, allowing you to define bespoke layout calculations before executing the `prepaint` and `paint` rendering phases.