Skip to main content

A React-based framework
for building internal tools, rapidly.

refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt

Key features

Fast

Fast

Up to 3x increase in speed of development. (*)

Headless

Headless

Works with any UI framework.

Flexible

Flexible

No limits for your custom styling and business logic.

Universal

Universal

Single framework for internal tools and customer-facing apps. SSR included.

Future-proof

Future-proof

Robust architecture, full test coverage and no technical debt.

1-minute setup

1-minute setup

Start your project with a single CLI command.

Your API is supported, out of the box!

Connects to any REST or GraphQL custom backend.

Built-in support for
NestJs CRUD, Airtable, Strapi, Strapi GraphQL, Supabase, Hasura, Nhost, Appwrite, Firebase, Directus and Altogic

nodejsAppwrite
strapinhost
airtablejson-api
nestpython
supabasego
GraphQLaltogic

Fast and Flexible
Solution

Higher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.

Refine is a collection of helper hooks, components and providers.They are all decoupled from your UI components and business logic, so they never keep you fromΒ customizing your UI or coding your own flow.

Arrow
1import { Refine } from "@pankod/refine-core";
2import dataProvider from "@pankod/refine-simple-rest";
3import routerProvider from "@pankod/refine-react-router-v6";
4
5import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";
6
7const API_URL = "https://api.fake-rest.refine.dev";
8
9const App: React.FC = () => {
10 return (
11 <Refine
12 routerProvider={routerProvider}
13 dataProvider={dataProvider(API_URL)}
14 resources={[
15 {
16 name: "posts",
17 list: PostList,
18 create: PostCreate,
19 edit: PostEdit,
20 show: PostShow,
21 },
22 ]}
23 />
24 );
25};
26
27export default App;

Get started using refine