How-to Guides

Goal-oriented recipes. Each guide assumes you know the basics — if you don't yet, build the file browser first — and walks you straight to a specific outcome. When you have a task in mind ("virtualise a list", "handle a click", "theme my own component"), this is where to look.

For exact signatures, follow the links into Reference.

Components

Put content on screen and wire it together.

• Build Components — nodes, styling, layout, dynamic content, plus the canvas and virtual-list nodes
• Compose Components — nesting components, props down, emits up, modals, and two-way models
• Interact with Components — state, keyboard, mouse, focus, and scrolling with a ref
• Animate Components — timers, intervals, polling, and animated gradients
• Theme Components — palettes, restyling built-ins, theming your own components, and switching themes

For the components that ship with Phui — their props, emits, keys and colours — see Built-in Components.

Screen

Connect Phui to the program and environment around it.

• Configure the Screen — shared services, the framework's keys, and terminal options
• Enable Async — embed in an event loop and await in handlers
• Use Inline Mode — render in a region and return a value

Testing & Debugging

Check your app works, and see what it's doing.

• Test Components — drive a component with TestScreen, snapshot, and assert
• Debug Your App — the debug bar and the file logger
• Agents & Snapshotting — render a component to an image or an ANSI frame from the command line, so you or an agent can see it