Raylib Interactive
The DIY GUI Toolkit for Raylib
This is a library that supports rust and adds many interactive things to your current raylib project, such as:
- Buttons
- Checkboxes
- Dropdowns
- Textfields
Raylib Interactive is a library built on raylib that adds many components to raylib, allowing you to make better graphical interfaces. The latest version:
- Added Style system with predefined themes and simplified API with public fields. (Not compatible with older versions so much)
- Added update_all and draw_all macros for clarity and less boilerplate.
- Textfield scrolling and cursor for proportional fonts
- Dropdowns support a deselect/clear option and handle selection offset correctly
- Clicking outside a dropdown or textfield will close/deselect it (standard UI behavior)
- Macro-based batch update/draw for all UI elements (no 50 lines of .update and .draw)
- API and UI behavior are cleaner and more intuitive
This project is hosted on github at the GitHub homepage.
Docs
Overview
Style System
The library now has a Style
struct that provides theming across all components:
Style::default()
- Default gray themeStyle::modern_blue()
- Modern blue accent themeStyle::dark_theme()
- Dark theme with blue accentsStyle::minimal()
- Clean minimal themeStyle::new()
- Create custom styles with builder pattern
Button
Methods:
new(x, y, width, height, label) -> Self
// Constructorwith_style(style) -> Self
// Apply styleset_colors(background, hover, pressed, border, text)
// Quick color setupupdate(rl)
// Handle input and animationsdraw(d)
// Render the buttonis_clicked(rl) -> bool
// Check if clicked this frame
Checkbox
Methods:
new(x, y, size, label) -> Self
// Constructorwith_style(style) -> Self
// Apply styleset_colors(background, check, border, hover, label)
// Quick color setupupdate(rl)
// Handle input and animationsdraw(d)
// Render the checkboxtoggle()
// Toggle checked state
TextField
Methods:
new(x, y, width, height, max_length) -> Self
// Constructorwith_style(style) -> Self
// Apply styleset_colors(background, border, text)
// Quick color setupupdate(rl)
// Handle input and focusdraw(d)
// Render the text fieldclear()
// Clear all textactivate()
// Give focusdeactivate()
// Remove focushandle_input(rl)
// Process keyboard inputonly_allow(regex: Regex) -> Self
// Only allow characters matching regexchange_character(callback: Fn(char) -> char) -> Self
// Transform each character as typed
Special:
- Use
.only_allow()
to restrict allowed characters (e.g., no spaces). - Use
.change_character()
to mask or transform input (e.g., password fields).
Password Field Example:
use Regex;
let mut password_field = new
.only_allow // Disallow spaces
.change_character; // Mask all input as '*'
Dropdown
Methods:
new(x, y, width, height, items) -> Self
// Constructorwith_style(style) -> Self
// Apply stylewith_deselect_option(label) -> Self
// Add a deselect/clear option as the first itemset_colors(background, border, text, hover)
// Quick color setupupdate(rl)
// Handle input and selectiondraw(d)
// Render the dropdownget_selected_item() -> Option<&String>
// Get selected textadd_item(item)
// Add new optionremove_item(index)
// Remove optionclear_items()
// Remove all optionsclear_selection()
// Clear selectedopen()
// Expand dropdownclose()
// Collapse dropdowntoggle()
// Toggle open/closed
Special:
- Selecting the first item (deselect option) or pressing
Esc
while open will clear the selection.
Style Presets
The library provides convenient style presets for common use cases:
Button Presets
presets::button_default()
- Default button stylepresets::button_primary()
- Primary action button (blue)presets::button_secondary()
- Secondary action button (gray)presets::button_success()
- Success action button (green)presets::button_danger()
- Danger action button (red)
Component Presets
presets::textfield_default()
- Default text field stylepresets::checkbox_default()
- Default checkbox stylepresets::dropdown_default()
- Default dropdown style
Style Builder Methods
The Style
struct provides builder methods for easy customization:
with_background_colors(background, hover, pressed)
// Set background colorswith_border_colors(border, hover, pressed)
// Set border colorswith_text_colors(text, hover, pressed)
// Set text colorswith_typography(font_size)
// Set font sizewith_layout(padding, corner_radius, border_thickness)
// Set layout properties
Batch Update/Draw Macros
You can update and draw multiple UI elements at once using the provided macros:
!;
draw_all!;
update_all
If you are rendering to a virtual resolution (e.g., with a render texture for scaling/aspect ratio):
let mouse = rl.get_mouse_position;
let virtual_mouse = Vector2 ;
update_all!;
- The first argument is the virtual mouse position (for correct UI hit testing when using render textures or scaling).
- The second argument is the Raylib handle.
- Then list all your UI elements.
UI/UX Behavior
- Clicking outside a dropdown or textfield will close/deselect it. This matches standard UI expectations and is built-in to the components.
- Dropdowns with a deselect option: If you use
.with_deselect_option("None")
, the first item is a clear/deselect option. The selected index andget_selected_item()
are offset accordingly, so you always get the correct item orNone
if deselected. - Theme toggling: The demo shows how to toggle between dark and light themes, and applies the correct style preset to each button (primary, secondary, success, danger, etc.) so colors always match the intended theme.
- Enabling/disabling buttons: The demo shows how a checkbox can enable or disable a button, and how you can change the style and label dynamically.
Usage Example
use *;
use ;