fabrix

Fabrix is a framework for building React applications that are backed by GraphQL backend. With fabrix, React components are generated from queries and mutations and automatically rendered with the data fetched from the GraphQL server.

Consider the component in the Star Wars application that displays information of a character:

const Character = (id: string) => 
  <FabrixComponent 
    query={`
      query getCharacter($id: ID!) {
        character(id: $id) {
          name
          status
          profileImage
        }
      } 
    `}
    variables={{ id }}
  />

According to the query above, fabrix renders components.

Why fabrix?

At Tailor, we frequently build frontend applications with numerous screens and heavy CRUD (Create, Read, Update, Delete) operations, particularly in admin panels and ERP systems.

While generating type definitions and hooks from GraphQL is a common practice in React applications, this approach is often applied on a component-by-component basis. For applications requiring fine-tuned styling and high flexibility, this level of detail is necessary. However, in admin panels and ERP systems—where functionality and data management are prioritized over intricate styling—this granularity often becomes a burden.

Fabrix solves this problem by automating the rendering of React components from GraphQL queries and schemas, significantly streamlining the development of complex, data-driven applications.

Quick start

See the instruction at the quick start to use fabrix in your React app

Warning

Fabrix is still in the early stage of development. The API may change without any notice.

We are still actively developing the features. Tell us your idea or feedback on discussions.

Fabrix editor

We have an online interactive editor to see how fabrix works out without any setups.

Examples

We have some example apps in repo.

Development

Packages

package	description	link
@fabrix-framework/fabrix	Core package	Docs
@fabrix-framework/graphql-config	GraphQL LSP support	Docs
@fabrix-framework/chakra-ui	Chakra UI components for fabrix	Docs

Setup

Install required dependencies

pnpm install

Build

pnpm build

Contributing

Refer to our contribution guidelines.

License

Fabrix is open source software licensed as MIT