Build frontend experiences with the backend you love

Single-page React, Vue, and Svelte apps powered by your existing Rails controllers, routes, and authentication. No API required.

Documentation · Get started · Demo · Discord

Your controllers. Your routes. Modern components.

Inertia lets you build a fully client-side rendered single-page app without the complexity of a separate API. Pass data from Rails directly to React, Vue, or Svelte as props — no REST endpoints, no GraphQL, no client-side data fetching, no state-management headaches.

# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def index
    render inertia: {
      users: User.active.map { |user| user.as_json(only: [:id, :name, :email]) }
    }
  end
end

// app/frontend/pages/users/index.jsx
import { Link } from '@inertiajs/react'

const Users = ({ users }) => (
  <>
    {users.map((user) => (
      <div key={user.id}>
        <Link href={`/users/${user.id}`}>{user.name}</Link>
        <p>{user.email}</p>
      </div>
    ))}
  </>
)

export default Users

That's the whole loop: the controller returns props, the component renders them. Links and form submits are intercepted and turned into XHR visits, so navigation feels instant — but you're still writing plain Rails on the server.

Get started

Add to an existing Rails app — the installer sets up Vite, your chosen framework, and example pages:

bundle add inertia_rails
bin/rails generate inertia:install

Or start from a kit with authentication, Vite, optional SSR, and Kamal deployment already wired up:

• React Starter Kit — React 19 · TypeScript · shadcn/ui
• Vue Starter Kit — Vue 3 · TypeScript · shadcn-vue
• Svelte Starter Kit — Svelte 5 · TypeScript · shadcn-svelte

Full walkthrough: Server-side setup and Client-side setup.

Built for real Rails apps

Why Inertia?

Inertia sits between traditional server-rendered apps and full SPAs.

vs. Hotwire — Same monolith, different view layer. Both keep you in Rails; Inertia gives you the full React/Vue/Svelte component model and the npm ecosystem instead of HTML-over-the-wire. Choose Hotwire for minimal JS and server-rendered HTML; choose Inertia for a modern component architecture.

vs. API + SPA — Same frontend, no API hassle. Both give you React/Vue/Svelte, but Inertia removes the API layer entirely: one router (Rails), Rails sessions instead of a JWT/OAuth dance, and props from your controller instead of fetching in useEffect. Choose an API for public/mobile clients; choose Inertia for focused web products. (You can always add an API alongside Inertia later.)

See the full comparison and FAQ →

Documentation

Everything lives at inertia-rails.dev:

• How it works
• Pages & layouts
• Forms & validation
• Shared data · Partial reloads · Deferred props
• Server-side rendering
• Testing
• Configuration reference

Community

• Awesome Inertia Rails — gems, tutorials, and real-world apps
• Discord — ask questions, get answers fast
• GitHub Discussions & Issues — browse the source, report bugs

Contributing

Bug reports and pull requests are welcome. To run the test suite:

bundle install
bundle exec rspec

See the Code of Conduct. Everyone interacting with the project is expected to follow it.

Credits

Inertia Rails is part of the official Inertia.js organization. It was originally created by the team at bellaWatt and is maintained by the Inertia.js community.

Released under the MIT License.