FireCMS PRO
No more limits. No more compromises.
Try self-hosted FireCMS PRO completely for free.
The most customizable headless CMS. Ever.
The perfect solution for your team or clients, built on top of Firebase, MongoDB or any other backend.
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 gives you full access to all the features and components of FireCMS, with the freedom to style and customize as you like. Plus, it offers extra tools and elements to help you create superior back-office applications more efficiently. With FireCMS PRO, you gain greater control and efficiency, enjoying a user experience tailored for professionals. Take charge of your data with advanced tools, including an easy-to-use spreadsheet view and dynamic, feature-rich forms. It's the professional advantage your projects need.
Users and Roles Management Control app settings based on who's logged in. Connect with your existing user management system for a unified experience. | |
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 or MongoDB, 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.
Simple Data Import, from file to CMS
FireCMS offers a streamlined data import feature designed to make your life easier. Whether you're working with extensive CSV, JSON or Excel files, our intuitive tools enable you to transfer and integrate your datasets into FireCMS. No more tedious manual data entry or convoluted import processes—just quick, efficient, and reliable data importation.
Our data import tool will detect your data types automatically, and if you override a mapping, it will do the data conversion for you.
Modern UI components based on tailwindcss
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 autoOpenDrawer={false}>
<AppBar title={"My amazing CMS"}/>
<Drawer/>
<NavigationRoutes/>
<SideDialogs/>
</Scaffold>;
}}
</FireCMS>
</ModeControllerProvider>
</SnackbarProvider>
);
}