README.md
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.
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:
Full walkthrough: Server-side setup and Client-side setup.
| Forms that work | Validation errors flow from Rails to your components automatically — no manual wiring. |
| Server-side rendering | Full SSR for SEO and fast first paint. Your React/Vue/Svelte, rendered on Rails. |
| Test like Rails | RSpec and Minitest matchers that feel native. Assert on props, components, and more. |
| Partial reloads | Refresh only the data you need. Keep interactions snappy without full page loads. |
| Shared data | Current user, flash, permissions — available on every page automatically. |
| Deferred props | Load the page fast, fetch expensive data after, with built-in loading states. |
| Rails generators | Scaffold entire CRUD interfaces — controllers with matching components. |
| History encryption | Keep sensitive data private, even in browser history. Toggle per page. |
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 →
Everything lives at inertia-rails.dev:
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.
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.