Skip to content
Fabrix Logo Fabrix Logo Fabrix - Leverage the power of GraphQL to generate UI components directly from your schema.

Getting started

Fabrix is designed to work with React applications, so you’ll need to set up a React app using create-react-app or a similar tool before getting started.

Install fabrix

To start using fabrix, simply install it from npm:

Terminal window
npm install --save @fabrix-framework/fabrix

Install component package

In this quick start, we will use fabrix with our chakra-ui package.

Terminal window
npm install --save @fabrix-framework/chakra-ui

Add provider

Add FabrixProvider that configures fabrix in your app.

import { FabrixProvider } from "@fabrix-framework/fabrix";
import { ChakraUIRegistry } from "@fabrix-framework/chakra-ui";


const Providers = (props: React.PropsWithChildren) =>
  <FabrixProvider
    url={"http://localhost:3000/graphql"}
    componentRegistry={ChakraUIRegistry}
  >
    {props.children}
  </FabrixProvider>

The url prop specifies the endpoint of your GraphQL server. This is the URL where Fabrix will send queries and mutations to interact with your backend. It should point to your GraphQL server’s endpoint.

In this example, http://localhost:3000/graphql is the URL where your GraphQL server is running. Replace this with the appropriate URL for your server.

The componentRegistry prop defines which components Fabrix should use to render different fields and data types. It acts as a mapping between GraphQL types and React components. Fabrix includes a default component registry, such as Chakra UI components, but you can also provide your own custom registry. See Component registry for more detail.

All set! Now you can start using Fabrix in your app.