{"id":13544475,"url":"https://github.com/marmelab/admin-on-rest","last_synced_at":"2025-04-02T14:31:17.989Z","repository":{"id":57101667,"uuid":"129912357","full_name":"marmelab/admin-on-rest","owner":"marmelab","description":"A frontend framework for building admin SPAs on top of REST services, using React and Material Design.","archived":true,"fork":false,"pushed_at":"2018-08-08T13:15:11.000Z","size":78035,"stargazers_count":400,"open_issues_count":11,"forks_count":118,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-03-25T18:17:01.525Z","etag":null,"topics":["admin","admin-dashboard","admin-on-rest","frontend-framework","graphql","material-ui","react","react-admin","rest","single-page-app"],"latest_commit_sha":null,"homepage":"https://marmelab.com/admin-on-rest","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marmelab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-17T13:54:14.000Z","updated_at":"2025-02-06T01:13:13.000Z","dependencies_parsed_at":"2022-08-20T22:40:52.393Z","dependency_job_id":null,"html_url":"https://github.com/marmelab/admin-on-rest","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fadmin-on-rest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fadmin-on-rest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fadmin-on-rest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fadmin-on-rest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marmelab","download_url":"https://codeload.github.com/marmelab/admin-on-rest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246832241,"owners_count":20841139,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","admin-dashboard","admin-on-rest","frontend-framework","graphql","material-ui","react","react-admin","rest","single-page-app"],"created_at":"2024-08-01T11:00:49.705Z","updated_at":"2025-04-02T14:31:12.980Z","avatar_url":"https://github.com/marmelab.png","language":"JavaScript","funding_links":[],"categories":["UI Frameworks","Cases"],"sub_categories":["Other"],"readme":"# admin-on-rest [![Build Status](https://travis-ci.org/marmelab/admin-on-rest.svg?branch=master)](https://travis-ci.org/marmelab/admin-on-rest)\n\nA frontend Framework for building admin applications running in the browser on top of REST services, using ES6, [React](https://facebook.github.io/react/) and [Material Design](https://material.io/). Open sourced and maintained by [marmelab](https://marmelab.com/).\n\n---\n\n**Admin-on-rest 1.x is in maintenance mode. Version 2.x lives at [https://github.com/marmelab/react-admin](https://github.com/marmelab/react-admin).**\n\n--- \n[Demo](https://marmelab.com/admin-on-rest-demo/) - [Documentation](https://marmelab.com/admin-on-rest/) - [Releases](https://github.com/marmelab/admin-on-rest/releases) - [Support](http://stackoverflow.com/questions/tagged/admin-on-rest)\n\n[![admin-on-rest-demo](https://marmelab.com/admin-on-rest/img/admin-on-rest-demo-still.png)](https://vimeo.com/205118063)\n\n## Features\n\n* Adapts to any REST backend\n* Complete documentation\n* Optimistic rendering (renders before the server returns)\n* Relationships (many to one, one to many)\n* Internationalization (i18n)\n* Conditional formatting\n* Themeable\n* Supports any authentication provider (REST API, OAuth, Basic Auth, ...)\n* Full-featured Datagrid (sort, pagination, filters)\n* Filter-as-you-type\n* Supports any form layout (simple, tabbed, etc.)\n* Data Validation\n* Custom actions\n* Large library of components for various data types: boolean, number, rich text, etc.\n* WYSIWYG editor\n* Customize dashboard, menu, layout\n* Super easy to extend and override (it's just React components)\n* Highly customizable interface\n* Can connect to multiple backends\n* Leverages the best libraries in the React ecosystem (Redux, redux-form, redux-saga, material-ui, recompose)\n* Can be included in another React app\n* Inspired by the popular [ng-admin](https://github.com/marmelab/ng-admin) library (also by marmelab)\n\n## Versions In This Repository\n\n* [master](https://github.com/marmelab/admin-on-rest/commits/master) - commits that will be included in the next _patch_ release\n\n* [next](https://github.com/marmelab/admin-on-rest/commits/next) - 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, bugfix with BC break) should be made against **next**.\n\n## Installation\n\nAdmin-on-rest is available from npm. You can install it (and its required dependencies)\nusing:\n\n```sh\nnpm install --save-dev admin-on-rest\n```\n\n## Documentation\n\nRead the [Tutorial](http://marmelab.com/admin-on-rest//Tutorial.html) for a 15 minutes introduction. After that, head to the [Documentation](http://marmelab.com/admin-on-rest//index.html), or checkout the [source code of the demo](https://github.com/marmelab/admin-on-rest-demo) for an example usage.\n\n## At a Glance\n\n```jsx\n// in app.js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { simpleRestClient, Admin, Resource } from 'admin-on-rest';\n\nimport { PostList, PostEdit, PostCreate, PostIcon } from './posts';\n\nrender(\n    \u003cAdmin restClient={simpleRestClient('http://localhost:3000')}\u003e\n        \u003cResource name=\"posts\" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon}/\u003e\n    \u003c/Admin\u003e,\n    document.getElementById('root')\n);\n```\n\nThe `\u003cResource\u003e` component is a configuration component that allows to define sub components for each of the admin view: `list`, `edit`, and `create`. These components use Material UI and custom components from admin-on-rest:\n\n```jsx\n// in posts.js\nimport React from 'react';\nimport { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, DisabledInput, TextInput, LongTextInput, DateInput } from 'admin-on-rest';\nimport BookIcon from 'material-ui/svg-icons/action/book';\nexport const PostIcon = BookIcon;\n\nexport const PostList = (props) =\u003e (\n    \u003cList {...props}\u003e\n        \u003cDatagrid\u003e\n            \u003cTextField source=\"id\" /\u003e\n            \u003cTextField source=\"title\" /\u003e\n            \u003cDateField source=\"published_at\" /\u003e\n            \u003cTextField source=\"average_note\" /\u003e\n            \u003cTextField source=\"views\" /\u003e\n            \u003cEditButton basePath=\"/posts\" /\u003e\n        \u003c/Datagrid\u003e\n    \u003c/List\u003e\n);\n\nconst PostTitle = ({ record }) =\u003e {\n    return \u003cspan\u003ePost {record ? `\"${record.title}\"` : ''}\u003c/span\u003e;\n};\n\nexport const PostEdit = (props) =\u003e (\n    \u003cEdit title={\u003cPostTitle /\u003e} {...props}\u003e\n        \u003cSimpleForm\u003e\n            \u003cDisabledInput source=\"id\" /\u003e\n            \u003cTextInput source=\"title\" /\u003e\n            \u003cTextInput source=\"teaser\" options={{ multiLine: true }} /\u003e\n            \u003cLongTextInput source=\"body\" /\u003e\n            \u003cDateInput label=\"Publication date\" source=\"published_at\" /\u003e\n            \u003cTextInput source=\"average_note\" /\u003e\n            \u003cDisabledInput label=\"Nb views\" source=\"views\" /\u003e\n        \u003c/SimpleForm\u003e\n    \u003c/Edit\u003e\n);\n\nexport const PostCreate = (props) =\u003e (\n    \u003cCreate title=\"Create a Post\" {...props}\u003e\n        \u003cSimpleForm\u003e\n            \u003cTextInput source=\"title\" /\u003e\n            \u003cTextInput source=\"teaser\" options={{ multiLine: true }} /\u003e\n            \u003cLongTextInput source=\"body\" /\u003e\n            \u003cTextInput label=\"Publication date\" source=\"published_at\" /\u003e\n            \u003cTextInput source=\"average_note\" /\u003e\n        \u003c/SimpleForm\u003e\n    \u003c/Create\u003e\n);\n```\n\n## Does It Work With My REST API?\n\nYes.\n\nAdmin-on-rest uses an adapter approach, with a concept called *REST client*. Existing rest clients can be used as a blueprint to design your API, or you can write your own REST client to query an existing API. Writing a custom REST client is a matter of hours.\n\n![REST client architecture](https://marmelab.com/admin-on-rest/img/rest-client.png)\n\nSee the [REST clients documentation](https://marmelab.com/admin-on-rest/RestClients.html) for details.\n\n## Batteries Included But Removable\n\nAdmin-on-rest is designed as a library of loosely coupled React components built on top of [material-ui](http://www.material-ui.com/#/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of admin-on-rest with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design.\n\n## Run the example\n\nYou can run the example app by calling:\n\n```sh\nnpm install\nmake run\n```\n\nAnd then browse to [http://localhost:8080/](http://localhost:8080/).\nThe credentials are **login/password**\n\n## Contributing\n\nPull requests are welcome. You must follow the coding style of the existing files (based on [prettier](https://github.com/prettier/prettier)), 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\nYou can run the tests (linting, unit and functional tests) by calling\n\n```sh\nmake test\n```\n\nIf you have coding standards problems, you can fix them automatically using `prettier` by calling\n\n```sh\nmake prettier\n```\n\nIf you want to contribute to the documentation, install jekyll, then call\n\n```sh\nmake doc\n```\n\nAnd then browse to [http://localhost:4000/](http://localhost:4000/)\n\n*Note*: if you have added a section with heading to the docs, you also have to add it to `docs/_layouts/default.html` (the links on the left) manually.\n\nIf you are using admin-on-rest as a dependency, and if you want to try and hack it, here is the advised process:\n\n```sh\n# in myapp\n# install admin-on-rest from GitHub in another directory\n$ cd ..\n$ git clone git@github.com:marmelab/admin-on-rest.git \u0026\u0026 cd admin-on-rest \u0026\u0026 make install\n# replace your node_modules/admin-on-rest by a symbolic link to the github checkout\n$ cd ../myapp\n$ npm link ../admin-on-rest\n# go back to the checkout, and replace the version of react by the one in your app\n$ cd ../admin-on-rest\n$ npm link ../myapp/node_modules/react\n$ make watch\n# in another terminal, go back to your app, and start it as usual\n$ cd ../myapp\n$ npm run\n```\n\n**Tip**: If you're on Windows and can't use `make`, try [this Gist](https://gist.github.com/mantis/bb5d9f7d492f86e94341816321500934).\n\n## License\n\nAdmin-on-rest is licensed under the [MIT Licence](https://github.com/marmelab/admin-on-rest/blob/master/LICENSE.md), sponsored and supported by [marmelab](http://marmelab.com).\n\n## Donate\n\nThis library is free to use, even for commercial purpose. If you want to give back, please talk about it, [help newcomers](https://stackoverflow.com/questions/tagged/admin-on-rest), or contribute code. But the best way to give back is to **donate to a charity**. We recommend [Doctors Without Borders](http://www.doctorswithoutborders.org/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarmelab%2Fadmin-on-rest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarmelab%2Fadmin-on-rest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarmelab%2Fadmin-on-rest/lists"}