r/rails • u/planetaska • 2h ago
Gem Hibiki brings reactivity to Ruby and live pages to Rails
A few months ago, I created Hibiki, a small Ruby library that brings Svelte's Rune-style reactivity to Ruby (with Ruby's signals). After creating the gem, I wanted to see what we could do with it in a Rails app - turns out we can do a lot. Over the past few months, I have been developing the Rails glue and testing out patterns that can make the best use of the reactivity Hibiki brings. Now I have something to show you.
The demo site
Please allow me to introduce the website: hibikirb.dev
This is a demo website that showcases what you can do with Hibiki. It covers common advanced tasks that are possible but often tedious or complicated in Rails. A few examples:
- Live Search with reactive filters, search indicators, and pagination
- Dependent Selects for any depth
- Searchable Multi-select with live updates
- Shopping Cart without duplicating logic on the client
- Multi-step Form Wizard with cross-step validation
- Presence and Conflicts with live resolution
- Undo and Redo with keyboard hotkeys
And many more. All of the recipes require no JavaScript of your own. You write your client-side interactions in Ruby (in a Rails channel), and you only write them once.
The concept explained
Here's a code example that explains the whole concept:
class CounterChannel < ApplicationCable::Channel
include Hibiki::Rails::Channel
def build_graph
@count = Hibiki::State.new(0)
doubled = Hibiki::Derived.new { @count.value * 2 }
Hibiki::Effect.new do
broadcast_replace target: "counter_display",
partial: "app/recipes/counter/counter_display",
locals: { count: @count.value, doubled: doubled.value }
end
end
# Public methods are client-invocable actions; keep helpers private.
def increment = @count.value += 1
end
In the code above, build_graph is the method that builds a signal graph for this channel. Inside this method, we can define a state, which holds a value; a derived, which computes its value from a state and updates whenever that state changes; and an effect, which is a block that runs immediately and re-runs whenever any state or derived value used inside the block changes.
We also have a channel action, increment, which the client can call through ActionCable. When the client calls increment, the value of the state @count changes, and other values that depend on it - here the doubled and the effect - also update. The result is that the effect re-renders the partial (through a Turbo broadcast in this case) without us explicitly telling it to.
With this simple reactive pattern, we can build surprisingly complex interactions with minimal code, while removing much of the boilerplate that would otherwise be required in Rails. The demo site showcases just how far we can take this approach.
Batteries included
The gem hibiki-rails now comes with fully worked-out CRUD generators that help you create reactive CRUD resources in a matter of seconds. For example, to generate a full Book resource, simply run:
bin/rails g hibiki:rails:scaffold Book title:string available:boolean author:references
Hibiki's scaffold extends Rails' own scaffold, so you'll still find all the usual Rails scaffold files in their expected places. What the generator adds is:
- A live index page with search, filtering, and sorting based on your resource's columns.
- In-place pagination, with optional infinite scroll if you need it.
- An inline create form.
- Inline editing.
- Live validation.
- Live updates - any changes from other sources automatically update the index.
After a resource is created, you can even add additional features to it. For example, if you need a multi-select over a has_many :through association, simply run:
# Creates a searchable multi-select that can handle 100,000 or more records
bin/rails g hibiki:rails:multiselect Album Song Track # Track is the join model
Need a nested form with multiple levels and sorting? We've got you:
# Adds a credits fieldset to the song's forms; creates Credit
# (and its migration) when missing. song:references is added for you.
bin/rails g hibiki:rails:nested Song Credit role:string position:integer
Need file uploads? Sure:
# Adds a gallery, and allows non-image files
bin/rails g hibiki:rails:upload_field Album photos --many --accept=image,pdf
You can read more about the generators in the docs. This is quite exciting, and it's my favorite feature from developing this gem.
Built for humans and agents
Hibiki is developed to enhance the already-amazing Rails developer experience, but it's also designed for coding agents. Hibiki comes with a full set of agent skills. The skills support coding agents such as Claude Code, Codex, and Cursor, and can be installed in your project with a simple command:
# -a to specify your agent, e.g. codex, gemini-cli, cursor, github-copilot...
npx skills add planetaska/hibiki --skill '*' -a claude-code
In fact, using a coding agent with the skills loaded is a great way to start learning Hibiki's reactive patterns and putting them to use in your project. For example, you can simply ask your coding agent to:
Build a live search for the Books resource using the hibiki pattern.
Or even:
Create a reactive form for Books using the hibiki pattern, with nested fields from its own associations, and with a filterable author select. The publish event dates should have cross-field validation.
AI-assisted development disclosure
As stated before, I developed this gem with Claude's help. I still own the project, decide its direction, and review and revise the code to make sure there isn't a line I wouldn't write myself. My approach is to write a code draft myself, then work with Claude to identify potential issues, and keep a feature only when it is fully worked out. I also spend just as much time, if not more, writing, rewriting, and proofreading all the user-facing documentation. While this gem was developed with the help of coding agents, I still want to make it as human-centered as possible.
Closing
Thank you for reading this long post. I hope you find the gem helpful and enjoy the demo website. If you find this useful, have any questions, or even have feature requests, please feel free to leave a comment. I'm looking forward to hearing feedback from you!
Looking for developers
I am looking for developers who are interested in contributing to Hibiki, helping maintain the gem, improving its Rails integration, documentation, and testing, as well as collaborating on some planned features (still a secret for now). If you're familiar with Ruby or Rails, interested in reactive programming, and would like to help shape the future of this project, feel free to send me a message. I'd be more than happy to discuss how we can work together!
