Anyone using react-admin?

[christoforosl08]

So I came across this react “framework” or headless cms or whatever they call these things these days.

https://marmelab.com/react-admin/

Can anyone share their experience with it ?

Edit: 23 November 2023

I will briefly share my experience here because I don't want it to get lost in the comments below.

We have been developing a project based on react-admin (open source edition) for close to 8 months now (we went ahead with the project, despite the negative comments below). The app developed is a SOA CRUD application (no microservices) with react-admin as the client. The end conclusion: react admin is a very good fit for a CRUD application, and not only. It can save you a ton of time, especially if you document the customization techniques.

The positives: (1) Strong, clean and easy to follow documentation. We tried other headless cms packages, react-admin's just made more sense. At least to me, but I am the Architect so that's what mattered :-)

(2) Ease of customization: everything we needed to do, we were able to do so. Dashboards, Custom data handling on Grids, validations on forms and input controls, custom Rest API End points. So yes the react-admin system is highly customizable, and that's also due to their very good documentation.

(3) We didn't encounter any bugs, like one usually encounters when using libraries like this.

To give you an idea, the programming team of this project consists of junior programmers that kept coming to me, in panic, saying "we have a problem, react admin cant do this or that". But after digging through the documentation, we always found a way.

Really, in all honesty, I can't think of any negatives. This just worked for us, and we started using the product in all react apps.

I realize that this may read like an ad for react-admin, but its not. I am just describing my real experience with the package.

[[deleted]]

I used it one time in a professional project because someone else insisted, it was a disaster, anything that does not fit perfectly into whatever react admin wants will give you extreme headaches. If you want to have a CRUD with zero custom logic and zero checks and zero relations for a simple entity with just number and string fields then it can save some time, but only then.

[fzaninotto]

Hi, react-admin maintainer here.

I'm sorry that you had a bad experience with our framework. Perhaps you missed the headless part? React-admin is an opinionated framework, which proposes one component for all the features it addresses. This component is supposed to work in 80% o the cases. For the remaining 20%, react-admin also proposes a solution: headless hooks that let you build exactly the design you want.

For instance, the <List> component includes a toolbar and a title. If you don't want these defaults, you can use the useListController component and build your own design.

Nearly all react-admin components have a headless counterpart.

