> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/anomalyco/opentui/llms.txt > Use this file to discover all available pages before exploring further. # Renderable > Base class for all UI elements with layout, styling, and event handling ## Overview The `Renderable` class is the foundation for all UI components in OpenTUI. It provides layout management using Yoga (Flexbox), event handling, lifecycle management, and rendering capabilities. ## Base Classes ### BaseRenderable The most basic renderable interface. Unique identifier for the renderable Internal numeric identifier (auto-assigned) Whether the renderable is visible Parent renderable (null for root) ### Renderable Extends `BaseRenderable` with full layout, styling, and event support. ## Constructor ```typescript theme={null} class Renderable extends BaseRenderable { constructor(ctx: RenderContext, options: RenderableOptions) } ``` The renderer context (usually `renderer`) Configuration options ## Options ### RenderableOptions Configuration interface for creating renderables. #### Layout Properties Width in cells, auto, or percentage Height in cells, auto, or percentage Flex grow factor (Flexbox) Flex shrink factor (Flexbox) Flex basis (Flexbox) Flex direction (Flexbox) Flex wrap (Flexbox) Align items (Flexbox) Justify content (Flexbox) Align self (Flexbox) Position type Overflow behavior Top position (for absolute positioning) Right position Bottom position Left position Minimum width Minimum height Maximum width Maximum height Margin on all sides Horizontal margin (left and right) Vertical margin (top and bottom) Top margin Right margin Bottom margin Left margin Padding on all sides Horizontal padding Vertical padding Top padding Right padding Bottom padding Left padding #### Visual Properties Z-index for layering (higher values render on top) Whether the element is visible Opacity (0 = transparent, 1 = opaque) #### Behavior Properties Use a frame buffer for rendering (performance optimization) Keep the renderer running continuously #### Hooks Called before rendering this element Called after rendering this element #### Event Handlers General mouse event handler (all mouse events) Mouse button down event Mouse button up event Mouse move event Mouse drag event Mouse drag end event Mouse drop event Mouse over event (hover) Mouse out event (leave) Mouse scroll event Key down event (when focused) Paste event (when focused) Called when the element's size changes ## Properties ### Position and Size Absolute x position in the terminal Absolute y position in the terminal Computed width in cells Computed height in cells X translation offset Y translation offset ### State Visibility state (can be set to show/hide) Opacity value (0-1) Z-index for rendering order Whether the element can receive keyboard focus Whether the element currently has focus Whether the element keeps the renderer running Whether the element has been destroyed ### Context The renderer context ## Methods ### Hierarchy Management #### add() Add a child element. ```typescript theme={null} add(obj: Renderable | VNode | unknown, index?: number): number ``` Child element to add Optional index to insert at Index where the child was inserted (-1 if failed) #### remove() Remove a child element by ID. ```typescript theme={null} remove(id: string): void ``` ID of the child to remove #### insertBefore() Insert a child before another child. ```typescript theme={null} insertBefore(obj: Renderable | VNode | unknown, anchor: Renderable | unknown): number ``` Element to insert Anchor element to insert before Index where the element was inserted #### getChildren() Get all children. ```typescript theme={null} getChildren(): Renderable[] ``` Array of child elements #### getChildrenCount() Get the number of children. ```typescript theme={null} getChildrenCount(): number ``` Number of children #### getRenderable() Get a child by ID. ```typescript theme={null} getRenderable(id: string): Renderable | undefined ``` Child ID The child element or undefined #### findDescendantById() Recursively find a descendant by ID. ```typescript theme={null} findDescendantById(id: string): Renderable | undefined ``` Descendant ID The descendant or undefined ### Focus Management #### focus() Give keyboard focus to this element. ```typescript theme={null} focus(): void ``` #### blur() Remove keyboard focus from this element. ```typescript theme={null} blur(): void ``` ### Rendering #### requestRender() Request a re-render. ```typescript theme={null} requestRender(): void ``` ### Lifecycle #### destroy() Destroy this element and remove it from the hierarchy. ```typescript theme={null} destroy(): void ``` #### destroyRecursively() Destroy this element and all descendants. ```typescript theme={null} destroyRecursively(): void ``` ### Layout #### getLayoutNode() Get the Yoga layout node. ```typescript theme={null} getLayoutNode(): YogaNode ``` The Yoga layout node ### Overridable Methods These methods can be overridden in subclasses to customize behavior. #### renderSelf() Render the element itself (called during render pass). ```typescript theme={null} protected renderSelf(buffer: OptimizedBuffer, deltaTime: number): void ``` Buffer to render to Time since last render (in milliseconds) #### onUpdate() Called before rendering (for animations, state updates, etc.). ```typescript theme={null} protected onUpdate(deltaTime: number): void ``` Time since last update #### onResize() Called when the element is resized. ```typescript theme={null} protected onResize(width: number, height: number): void ``` New width New height #### onRemove() Called when the element is removed from its parent. ```typescript theme={null} protected onRemove(): void ``` #### destroySelf() Called during destruction (for cleanup). ```typescript theme={null} protected destroySelf(): void ``` #### onMouseEvent() Called for mouse events (after event handlers). ```typescript theme={null} protected onMouseEvent(event: MouseEvent): void ``` The mouse event #### handleKeyPress() Called for key press events (when focused). ```typescript theme={null} handleKeyPress?(key: KeyEvent): boolean ``` The key event Whether the event was handled #### handlePaste() Called for paste events (when focused). ```typescript theme={null} handlePaste?(event: PasteEvent): void ``` The paste event ## Events ### LayoutEvents #### layout-changed Emitted when layout changes. ```typescript theme={null} renderable.on('layout-changed', () => { console.log('Layout changed') }) ``` #### resize Emitted when the element is resized. ```typescript theme={null} renderable.on('resize', () => { console.log('Element resized') }) ``` ### RenderableEvents #### focused Emitted when the element gains focus. ```typescript theme={null} renderable.on('focused', () => { console.log('Element focused') }) ``` #### blurred Emitted when the element loses focus. ```typescript theme={null} renderable.on('blurred', () => { console.log('Element blurred') }) ``` ## Example ```typescript theme={null} import { Renderable } from '@opentui/core' class CustomButton extends Renderable { constructor(ctx: RenderContext, text: string) { super(ctx, { width: text.length + 4, height: 3, focusable: true, }) this.text = text } protected renderSelf(buffer: OptimizedBuffer) { // Draw button background buffer.fillRect(0, 0, this.width, this.height, RGBA.fromHex(this.focused ? '#0066cc' : '#004499')) // Draw button text const x = Math.floor((this.width - this.text.length) / 2) const y = Math.floor(this.height / 2) buffer.drawText(this.text, x, y, RGBA.fromHex('#ffffff')) } handleKeyPress(key: KeyEvent): boolean { if (key.name === 'enter' || key.name === 'space') { this.emit('click') return true } return false } } // Usage const button = new CustomButton(renderer, 'Click Me') button.on('click', () => console.log('Button clicked!')) renderer.root.add(button) ```