DEV Community: Stefan Buhrmester

Elon is Mining Asteroids and I'm Just Sitting Here Making Modals For Inertia (again)

Stefan Buhrmester — Mon, 15 Jun 2026 16:46:12 +0000

Elon is mining asteroids and I'm just sitting here making modals. Not even good modals. Just modals. For Inertia. Again.

Look, someone has to do it. I could be spending this time learning Rust, contributing to actual open source infrastructure, or at minimum touching grass. Instead, I present to you Inertia X UI — a UI component library for Inertia X, built with the same energy as a 2 AM "how hard could it be" decision.

What Is This, Exactly?

Inertia X is a drop-in replacement for Inertia's Svelte adapter — reactive, server-driven, and criminally underrated. It makes building modals, sidebars and drawers feel like a first-class citizen instead of an afterthought. This library is the UI layer on top of that.

The goal: give you the boring-but-essential stuff without making you write 40 lines of boilerplate every time you need a modal.

Okay But What Does It Actually Look Like?

<script>
  import { modal } from 'inertiax-ui'
</script>

<a href="/posts/new" use:modal>Create post</a>

That's it. A Svelte action on a regular anchor tag. Your /posts/new route renders inside a modal. No wrapping component, no state management, no "did you register the plugin" moment. Just a link that opens as a modal because you said so.

Why You Should (Maybe) Care

Zero extra mental model — if you know Inertia X, you already mostly know this
It's just a link — progressive enhancement-friendly by nature
Composable and lightweight — no 200kb runtime surprise hiding in your bundle
Actively maintained — at least until I get distracted by something shiny

The Honest Part

This is a first attempt. Things will break. APIs will change. I will probably rename something at least once for no good reason. But it exists, it works, and it's on GitHub right now at buhrmi/inertiax-ui.

If you're building with Inertia X and want to not reinvent the modal wheel, give it a spin. PRs, issues, and mild criticism all welcome.

Meanwhile, Elon is definitely not reading this.

Inertia X adds Frames to Inertia 3

Stefan Buhrmester — Mon, 01 Jun 2026 16:31:20 +0000

Update: You might also be interested in Inertia X UI, a UI layer built on top of Inertia X.

It has been a long time coming, but after countless hours of refactoring, testing, and completely rethinking how we orchestrate monolithic single-page applications, I am very excited to finally type npm publish.

Inertia X.11 is a fork of Inertia 3 that adds the Frame component to the Svelte adapter.

You can check out the source code, read the documentation, and grab the package right now on GitHub: github.com/buhrmi/inertiax.

If you’ve been following the project, you know that the landscape shifted dramatically with the arrival of the Inertia 3.x branch. To ensure complete alignment with these fundamental core upgrades and Svelte’s modern architecture, I made a tough but necessary decision: Inertia X.11 is a complete rewrite from scratch. By avoiding fragile monkey-patching and building natively on top of the newest Inertia 3 foundation, Inertia X.11 is cleaner, strictly typed, and incredibly fast. Here is a deep dive into why you should use it, what has changed, and how it works.

The Core Problem: The Singleton Limitation

Standard Inertia.js is brilliant, but it introduces a major architectural constraint: the global singleton router. Standard Inertia assumes your entire app has exactly one router and one active page state.

Because of this, building complex interfaces—like slide-over panels, nested application wizards, or dynamic sidebars that pull live server data without resetting the rest of the application UI—can turn into a developer nightmare. You’re often forced to ditch the Inertia paradigm entirely and build custom JSON API endpoints or pollute your global page props.

Inertia X.11 shatters this limitation. It adds a first-class <Frame> component to the Svelte adapter, giving you the ability to spin up multiple independent Inertia page regions on the exact same document. Each frame owns its own router and page state, ensuring that forms and links executed inside a frame only update that specific frame.

What’s New and Changed in X.11?

If you used previous iterations of Inertia X, things look vastly different now that we are built on top of Inertia 3:

Explicit, First-Class Hooks: Instead of manually digging through global store lookups, X.11 introduces clear, modern hooks like useFrameRouter() and useFrameContext().
Smart Browser History Tracking: By default, actions taken within non-top frames update that frame's history state without replacing or mangling the browser URL. If you want a frame navigation to explicitly change the address bar, you now explicitly pass updateBrowserUrl: true.
Automatic Link Interception: Inertia X.11 introduces a global click handler that automatically intercepts standard same-origin <a> tags clicked within a frame, turning them into frame-scoped visits without requiring any boilerplate.
X-Inertia-Referer Header: To support clean server-side redirect_back behavior inside isolation, Inertia X now automatically sends an X-Inertia-Referer header containing the frame’s src URL.

Useful Examples