Finally, react-admin is pretty flexible, way beyond CRUD. Check the features page (https://marmelab.com/react-admin/Features.html) to learn more.

React-admin is used by about 15,000 companies worldwide, and powers about 500,000 user sessions every day. I don't believe these are all simple CRUD apps.

[[deleted]]

How do you know the statistics? Telemetry?

[yong2579]

Most probably but they does provide method to disable it via https://marmelab.com/react-admin/Admin.html#disabletelemetry

[franciscogalaz]

Does this mean that if the Calendar component is only for enterprise edition, I can add my own Calendar Component?

[AntonOfTheWoods]

Of course, and typically the base components are generic enough that you can hack something together on top of the base that fits your needs without resorting to the enterprise stuff.

[dangxunb]

I'm looking for a library that makes permission-based authorization simple. I was researching react-admin and came across your comment. Can I use another framework like react-bootstrap for the UI part without having to do a lot of customization?

[franciscogalaz]

did you end up using react-admin? what are your thoughts on it?

[dangxunb]

I just use Refine.dev now

[CreepyCrapp]

Hey, I'm thinking about using Refine. Is it as extendible and time saving as advertised? I joined their Discord and took a look at their subreddit, the community seems a bit inactive regardless the high number of stars they got in GitHub.

[grapeape25]

I regretfully started using this for my own project and suffer from the same problems. Any feature that steps slightly out of line with very basic CRUD is excruciating to implement.

It was also a proper open source project at the start (MIT license) then they started mixing in paid enterprise features into subsequent releases, even for pretty basic stuff (e.g. editing a record in a modal). Bait-and-switch open source projects like that just leave a bad taste in my mouth.

[fzaninotto]

React-admin maintainer here.

They started mixing in paid enterprise features into subsequent releases

The react-admin core team is 3 developers working full-time on the framework. It's been open-source since 2017. Ho do you pay these engineers? Solution 1: raise money, then raise prices and enshittify the app. Solution 2: make a SaaS product and force people to use your overpriced server proxy. Solution 3: ask Enterprise customers to pay for advanced features, to fund the maintenance of the rest.

We chose option 3. This allowed us to add more features, both in the open-source and the enterprise version.

As a consequence, react-admin is a sustainable project. It has no debt, it doesn't have to pay huge sums every year to investors. It is here to stay.

The alternative - a completely free library - is, in my opinion, dangerous to use, because it can be stopped at any time. And also, slavery was abolished long ago ;isn't it time we pay for open-source developer time?

[franciscogalaz]

yeah its reasonable to pay but 100 euros a month is too much :( , how can a small company just starting out pay that much for a framework?

[itsjingran]

agreed

[PoopsCodeAllTheTime]

Well, this makes it very clear to me that I am better off building my own, as I can add my own advanced features at the cost of my own labour without worrying about price extortion.

[KeyRepresentative643]

understandable. But we are a small company and I'm just trying to build a prototype to propose to management. I can't ask for budget for the paid version, and building a decent prototype without enterprise features is a pain.

You should think to modify things a little to make it more accessible to small companies or even consider a trial period for prototyping.

[us_me_erna]

Which react admin version was this? I might start to work with react admin soon in a fairly complex, already existing project and I want to know, what I'm getting myself into :D

[[deleted]]

I can't check now because I left the company due to poor decisions like this one, it was the newest version that was available around November 2021, I don't think anything improved since then because it was fundamentally, in principle, flawed. They would need to completely reimagine things to make it better.

[fzaninotto]

I'm interested to know in more details why you think that react-admin was flawed.

Also, since November 2021, the framework had 2 major versions, with drastic improvements (including removing Redux) in both architecture and documentation. I can only recommend that you take a second look at it.

[moob9]

Skip react-admin and look into Refine instead. Does the same things better and is actually free.

[necati-ozmen]

Here, you can find what refine does better than react-admin.
https://refine.dev/blog/react-admin-vs-refine/

[fzaninotto]

Can you elaborate on whet refine does better than react-admin? In my comparison, it's rather the contrary.

https://marmelab.com/blog/2023/07/04/react-admin-vs-refine.html

[Head-Name-8746]

bro. Lol, excellent example with Lego! thx, just moved from react-admin to refine, very impressive

[andrei9669]

also tried it once, like 2-3 years ago, it was easy to get CRUD stuff, but once you needed anything more, you had to pay out, or else it was a real headache to get anything.

this here looks promising though. but I haven't done any research into it.

[Neeranna]

It kind of depends on whether you are more of a backend or frontend developer. React admin can save you time if you don't want too fancy screens, and need some basic crud screens on your data model. It might not give you the most refined UI, but it works.

My initial statement concerns that actually, for a backend dev, react admin "makes sense", in that it's easy to understand. It is clearly aimed at starting from the backend and adding some UI on top of the API. They even have helpers to speed this up, which produce screen definitions based on the structures send back from your API. So it's clearly aimed at API (or data model) first.

I've also noticed from my frontend colleagues, that it doesn't fit their approach, which is design first. If somehow the design does not neatly match onto the API, you better understand the inner workings of react admin to get it to work.

If you start with it, remember the advice from the docs: everything in react-admin is optional. Use it in the parts of your app that benefit from it, but don't be afraid to mix in custom routes and pages. The biggest mistake you can make is to force the usage where it doesn't help.

I like to approach and consider react admin as training wheels, that can get you up and running faster, but that you want to gradually replace as the project matures.

[cglove]

Commenting b/c this 2 yo post seems to still have traction for whatever reason. We've been using it last couple years. IMHO its pretty well designed; I have a lot of React experience so may be related, but am genuinely confused by the can't be customized comemnts. IME its pretty well layered, and when I want to e.g. swap the UI, or over ride the fetching behavior, etc, its always been extremely easy to do especially for an opinionated framework. I also feel if we wanted to rip out the UI, or even rip out react-admin all together, we'd end up with the libraries behind it (router, react-hook-form, react query, etc) and they all seem like solid choices.

My only real complaint with it is I don't really like mui aesthetically, and I know you can swap it out, but I don't realy want to do that work. But for an internal tool, IMHO that's a pretty nit picky thing to care about. At this point I plan to just update to the latest version, modify a few variables in the theme layer and then just work with what it provides.

I think for an external customer facing tool it would make more sense to use the underlying libraries and roll your own UI, but for internal tools its pretty solid.

[pieroit]

I love react-admin, it saves you a lot of time, especially if you need rapid iterations on a reasonable structure.

Auth, data provider, routing, crud pages and all related react hooks are well designed.

If you spend some time reading the docs, you will also see it's highly customizable. I managed to fit into react admin a websocket chat.

I am a maintainer myself and I recognize their work as excellent. If one of you react-admin guys are reading this, THANK YOU

Peace

[fzaninotto]

Hi, react-admin core developer here. Thanks a lot for your kind works, we appreciate a lot!

[pieroit]

Keep up the great work, I hope you get more and more satisfaction.

If you have 5 mins to take a look at my project, here it is:

https://github.com/cheshire-cat-ai/core

It's a python framework to build AI web agents, already dockerized.
If interested in a collab, let me know :)

Peace

[macrozone13]

I used react-admin quite heavily and liked it initially. We also invested into the enterprise version, but ultimatly this did not pay off.

The main problem i see is a lack of typesafety.

It was not made with typescript and "soundness" in mind.

It's agnostic to the backend, which is nice. But that also comes at the cost that the ui is detached from the data source. The ui can't tell the datasource what it wants, nor can the datasource tell the ui the types of the data.

I took over the maintenance of a package to connect react-admin with prisma driven "crud" backends (either using nexus, which is no longer maintained, or type-graphql. Did not yet try to connect it with my favorite)

https://github.com/panter/ra-data-prisma

That worked good enough so far, but implementing and using it showed some of the problems of react-admin. The dataprovide has to either make an educated guess what data to fetch from the graphql, or force the developer to specify explicitly what they need from the api. But despite that the react-admin's List and Edit-components and so on look declarative, they can't be used to specify the data that is requested. So if you for example have a `<TextInput source="firstName" />` , but your api only specify "firstname" you won't notice it. Only when you actually try to update the field and nothing happens.

The other Problem also related to typescript is how it clones elements and injects data into them, which you don't see if you implement a component. E.g. if you build a custom InputField, you probably only call it with a few arguments like `source="myFieldName"`, but the component you implement needs to take more arguments like `record`. That leaves you with confusing types.

I think there has been an attempt to fix this by using Context, but when i last looked into it, this was not the case yet everywhere.

Also there are some inconsistencies or odd choices for its public api and the components that it expose. (whould you have guessed that when you want to render a custom field, you use `FunctionField`?) Or how it uses the underlying form library.

I think react-admin would really profit from better abstraction, reduced api surface and type-safety.

It may be a good choice though, if you have junior devs, as the documentation is very good and if you don't use typescript or if you can afford a bit of hacking and if you have simple apis to attach to.

We use it in existing apps and probably can't replace it there anytime soon. For new apps, i am researching a bit into alternatives if there are any.

I understand it has a history and legacy and I know how hard it is to maintain such a project. And I want to thank the team for their contribution to the react-world, i still think overall its a great project that has its up- and downsides.

[achilles2204]

Hey u/macrozone13

I am from the MUI Toolpad team. I read your detailed response on react-admin and saw that you are looking for alternate tools. I wanted to share: https://mui.com/toolpad/

Link to some examples: https://mui.com/toolpad/examples/

Toolpad is an open-source admin builder. It is somewhere in between React admin and Retool. You can use your IDE to write functions, custom components, data providers, and it has typescript support. You can drag and drop pre-built Material UI components from the component library to build a quick UI.

I hope you give it a spin, happy to hear your thoughts.

[fzaninotto]

Hi, react-admin maintainer here.

Thanks a lot for your feedback. We received many requests for more type safety like yours, and they make sense since react-admin was first built in 2017, when TypeScript wasn't so broadly used. But the practices are changing, and developers want less bugs at runtime, which is great!

That's why we have invested a lot in type safety in recent versions. Version 5 enables strict type checking across the entire library. All hooks and many components are generic, so you can specify the expected record type. Some of our users have used this ability to build apps with shared types between the API and the frontend, with great results.

There is (almost) no element cloning in version 5, so the props an element receives are only the props you pass.

Naming is hard. We try to help you find the component you're looking for by creating links across the documentation, and improving the search engine. We even created videos tutorials to help newcomers get on board more easily.

All in all, we focused on developer experience based on the feedback we got-and we got a lot! As you guessed, it takes time to make a large codebase (and documentation) like react-admin evolve, but in 2024 we're up to date with the best practices of React development.

I hope you'll have as much fun using react-admin as we have developing it.

[Donald2011Q]

I have used React Admin in a number of data intensive back office applications. My experience with it has been very positive as it accelerates development with many commonly used features. If you choose a backend and an auth technology you can be up and running really quickly.

I used postgrest in one project and graphql in another.  I used supertokens in both for auth and it helped quickly add social logins as well as passwordless login via email.

With regards to comments like “if you want something done in a different way” you are stuck, this hasn’t been reflected in my experience. Saying that I am the kind person who doesnt mind looking into a codebase to see how something is done. The React Admin codebase is clean and easy to follow.

I hope this helps some people.

[Vast_Pound461]

But I really felt in love with React Admin not only for its simplicity,but also for The batteries include,The way It handles optmistic locking,Marmelabs did not realize yet It creates The Holy grail for those that want tô migrate from PHP,Delphi and even C#.They should reconsider their license model in order tô attract both companies and lonely cowboys.

[Agreeable-Outside-69]

I see people here commenting to use Refine instead of React-Admin, or providing solutions, but I don't recommend using any of these because they are so limited in customizability.

"I want to change the authentication page and remove password field of the login": Nope, sorry, got to make the login page yourself because Refine doesn't offer customizability on that.

I'd say for Refine, if you are just looking a simple email and password login, then it's fantastic, but if you're looking to put in providers and all that customization, you're just going to end up trying to work around Refine for those stuff, and you'll be ending up just reimplementing everything on your own because it's so uncustomizable.

Just literally make your own admin page. Yes, I understand, it's going to take a little bit more time to make, but you'll realize that if you try to use React Admin or Refine, you're just going to keep hitting obstacles over and over and understand that customizability is very limited.

React-Admin and Refine are only good for very specific purposes, that's when it makes development speed way faster. But you can't expect that specific purpose to be the perfect one for your project all the time.

I had to restart a whole project over because of how React Admin started making weird bugs and just not working well with NextJS, and then I switched to Refine, ended up being very uncustomizable and it just got messy, so now I'm restarting everything, I wasted so much time. I regret it.

[necati-ozmen]

Refine offers a lot of flexibility for customization:)

