Routes - Type-safe Phoenix routes in your JavaScript/TypeScript!

Hello Elixir community! I’m excited to announce the first release of Routes, a library that automatically generates JavaScript and TypeScript route helpers from your Phoenix router. It aims to bring the convenience and type safety of Phoenix route helpers to your frontend code.

Why Routes?

Working with Phoenix and modern JavaScript frameworks, I often found myself manually maintaining route paths in the frontend or creating custom solutions to keep frontend routing in sync with Phoenix routes. Routes solves this by:

• Automatically generating route helpers from your Phoenix router
• Providing full TypeScript support with type definitions
• Supporting live reloading during development
• Handling path parameters and query strings with type safety
• Ensuring route parameters are correctly typed and validated

Quick Example

# In your Phoenix router
defmodule MyAppWeb.Router do
  use Phoenix.Router
  use Routes

  scope "/" do
    get "/users/:id", UserController, :show, as: :user
  end
end

// In your JavaScript/TypeScript code
import Routes from './routes';

// Type-safe route generation
const url = Routes.path('user.show', { id: 123 });
// => "/users/123"

// With query parameters
const searchUrl = Routes.path('user.index', {
  _query: { search: 'john', filter: 'active' }
});
// => "/users?search=john&filter=active"

Inertia.js Integration

If you’re using Inertia.js, Routes provides a clean way to create type-safe navigation:

<Link
  to="/users/:id"
  params={{ id: 123, _query: { tab: "profile" } }}
>
  View Profile
</Link>

Getting Started

Add to your mix.exs:

def deps do
  [
    {:routes, "~> 0.1.0"}
  ]
end

Configure in config.exs:

config :routes,
  router: MyAppWeb.Router,
  typescript: true,
  routes_path: "assets/js/routes"

Links

• Documentation
• GitHub Repository:

https://github.com/assimelha/routes

Feedback Welcome!

This is the initial release, and I’d love to hear your thoughts, suggestions, and use cases. Feel free to open issues on GitHub or contribute to the project.

Happy coding!