Superglue 1.0: React ❤️ Rails. A new era of thoughtfulness

Integration simply isn’t enough

I’m thrilled to announce the release of Superglue 1.0. First announced a year ago, Superglue is a library designed to make building interactive Rails and React apps as productive as the classic Rails stack. In every client project we’ve used it on, I’m often amazed at how well it preserves the Rails developer experience while leveraging the React ecosystem to help teams move fast. It can be said that Superglue is yet another library that integrates Rails and React, but there is so much more that makes it uniquely effective.

I started Superglue over a decade ago, and I’ve seen many attempts to integrate Rails and React—Hyperstack, ReactOnRails, react-rails, Laravel’s InertiaJS, and countless homegrown solutions. They all try to bring the two together, yet the discourse around frontend complexity is as intense as ever. Over the years, one thing has become clear: integration simply isn’t enough.

There needs to be thoughtfulness. How can React enhance my productivity while building on the Rails tooling and knowledge I already have? This question has guided Superglue’s development over the past decade — a careful, deliberate approach to crafting a developer experience Rails developers would love. To put it another way: if using React means losing my form helpers, URL helpers, view layer, or forces me to bloat my controllers or rely on client-side routing, then it’s just not worth it.

For this post, I’ll focus on what makes Superglue a thoughtful Rails pairing, but for a quick recap of Superglue and how you can develop interactive React apps without APIs, see my introductory post from last year.

The epic return of UJS

Rails UJS (Unobtrusive JavaScript) may have taken a backseat with the arrival of Turbo, but it was a great way to give links and forms the ability to make remote requests. Superglue puts it back into the driver’s seat, and packs it with even more functionality:

<a href="/posts/new?props_at=data.body.modal" data-sg-visit>Show Post New modal</a>

This is how modals are implemented in Superglue. In a single line, the above takes a user from /posts to /posts/new without reloading the screen, changes the URL, efficiently grabs the modal from the next page (without loading other content), and inserts it into the page to show to the user. Pressing the back button works as you’d expect.

The thoughtful upgrade turns a Rails favorite into a consistent way of building functionality, as the same approach can be used to build tabs, pagination, sliding panels, filter tables, infinite scroll, and more! Now that’s productive.

There’s more to thoughtfulness than visual updates; we also have to consider mutations.

Don’t take my Rails forms away!

Unfortunately, the first thing that gets left behind when moving to a React Rails integration is one of the most valuable tools in the arsenal: form_with. The usual advice is to pick up a React form library; after all, forms is React’s strength. It’s a shame because form_with is a consistent and battle-tested experience for mutating resources in Rails. Regardless of the project, you can expect the same flow:

• Pass an ActiveModel object to form_with to shape a form with the right input names and values
• User edits the form and submits FormData
• Rack parses the input names into nested params
• And your controller action receives those params to redirect or render.

Superglue doesn’t let this happen. Instead, it thoughtfully embraces form_with‘s mutation flow with form_props, a form builder that works just like form_with:

json.postNewForm do
  form_props(@post) do |f|
    f.text_field :title
    f.submit
  end
end

Unlike form_with, form_props outputs React HTML attributes instead of HTML, so you can use it in React and combine it with UJS.

const {form, inputs, extras} = postNewForm

<form {...postNewForm} data-sg-visit>
  {Object.values(extras).map((hiddenProps) => (<input {...hiddenProps} key={hiddenProps.name}/>))}

  <input {...inputs.title} />
  <label for={inputs.title.id}>Your Name</label>
  <button {...inputs.submit}>{inputs.submit.text}</button>
</form>

Preserving the flow isn’t enough—form_props alone isn’t productive enough. We’ll also need to address accessibility, inline errors, and add more functionality to standard HTML inputs.

Cue React

This is where the React UI ecosystem truly shines. Libraries like mantine, shadcn, react-aria, and PrimeReact offer accessible, feature-packed components — areas where the Rails community hasn’t historically focused as much.

We can take what makes React great and thoughtfully combine it with the consistency of Rails forms with candy_wrapper, Superglue’s set of copyable lightweight wrappers around popular React UI toolkits that work with form_props. Just pass the props to a wrapper and we have access to all of React’s universe of form components.

import {Form, TextField, SubmitButton} from “../copied-candy-wrapper-around-mantine-ui”

const {form, inputs, extras} = postNewForm

<Form {...postNewForm} data-sg-visit>
  <TextField {...inputs.title} label=”Your Name”/>
  <SubmitButton {...inputs.submit}>{inputs.submit.text}</SubmitButton>
</form>

It is said that Rails is omakase, a sort-of culinary experience for developers with a specific menu and limited expandability. The thoughtful combination of form_props and candy_wrapper brings React’s form tooling to the table with a very familiar interface. And as we add candy wrappers, more of React’s ecosystem can become part of that experience.

Cheeseburgers

Yes, Rails is omakase and that’s enough for 90% of functionality, but sometimes you absolutely need a juicy cheeseburger, and that’s ok. It can happen for highly interactive frontends, for complex forms, even for convenience; it usually happens when there’s a real need for state management. With Superglue, we offer a way out of Rails omakase through Redux.

Superglue’s generators will add a store.js file with predefined slices in your store. If there is ever a need for more functionality that Superglue doesn’t provide, we encourage you to create slices of your own. Or, if you just want to use Superglue with an existing app, just add its slices to your store. For Redux users, especially those working in corporate organizations, you’ll feel right at home.

An era of thoughtfulness

We want to make working with React and Rails better for everyone. That means remembering the strengths of both worlds and creating a developer experience that feels natural and productive.

Superglue 1.0 is just the beginning. There are still many challenges to solve and more ways to make the experience thoughtful. Try Superglue today, and let us know what a thoughtful and successful experience means to you.