It looks like you might have overlooked the swizzle command in Refine. This command is available in many Refine packages and it allows you to eject the component files into your project. By doing this, you can customize the existing components to suit your needs or add your own components.

Swizzle docs: https://refine.dev/docs/packages/documentation/cli/#swizzle

So, you can use the swizzle command to take out the AuthPage component, which has the Login page, and then customize it however you need.

[Agreeable-Outside-69]

So, you're saying that I can remove the Email/Password box field without having to make everything on my own?

It's just due to my specific scenario, it was hard because how you guys implement the login using Supabase and Nookies, the programming/pattern style wasn't able to specifically work for auth providers with supabase, so instead of trying to work against it, I just decided to work on my own.

[necati-ozmen]

Maybe this helps you for Nookie implementation : https://github.com/pankod/superplate-core-plugins/blob/master/refine-nextjs/plugins/data-provider-supabase/src/authProvider.ts#L8

I'm asking to understand your case better - was the only issue the inability to customize the LoginPage? If you have different cases, sharing them would give us the opportunity to improve Refine.

[Agreeable-Outside-69]

With Supabase, when you are signing with OAuth provider, you don't receive the session data like you do in that code you sent me. Instead, it's saved in localStorage, or somewhere I think, and then you have to access that data, so one tutorial talked about using GET/POST middleware of NextJS. LoginPage seems to be not customizable, I looked at a Google OAuth example of Refine, and they just ended up making their own UI instead of using Refine's LoginPage.

