https://github.com/marmelab/solid-admin
https://github.com/marmelab/solid-admin
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/marmelab/solid-admin
- Owner: marmelab
- License: mit
- Created: 2021-02-24T14:39:12.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-04-12T14:51:59.000Z (over 2 years ago)
- Last Synced: 2025-10-09T03:32:19.893Z (3 months ago)
- Language: TypeScript
- Size: 778 KB
- Stars: 25
- Watchers: 6
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# solid-admin
A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, [SolidJS](https://www.solidjs.com/) and [DaisyUI](https://daisyui.com/). Open sourced and maintained by [marmelab](https://marmelab.com/).
It's a port of [React-admin](https://marmelab.com/react-admin) for [SolidJS](https://www.solidjs.com/).
## Installation
Solid-admin is available from npm. You can install it (and its required dependencies) using:
```sh
npm install @solid-admin/admin
#or
yarn add @solid-admin/admin
```
## At a Glance
```jsx
// in app.js
import { render } from 'solid-js/web';
import { Admin, Resource } from '@solid-admin/admin';
import restProvider from '@solid-admin/data-fakerest';
import data from '.data.json';
import { PostList, PostEdit, PostCreate } from './posts';
render(
,
document.getElementById('root'));
);
```
The `` component is a configuration component that allows to define sub components for each of the admin view: `list`, `edit`, and `create`. These components use DaisyUI and custom components from solid-admin:
```jsx
// in posts.js
import { List, Datagrid, Edit, Create, SimpleForm, TextField, EditButton, TextInput, useRecordContext } from '@solid-admin/admin';
export const PostList = () => (
);
const PostTitle = () => {
const record = useRecordContext();
return Post {record ? `"${record.title}"` : ''};
};
export const PostEdit = () => (
}>
);
export const PostCreate = () => (
);
```
## Demo
A demo is available inside `packages/demo`.
To run it, clone the repository, install the dependencies, and run the demo:
```sh
make install
make start
```
The demo will be available at [http://localhost:3000](http://localhost:3000).
You can use any username and password to log in.
## Does It Work With My API?
Yes.
Solid-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.
See the react-admin [Data Providers documentation](https://marmelab.com/react-admin/DataProviders.html) for details.
## Batteries Included But Removable
Solid-admin is designed as a library of loosely coupled Solid components and hooks exposing reusable controller logic. It is very easy to replace any part of solid-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.