Using Inertia X.11 feels exactly like standard Inertia, but with superpowers. Here is how you can use the new syntax in your projects today:

1. Basic Frame Loading

Need to load a dynamic sub-page or sidebar? Simply place a <Frame> component. You can pass a fallback snippet inside it to handle loading states smoothly.

<script>
  import { Frame } from 'inertiax-svelte';
</script>

<div class="app-layout">
  <main>
    <h1>Dashboard Home</h1>
  </main>

  <aside>
    <Frame id="sidebar" src="/users/42/edit">
      <p>Loading user profile...</p>
    </Frame>
  </aside>
</div>

2. Accessing the Local Router

Inside a component rendered within a frame, you can seamlessly control navigation utilizing useFrameRouter(). The top-level global router remains accessible through the standard import.

<script lang="ts">
  import { useFrameRouter } from 'inertiax-svelte';

  const router = useFrameRouter();

  function nextStep() {
    // Navigates strictly inside this frame
    router.get('/wizard/step-2');
  }
</script>

<button on:click={nextStep}>Next Step</button>

3. Controlling a Frame From Somewhere Else

Sometimes a parent layout or a main data table needs to trigger an event inside a secondary panel (like a detail slider). You can target a frame using frameId in your visit options:

<script lang="ts">
  import { router } from 'inertiax-svelte';

  function openDetailsPanel(userId: number) {
    router.get(`/users/${userId}/details`, {}, { frameId: 'details' });
  }
</script>

<button on:click={() => openDetailsPanel(42)}>View Details</button>

Alternatively, if you prefer explicit control, you can instantiate a dedicated router and pass it directly to the frame:

<script lang="ts">
  import { createRouter, Frame } from 'inertiax-svelte';

  const detailsRouter = createRouter('details');

  function showUser(userId: number) {
    detailsRouter.visit(`/users/${userId}/details`);
  }
</script>

<button on:click={() => showUser(42)}>Show User</button>

<Frame id="details" router={detailsRouter} src="/users/42/details">
  <p>Loading details...</p>
</Frame>

4. Customizing Link Interception

Because standard <a> tags are intercepted automatically inside frames, building navigation is incredibly clean. If you want a specific link to bypass Inertia entirely, just use data-inertia-ignore. You can also intercept links programmatically using the onClickLink prop:

<script lang="ts">
  import { Frame } from 'inertiax-svelte';

  function onClickLink(event: MouseEvent, href: string) {
    if (href.startsWith('/admin')) {
      event.preventDefault(); // Stop frame navigation for admin routes
      // Implement custom routing or alert logic here
    }
  }
</script>

<Frame id="sidebar" src="/users/42/edit" {onClickLink} />

Installation & Migration

Because Inertia X.11 is a complete replacement ecosystem built over Inertia 3, migrating means swapping out the core packages. Your backend adapters (Laravel, Rails, Go, etc.) require zero changes!

# Using npm
npm remove @inertiajs/svelte @inertiajs/vite @inertiajs/core
npm install inertiax-svelte inertiax-vite inertiax-core

Next, update your imports across your project files:

Change @inertiajs/svelte -> inertiax-svelte
Change @inertiajs/core -> inertiax-core
Change @inertiajs/vite -> inertiax-vite

Wrapping Up

Rewriting Inertia X from scratch for the 3.x branch was a massive undertaking, but the result is a bulletproof development experience. You no longer have to fight the framework to build complex, multi-region web applications.

Go check out the code on GitHub, install the package, and let me know what incredible interfaces you create with it!

Setting up a new Rails 7 app with Vite, Inertia, and Svelte

Stefan Buhrmester — Wed, 22 Dec 2021 11:45:08 +0000

Rails 7 has been released and Webpacker is being phased out.

And if you're anything like me and prefer to use HMR and component frameworks over Hotwire and importmaps, you might want to look for a Webpacker alternative now. I found Vite Ruby to be a capable replacement, which also (supposedly) makes your development flow more faster™.

So let's take a look at how to set up a new Rails 7 app using my favorite frameworks out there (Inertia and Svelte) and bundle it all up with Vite.

Let's go

Start off by initializing a new Rails 7 app without Javascript and asset pipeline:

rails new app --skip-javascript --skip-asset-pipeline

Once this is done, add the inertia_rails and vite_rails gems:

bundle add inertia_rails
bundle add vite_rails

The vite_rails gem adds an installer to your project. Run it with

bundle exec vite install

This generates default vite config files, a frontend directory, and also updates your layout file to include the vite bundle. It will also setup our initial package.json. We'll need more packages. Add them:

npm install -D axios svelte @sveltejs/vite-plugin-svelte @inertiajs/svelte

