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:
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! 
