[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3626":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":38,"readmeContent":39,"aiSummary":40,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":41,"discoverSource":42},3626,"react-admin","marmelab\u002Freact-admin","marmelab","A frontend Framework for single-page applications on top of REST\u002FGraphQL APIs, using TypeScript, React and Material Design","http:\u002F\u002Fmarmelab.com\u002Freact-admin",null,"TypeScript",26773,5456,262,45,0,2,9,84,8,86.9,"MIT License",false,"master",true,[27,28,29,30,31,32,33,34,5,35,36,37],"admin","admin-dashboard","admin-on-rest","admin-ui","frontend-framework","graphql","material-ui","react","reactjs","rest","single-page-app","2026-06-12 04:00:18","# react-admin [![FOSSA Status](https:\u002F\u002Fapp.fossa.io\u002Fapi\u002Fprojects\u002Fgit%2Bgithub.com%2Fmarmelab%2Freact-admin.svg?type=shield)](https:\u002F\u002Fapp.fossa.io\u002Fprojects\u002Fgit%2Bgithub.com%2Fmarmelab%2Freact-admin?ref=badge_shield) [![StandWithUkraine](https:\u002F\u002Fraw.githubusercontent.com\u002Fvshymanskyy\u002FStandWithUkraine\u002Fmain\u002Fbadges\u002FStandWithUkraine.svg)](https:\u002F\u002Fgithub.com\u002Fvshymanskyy\u002FStandWithUkraine\u002Fblob\u002Fmain\u002Fdocs\u002FREADME.md)\n\nA frontend Framework for building single-page applications running in the browser on top of REST\u002FGraphQL APIs, using TypeScript, [React](https:\u002F\u002Ffacebook.github.io\u002Freact\u002F) and [Material Design](https:\u002F\u002Fmaterial.io\u002F). Open sourced and maintained by [marmelab](https:\u002F\u002Fmarmelab.com\u002F).\n\n[Home page](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002F) - [Documentation](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002Fdocumentation.html) - [Examples](#examples) - [Blog](https:\u002F\u002Fmarmelab.com\u002Fblog\u002Ftags\u002Freact-admin) - [Releases](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Freleases) - [Support](#support)\n\n[![react-admin-demo](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002Fimg\u002Freact-admin-demo-still.png)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=bJEo1O1oT6o)\n\n## Features\n\n* 🔌 **Backend Agnostic**: Connects to any API (REST or GraphQL, see the [list of more than 45 adapters](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002FDataProviderList.html))\n\n* 🧩 **All The Building Blocks You Need**: Provides hooks and components for authentication, routing, forms & validation, datagrid, search & filter, relationships, validation, roles & permissions, rich text editor, i18n, notifications, menus, theming, caching, etc.\n\n* 🪡 **High Quality**: Accessibility, responsive, secure, fast, testable\n\n* 💻 **Great Developer Experience**: Complete documentation, IDE autocompletion, type safety, storybook, demo apps with source code, modular architecture, declarative API\n\n* 👑 **Great User Experience**: Optimistic rendering, filter-as-you-type, undo, preferences, saved queries\n\n* 🛠 **Complete Customization**: Replace any component with your own\n\n* ☂️ **Opt-In Types**: Develop either in TypeScript or JavaScript\n\n* 👨‍👩‍👧‍👦 Powered by [Material UI](https:\u002F\u002Fmui.com\u002Fmaterial-ui\u002Fgetting-started\u002F), [react-hook-form](https:\u002F\u002Freact-hook-form.com), [react-router](https:\u002F\u002Freacttraining.com\u002Freact-router\u002F), [react-query](https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest\u002Fdocs\u002Fframework\u002Freact\u002Foverview), [TypeScript](https:\u002F\u002Fwww.typescriptlang.org\u002F) and a few more\n\n## Installation\n\nReact-admin is available from npm. You can install it (and its required dependencies)\nusing:\n\n```sh\nnpm install react-admin\n#or\nyarn add react-admin\n```\n\n## Documentation\n\n* Read the [Tutorial](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002FTutorial.html) for a 30 minutes introduction\n* Watch the [YouTube video tutorials](https:\u002F\u002Fwww.youtube.com\u002F@react-admin)\n* Head to the [Documentation](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002Fdocumentation.html) for a complete API reference\n* Checkout the source code of the examples ([e-commerce](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Ftree\u002Fmaster\u002Fexamples\u002Fdemo), [CRM](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Ftree\u002Fmaster\u002Fexamples\u002Fcrm), [blog](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Ftree\u002Fmaster\u002Fexamples\u002Fsimple), [media player](https:\u002F\u002Fgithub.com\u002Fnavidrome\u002Fnavidrome\u002Ftree\u002Fmaster\u002Fui))\n\n## At a Glance\n\n```jsx\n\u002F\u002F in app.js\nimport * as React from \"react\";\nimport { createRoot } from 'react-dom\u002Fclient';\nimport { Admin, Resource } from 'react-admin';\nimport restProvider from 'ra-data-simple-rest';\n\nimport { PostList, PostEdit, PostCreate, PostIcon } from '.\u002Fposts';\n\ncreateRoot(document.getElementById('root')!).render(\n    \u003CAdmin dataProvider={restProvider('http:\u002F\u002Flocalhost:3000')}>\n        \u003CResource name=\"posts\" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} \u002F>\n    \u003C\u002FAdmin>\n);\n```\n\nThe `\u003CResource>` component defines CRUD pages (`list`, `edit`, and `create`) for an API endpoint (`\u002Fposts`). The page components use react-admin components to fetch and render data:\n\n```jsx\n\u002F\u002F in posts.js\nimport * as React from \"react\";\nimport { List, DataTable, Edit, Create, SimpleForm, DateField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';\nimport BookIcon from '@mui\u002Ficons-material\u002FBook';\nexport const PostIcon = BookIcon;\n\nexport const PostList = () => (\n    \u003CList>\n        \u003CDataTable>\n            \u003CDataTable.Col source=\"id\" \u002F>\n            \u003CDataTable.Col source=\"title\" \u002F>\n            \u003CDataTable.Col source=\"published_at\" field={DateField} \u002F>\n            \u003CDataTable.Col source=\"average_note\" \u002F>\n            \u003CDataTable.Col source=\"views\" \u002F>\n            \u003CDataTable.Col>\n                \u003CEditButton \u002F>\n            \u003C\u002FDataTable.Col>\n        \u003C\u002FDataTable>\n    \u003C\u002FList>\n);\n\nconst PostTitle = () => {\n    const record = useRecordContext();\n    return \u003Cspan>Post {record ? `\"${record.title}\"` : ''}\u003C\u002Fspan>;\n};\n\nexport const PostEdit = () => (\n    \u003CEdit title={\u003CPostTitle \u002F>}>\n        \u003CSimpleForm>\n            \u003CTextInput disabled source=\"id\" \u002F>\n            \u003CTextInput source=\"title\" \u002F>\n            \u003CTextInput source=\"teaser\" options={{ multiline: true }} \u002F>\n            \u003CTextInput multiline source=\"body\" \u002F>\n            \u003CDateInput label=\"Publication date\" source=\"published_at\" \u002F>\n            \u003CTextInput source=\"average_note\" \u002F>\n            \u003CTextInput disabled label=\"Nb views\" source=\"views\" \u002F>\n        \u003C\u002FSimpleForm>\n    \u003C\u002FEdit>\n);\n\nexport const PostCreate = () => (\n    \u003CCreate title=\"Create a Post\">\n        \u003CSimpleForm>\n            \u003CTextInput source=\"title\" \u002F>\n            \u003CTextInput source=\"teaser\" options={{ multiline: true }} \u002F>\n            \u003CTextInput multiline source=\"body\" \u002F>\n            \u003CTextInput label=\"Publication date\" source=\"published_at\" \u002F>\n            \u003CTextInput source=\"average_note\" \u002F>\n        \u003C\u002FSimpleForm>\n    \u003C\u002FCreate>\n);\n```\n\n## Does It Work With My API?\n\nYes.\n\nReact-admin uses an adapter approach, with a concept called *Data Providers*. Existing providers can be used as a blueprint to design your API, or you can write your own Data Provider to query an existing API. Writing a custom Data Provider is a matter of hours.\n\n![Data provider architecture](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002Fimg\u002Fdata-provider.png)\n\nSee the [Data Providers documentation](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002FDataProviders.html) for details.\n\n## Batteries Included But Removable\n\nReact-admin is designed as a library of loosely coupled React components and hooks exposing reusable controller logic. It is very easy to replace any part of react-admin with your own, e.g. using a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.\n\n## Examples\n\nThere are several examples inside the `examples` folder:\n\n* `simple` ([StackBlitz](https:\u002F\u002Fstackblitz.com\u002Fgithub\u002Fmarmelab\u002Freact-admin\u002Ftree\u002Fmaster\u002Fexamples\u002Fsimple?file=src%2Findex.tsx)): a simple blog with posts, comments and users that we use for our e2e tests.\n* `e-commerce`: ([demo](https:\u002F\u002Fmarmelab.com\u002Freact-admin-demo\u002F), [source](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Ftree\u002Fmaster\u002Fexamples\u002Fdemo)) A fictional poster shop admin, serving as the official react-admin demo.\n* `CRM`: ([demo](https:\u002F\u002Fmarmelab.com\u002Freact-admin-crm\u002F), [source](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Ftree\u002Fmaster\u002Fexamples\u002Fcrm)) A customer relationship management application\n* `helpdesk`: ([demo](https:\u002F\u002Fmarmelab.com\u002Freact-admin-helpdesk\u002F), [source](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin-helpdesk)) A ticketing application with realtime locks and notifications\n* `tutorial` ([Stackblitz](https:\u002F\u002Fstackblitz.com\u002Fgithub\u002Fmarmelab\u002Freact-admin\u002Ftree\u002Fmaster\u002Fexamples\u002Ftutorial)): the application built while following the [tutorial](https:\u002F\u002Fmarmelab.com\u002Freact-admin\u002FTutorial.html).\n\nYou can run those example applications by calling:\n\n```sh\n# At the react-admin project root\nmake install\n# or\nyarn install\n\n# Run the simple application\nmake run-simple\n\n# Run the tutorial application\nmake build\nmake run-tutorial\n\n# Run the demo application\nmake build\nmake run-demo\n```\n\nAnd then browse to the URL displayed in your console.\n\n## Support\n\n- Get commercial support from Marmelab via [React-Admin Enterprise Edition](https:\u002F\u002Freact-admin-ee.marmelab.com#support)\n- Get community support via [Discord](https:\u002F\u002Fdiscord.gg\u002FGeZF9sqh3N) and [StackOverflow](https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002Ftagged\u002Freact-admin). \n\n## Versions In This Repository\n\n* [master](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Fcommits\u002Fmaster) - commits that will be included in the next _patch_ release\n\n* [next](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Fcommits\u002Fnext) - commits that will be included in the next _major_ or _minor_ release\n\nBugfix PRs that don't break BC should be made against **master**. All other PRs (new features, BC breaking bugfixes) should be made against **next**.\n\n## Contributing\n\nIf you want to give a hand: Thank you! There are many things you can do to help making react-admin better. \n\nThe easiest task is **bug triaging**. Check that new issues on GitHub follow the issue template and give a way to reproduce the issue. If not, comment on the issue to ask precisions. Then, try and reproduce the issue following the description. If you managed to reproduce the issue, add a comment to say it. Otherwise, add a comment to say that something is missing. \n\nThe second way to contribute is to **answer support questions on [StackOverflow](https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002Ftagged\u002Freact-admin)**. There are many beginner questions there, so even if you're not super experienced with react-admin, there is someone you can help there. \n\nPull requests for **bug fixes** are welcome on the [GitHub repository](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin). There is always a bunch of [issues labeled \"Good First Issue\"](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Fissues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) in the bug tracker—start with these. \n\nIf you want to **add a feature**, you can open a Pull request on the `next` branch. We don't accept all features—we try to keep the react-admin code small and manageable. Try and see if your feature can't be built as an additional `npm` package. If you're in doubt, open a \"Feature Request\" issue to see if the core team would accept your feature before developing it.\n\nFor all Pull requests, you must follow the coding style of the existing files (based on [prettier](https:\u002F\u002Fgithub.com\u002Fprettier\u002Fprettier)), and include unit tests and documentation. Be prepared for a thorough code review, and be patient for the merge—this is an open-source initiative.\n\n**Tip**: Most of the commands used by the react-admin developers are automated in the `makefile`. Feel free to type `make` without argument to see a list of the available commands. \n\n### Setup\n\nClone this repository and run `make install` to grab the dependencies, then `make build` to compile the sources from TypeScript to JS.\n\n### Testing Your Changes In The Example Apps\n\nWhen developing, most of the time we use the **simple example** to do visual check. It's the same application that we use in Stackblitz to reproduce errors (see https:\u002F\u002Fstackblitz.com\u002Fgithub\u002Fmarmelab\u002Freact-admin\u002Ftree\u002Fmaster\u002Fexamples\u002Fsimple). The source is located under `examples\u002Fsimple\u002F`. Call `make run` to launch that example on port 8080 (http:\u002F\u002Flocalhost:8080). This command includes a `watch` on the react-admin source, so any of the changes you make to the react-admin packages triggers a live update of the simple example in your browser. \n\nHowever, the simple example is sometimes too limited. You can use the **demo example** (the source for https:\u002F\u002Fmarmelab.com\u002Freact-admin-demo\u002F), which is more complete. The source is located under `examples\u002Fdemo\u002F`. Call `make run-demo` to launch the demo example with a REST dataProvider, or `make run-graphql-demo` to run it with a GraphQL dataProvider. Unfortunately, due to the fact that we use Create React App for this demo, these commands don't watch the changes made in the packages. You'll have to rebuild the react-admin packages after a change (using `make build`, or the more targeted `make build-ra-core`, `make build-ra-ui-materialui`, etc.) to see the effect in the demo app.\n\nBoth of these examples work without server—the API is simulated on the client-side. \n\n### Testing Your Changes In Your App\n\nUsing `yarn link`, you can have your project use a local checkout of the react-admin package instead of downloading from npm. This allows you to test react-admin changes in your app.\n\nThe following instructions are targeting yarn >= v3 in the client app.\n\n```sh\n# Go to the folder of your client app\n$ cd \u002Fcode\u002Fpath\u002Fto\u002Fmyapp\u002F\n\n# Use the latest version of yarn package manager\n$ corepack enable && yarn set version stable\n\n# Replace the npm-installed version with a symlink to your local version \n$ yarn link \u002Fcode\u002Fpath\u002Fto\u002Freact-admin\u002Fpackages\u002Freact-admin\n\n# If you modified additional internal packages in the react-admin monorepo, e.g. ra-core, also make a link\n$ yarn link \u002Fcode\u002Fpath\u002Fto\u002Freact-admin\u002Fpackages\u002Fra-core\n\n# Build all of the react-admin package distribution\n$ cd \u002Fcode\u002Fpath\u002Fto\u002Freact-admin\u002F && make build\n\n# Return to your app and ensure all dependencies have resolved \n$ cd \u002Fcode\u002Fpath\u002Fto\u002Fmyapp\u002F && yarn install\n\n# Start your app\n$ yarn start\n```\n\nTip: If you are still using yarn v1 as your package manager in your client app, we strongly recommend you to update as it is frozen and no longer maintained.\n\n### Automated Tests\n\nAutomated tests are also crucial in our development process. You can run all the tests (linting, unit and functional tests) by calling:\n\n```sh\nmake test\n```\n\nUnit tests use `jest`, so you should be able to run a subset of tests, or run tests continuously on change, by passing options to \n\n```sh\nyarn jest\n```\n\nBesides, tests related to the modified files are run automatically at commit using a git pre-commit hook. This means you won't be able to commit your changes if they break the tests. \n\nWhen working on the end-to-end tests, you can leverage [cypress](https:\u002F\u002Fwww.cypress.io\u002F) runner by starting the simple example yourself (`make run-simple` or `yarn run-simple`) and starting cypress in another terminal (`make test-e2e-local` or `yarn test-e2e-local`).\n\n### Coding Standards\n\nIf you have coding standards problems, you can fix them automatically using `prettier` by calling\n\n```sh\nmake prettier\n```\n\nHowever, these commands are run automatically at each commit so you shouldn't have to worry about them.\n\n### Documentation\n\nIf you want to contribute to the documentation, install [jekyll](https:\u002F\u002Fjekyllrb.com\u002Fdocs\u002Fhome\u002F), then call\n\n```sh\nmake doc\n```\n\nAnd then browse to [http:\u002F\u002Flocalhost:4000\u002F](http:\u002F\u002Flocalhost:4000\u002F)\n\n## License\n\nReact-admin is licensed under the [MIT License](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin\u002Fblob\u002Fmaster\u002FLICENSE.md), sponsored and supported by [marmelab](https:\u002F\u002Fmarmelab.com). It is free to use, even for commercial purpose. \n\nIf you want to give back, please talk about it, [help newcomers](https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002Ftagged\u002Freact-admin), [subscribe to the Enterprise Edition](https:\u002F\u002Freact-admin-ee.marmelab.com\u002F), or contribute code.\n\n[![FOSSA Status](https:\u002F\u002Fapp.fossa.io\u002Fapi\u002Fprojects\u002Fgit%2Bgithub.com%2Fmarmelab%2Freact-admin.svg?type=large)](https:\u002F\u002Fapp.fossa.io\u002Fprojects\u002Fgit%2Bgithub.com%2Fmarmelab%2Freact-admin?ref=badge_large)\n","react-admin 是一个基于 REST\u002FGraphQL API 构建单页应用的前端框架，使用 TypeScript、React 和 Material Design 开发。其核心功能包括后端无关性（支持超过45种适配器）、全面的构建模块（如认证、路由、表单验证等）、高质量标准（可访问性、响应式设计、安全性、性能和测试友好）以及出色的开发体验（详尽文档、IDE 自动补全、类型安全）。此外，它还提供了优化的用户体验特性，如乐观渲染、即时过滤、撤销操作等，并且支持完全自定义。该框架适用于需要快速搭建后台管理系统或数据驱动型 Web 应用的场景。","2026-06-11 02:55:07","top_language"]