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


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.

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:

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.