Skip to main content

FireCMS PRO

For a limited time

Try FireCMS PRO at the same price as FireCMS Cloud

yarn create firecms-app --pro
See the docs

The most customizable headless CMS. Ever.

The perfect solution for your team or public facing applications, built on top of Firebase.

Build better applications faster

FireCMS PRO allows you to use all the internal components and features of FireCMS, but also provides additional tools and components to help you build better back-office applications faster.

Customizable, extensible and with a strong focus on developer experience, FireCMS PRO is the perfect solution for your next project.

Advanced Functionality, Built-In

FireCMS PRO allows you to use all the internal components and features of FireCMS, while allowing total styling and customization. It also provides additional tools and components to help you build better back-office applications faster. FireCMS PRO elevates your control and efficiency, offering an unmatched user experience designed for professionals. Seamlessly manage your data with enhanced tools, including an intuitive spreadsheet view and dynamic, feature-rich forms. It's the professional edge your projects demand.

Users and Roles Management
Control app settings based on who's logged in. Connect with your existing user management system for a unified experience.
High-quality components
Design custom views using the full component set that FireCMS uses internally. Save time and effort by reusing them across your application.
Self-hosted
Operate independently without external services. Enjoy full control over your data and infrastructure for enhanced security and compliance.
Dedicated Support
Receive dedicated support with a personal account manager. Address questions or issues quickly and stay focused on delivering your best work.
Data enhancement
Use large language models (LLMs) to automatically enrich data for you and your clients. Gain valuable insights, context, and added value from your information.

FireCMS PRO was crafted through collaboration with various companies, out of the need to have a CMS that could be used in different scenarios and that could be easily customized to fit different needs.

Public Facing Applications

If you are building a CRUD public facing application based on Firebase, FireCMS PRO is the perfect solution for you. Define exactly what each user can do and customize the experience for each role.

Use all the internal components of FireCMS, including the schema editor, data inference, advanced data import and export, default roles and more.

With your FireCMS PRO license, you can build projects with unlimited users.

Overlay
Pixel Genius is a public facing application that allows users to manage their augmented reality experiences. It is built on top of Firebase and uses FireCMS PRO, and it integrated the three.js editor.

For developers

No config, just React components

FireCMS is simply a set of React components and hooks. You can use them to build your own back-office applications, with your own authentication, data sources and storage.

No need to learn a new framework or a new way of doing things. Just use the components and hooks you need. No magic, no hidden logic, no configuration.

function ProSample() {

    // Use your own authentication logic here
    const myAuthenticator: Authenticator<FirebaseUserWrapper> = useCallback(async ({
                                                                                user,
                                                                                authController
                                                                            }) => {

        if (user?.email?.includes("flanders")) {
            throw Error("Stupid Flanders!");
        }

        // This is an example of retrieving async data related to the user
        // and storing it in the controller's extra field
        const idTokenResult = await user?.getIdTokenResult();
        const userIsAdmin = idTokenResult?.claims.admin || user?.email?.endsWith("@firecms.co");

        console.log("Allowing access to", user);
        return Boolean(userIsAdmin);
    }, []);

    const collections = [
        booksCollection,
        // Your collections here
    ];

    const {
        firebaseApp,
        firebaseConfigLoading,
        configError
    } = useInitialiseFirebase({
        firebaseConfig
    });

    // Controller used to manage the dark or light color mode
    const modeController = useBuildModeController();

    const signInOptions: FirebaseSignInProvider[] = ["google.com"];

    // Controller for managing authentication
    const authController: FirebaseAuthController = useFirebaseAuthController({
        firebaseApp,
        signInOptions
    });

    // Controller for saving some user preferences locally.
    const userConfigPersistence = useBuildLocalConfigurationPersistence();

    // Delegate used for fetching and saving data in Firestore
    const firestoreDelegate = useFirestoreDelegate({
        firebaseApp
    });

    // Controller used for saving and fetching files in storage
    const storageSource = useFirebaseStorageSource({
        firebaseApp
    });

    const navigationController = useBuildNavigationController({
        collections,
        authController,
        dataSourceDelegate: firestoreDelegate
    });

    const dataEnhancementPlugin = useDataEnhancementPlugin({
        getConfigForPath: ({ path }) => {
            if (path === "books")
                return true;
            return false;
        }
    });

    const importExportPlugin = useImportExportPlugin();

    if (firebaseConfigLoading || !firebaseApp) {
        return <>
            <CircularProgressCenter/>
        </>;
    }

    if (configError) {
        return <CenteredView>{configError}</CenteredView>;
    }
    return (
        <SnackbarProvider>
            <ModeControllerProvider value={modeController}>
                <FireCMS
                    navigationController={navigationController}
                    authController={authController}
                    userConfigPersistence={userConfigPersistence}
                    dataSourceDelegate={firestoreDelegate}
                    storageSource={storageSource}
                    plugins={[dataEnhancementPlugin, importExportPlugin]}
                >
                    {({
                          context,
                          loading
                      }) => {

                        if (loading) {
                            return <CircularProgressCenter size={"large"}/>;
                        }
                        if (authController.user === null) {
                            return <FirebaseLoginView authController={authController}
                                                      firebaseApp={firebaseApp}
                                                      signInOptions={signInOptions}/>
                        }

                        return <Scaffold
                            name={"My demo app"}
                            autoOpenDrawer={false}>
                            <NavigationRoutes/>
                            <SideDialogs/>
                        </Scaffold>;
                    }}
                </FireCMS>
            </ModeControllerProvider>
        </SnackbarProvider>
    );

}

LEARN MORE ABOUT FIRECMS PRO

yarn create firecms-app --pro
Sign up to our newsletter to get the latest news and updates. No spam!