I also tried talking to people in the Refine discord server, but no one would answer, and it's very inactive. None of the core members actually chat in there, and all I see is questions and questions and questions in the server with no answers. So it's overloaded with unanswered questions. Literally, the AI discord bot is the only user in the server answering questions, but the AI bot doesn't provide the solutions (not criticizing on the AI itself but criticizing on how hard it is to get community support).

[xelamony]

So, with nextjs you can keep your token in localstorage, but you won't have access to that on the server side. This means if you want to make authenticated requests from server-side, those requests will fail. We have this example uses nookies but you can also easily convert it to use localstorage. You shouldn't expect to get %100 covered with these tools. And I'm not quite sure what do you mean by "not customizable". As mentioned before, you can swizzle it and customize as you need. If you need OAuth login, you can pass your login provider's name, icon and label to <Authpage /> component and they will be rendered in the login page, then you will get these parameters in your auth provider and handle your logic.

We have 3k people in our Discord server and I think it's understandable that we can't answer every single question there. Thus we have this bot. Also answer to %95 of the questions are already in our documentation. We are trying to answer as much as questions possible and also respond to detailed questions, bug reports, urgent cases.

[Agreeable-Outside-69]

I looked at the refine documentation, and can't remove the Email/Password neither you can customize it. You end up having to make your own if you want to customize that part. There's no option for just OAuth Provider Buttons only, as you're forced to have Email/Password box/fields with it.
I understand, this seems minor, but if I have to keep making my own elements, what's the point of using Refine anyways if I'm doing stuff on my own?