IMPORTANT UPDATE:
Since vite-plugin-svelte version 2.0, it is required that your package.json contains "type": "module". You will have to add this manually if it doesn't already.

Then find application.js in our new app/frontend/entrypoints directory and replace its contents with:

import axios from 'axios'

import { createInertiaApp } from '@inertiajs/svelte'


const pages = import.meta.glob('../pages/**/*.svelte')

const csrfToken = document.querySelector('meta[name=csrf-token]').content
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken



createInertiaApp({ 
  resolve: name => pages[`../pages/${name}.svelte`](),
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

Next, open up your vite.config.ts file and change it like so:

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  resolve: {
    dedupe: ['axios']
  },
  plugins: [
    RubyPlugin(),
    svelte()
  ]
})

This config file ensures that axios is only included once in your bundle, and Inertia and your own imports will actually resolve to the same axios.

Now you can place your Inertia page components into app/frontend/pages, start your rails server with rails s, the dev server with ./bin/vite dev, and it should all work as usual.

Bonus: Persistent Layouts

In the example above you might have noticed the lack of a persistent layout - a parent component that won't change upon navigation. To add a persistent layout, update your application.js like this:

import axios from 'axios'

import Layout from '../pages/_layout.svelte'

import { createInertiaApp } from '@inertiajs/svelte'

const pages = import.meta.glob('../pages/**/*.svelte')

const csrfToken = document.querySelector('meta[name=csrf-token]').content
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken

createInertiaApp({ 
  resolve: async name => {
    const page = await pages[`../pages/${name}.svelte`]()
    return Object.assign({layout: Layout}, page)
  },
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

Now you can use persistent layouts with Inertia and Vite.

Happy coding 😊

Fluid page transitions with Svelte & Sapper

Stefan Buhrmester — Wed, 03 Jul 2019 07:29:41 +0000

UPDATE: This post is now over 2 years old, but it's still kinda relevant. This technique should work exactly the same with SvelteKit.

Ever come across websites with cool animations whenever navigating from one page to another? For example this website by Sarah Drasner. Usually, you'd use client-side libraries and clever CSS tricks to achieve these sort of things. Probably nothing wrong with that, but it adds to your website's overall download size, and your CSS will become hard to maintain as your site grows in complexity. However, thanks to Svelte, we can now do these cool things without any client-side library or CSS trickery:

(Try it out)

So now we can have cool PWAs, that are server-side rendered, have smooth page transitions, and are compiled down to really tiny amounts of javascript. With no need for client-side libraries, virtual DOMs, or shuffling CSS classes around. Oouwee!

And with that, our lives are now complete. Because what else could we possibly want? We should now all go and praise Rich Harris the JavaScript God. Or do we need more JavaScript frameworks? Don't we have enough? I can't take it anymore. Make it stop. Aaaaaahhh this is the end.

How?

These animations all use Svelte's crossfade transition. If you haven't used it before, I suggest checking out the tutorial. It will teach you how to crossfade two elements within the same component. But we are interested in crossfading an element from one component into another (in Sapper, each page is a component). The trick to making the crossfade transition work across different pages (or components) defined in separate files, is to create the crossfade transition in its own module/file, and import it into the different components. Check it out:

Here we create the crossfade transition in its own file and export the send and receive functions so that we can reuse them in different files.

// crossfade.js
import { quintOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({
    duration: d => Math.sqrt(d * 300),
    fallback(node, params) {
        const style = getComputedStyle(node);
        const transform = style.transform === 'none' ? '' : style.transform;

        return {
            duration: 600,
            easing: quintOut,
            css: t => `
                transform: ${transform} scale(${t});
                opacity: ${t}
            `
        };
    }
});

export {send, receive};

And then we use the send and receive function.

// page1.svelte
<script>
  import {send, receive} from './crossfade.js';
</script>

<main>
  <h1 out:send="{{key: 'h1'}}" in:receive="{{key: 'h1'}}">Look, I'm above the image</h1>
  <img out:send="{{key: 'borat'}}" in:receive="{{key: 'borat'}}" alt='Borat' src='great-success.png'>
</main>

And then use the same send and receive function again, making the crossfade work across components.

// page2.svelte
<script>
  import {send, receive} from './crossfade.js';
</script>

<main>
  <img out:send="{{key: 'borat'}}" in:receive="{{key: 'borat'}}" alt='Borat' src='great-success.png'>
  <h1 out:send="{{key: 'h1'}}" in:receive="{{key: 'h1'}}">Now I am below the image</h1>
</main>

The container needs to be absolutely positioned, otherwise it won't work.

// global.css
main {
  position: absolute;
  width: 100%;
}

There you go. Thanks for reading.

Visit https://buhrmi.dev if you'd like professional support.