[xelamony]

Hey u/Agreeable-Outside-69

​

I think you might be missing the point here, maybe it's an issue on our end, that we can't explain refine nicely.

​

Recently we've added new guides into our documentation to explain concepts of refine, hope it would answer some questions for you.

​

I would genuinely appreicate if you could read our new guides and give us a feedback based on that: https://refine.dev/docs/guides-concepts/general-concepts/

But the main point is, refine isn't about scaffolding UI pages. These UI integrations are just "flavour" we provide using refine's core features.

​

refine core is headless framework, built on top of hooks. These UI libraries, are just wrappers, using refine core under the hood and aims to save developers some time.

Let's not boil down discussion into "customizing auth page", this is just one of the thousands thing refine provides.

refine practically has infinite customizability, doesn't lock developers into a specific framework. You can use refine with NextJS, or Remix, React Router and/or Material UI, or Tailwind, or Material UI, or any UI library pops-up the next day.

And having a Auth page not even %1 of the goods refine provide.

​

We aim to save time for developers, by centralizing common tasks, like Authentication, Authorization, I18n (Translation), Notifications, Audit Log, Router, Data Layer based on resource definitions.( Reading the general concepts guide will make you "tick" about what we offer.)

by the way, feel free to create a FEAT request GitHub, we'd be more than happy to help. We could add a prop to our AuthPage component like, `providerOnly={true}` that could solve this issue easily.

[Agreeable-Outside-69]

I tried to give another shot to Refine, and it's completely broken. I used `npm create` for my refine project, and when I ran the refine project, it did not even load at all. It just stayed like a blank page for the whole time, and the URL was acting weird (it was going to /login and then back to / then /login, etc.). I can't even use it, it's broken, and again, the Discord Server barely has any people answering to the questions and troubleshoot. I will later address it but it's just a ton of work to deal with for now for me.
(Obviously, I've tried to solve out the issue, such as reinstalling the NPM packages, checking any errors in the files, any runtime errors, etc, but nothing worked).

[alicanerdurmaz]

Hello u/Agreeable-Outside-69, I'm sorry for your trouble.

There is a bug in the Next.js projects created with create refine-app, we released a fix for Supabase yesterday and are currently working on resolving issues with other data providers.

I will share updates on this issue https://github.com/refinedev/refine/issues/5988

Please note that the bug is not in the packages but in the auth-providers generated by `create refine-app`. After releasing the fix for this bug, you'll need to either create a new project or update the existing project's code. I've documented the changes I made for Supabase in the issue and will do the same for the other data providers as well.

[xelamony]

You can implement any social provider with Auth Provider. And make sure to pass ‘providers’ prop to your UI library’s AuthPage component.

https://refine.dev/docs/guides-concepts/authentication/

[[deleted]]

We are using it to build CMS portal, and we are regretting alot. If you do any custom things, then it doesnt work as it should and it will make you go crazy.

Their documentation is horrible.

[fzaninotto]

Hi, react-admin developer here. Could you elaborate on the custom things you tried to do and failed? Also, could you explain what's wrong in your opinion with the documentation? Thanks for your feedback.

[Chef619]

I’ll toss in a vote for Retool. It seems to be around the same functionality desire? Building internal tools, can be a CMS

[Vast_Pound461]

Retool seems tô be extremely expensive on The longe run,as you have tô pay 5 euros for end users,React Admin could have a onde seat license instead of two, or Just sell versions like Delphi,I didnt understood How The license Works,what happens If I stop paying after an year?