Skip to main content
New version 2.0.0-beta.7 is out! 🎉 Now supporting collection groups!
FireCMS
Product
Features
Advanced content editing
The most powerful backend
Enterprise
ChatGPT
Docs
</div><a href="https://demo.firecms.co" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn mr-3 px-6 py-2 text-white uppercase bg-primary hover:text-white hover:bg-blue-700" aria-label="Open the demo project">Demo</a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_ZlJk"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="flex flex-col min-h-screen"><main class="flex-grow"><section class="relative max-w-7xl mx-auto p-4 md:p-8 my-8"><div style="height:120px"></div><div class="mt-10 mx-auto max-w-7xl"><div class="lg:text-left"><h1 class="text-4xl tracking-tight font-extrabold md:text-6xl"><span class="block lg:inline">Features</span></h1><div class="mt-3 text-xl sm:mt-4 md:text-2xl"><p>Empowering Your Content Management: Easily Create, Edit, and Publish with a CMS that both <b>content managers and developers will love</b>.</p></div><div class="mt-5 sm:mt-8"></div></div></div></section><section class="relative mx-auto p-4 md:p-8 my-16 max-w-5xl"><div class="max-w-5xl md:max-w-5xl md:w-full mx-auto md:col-span-9 md:pr-4 md:pr-8 flex justify-center flex-col h-full mb-16"><div data-aos="fade-up" class="rounded-lg mx-auto w-fit flex flex-col content-center justify-center border border-solid dark:border-gray-800 border-gray-200"><div class="h-11 rounded-t-lg bg-gray-900 flex justify-start items-center space-x-1.5 px-3"><span class="w-3 h-3 rounded-full bg-red-400"></span><span class="w-3 h-3 rounded-full bg-yellow-400"></span><span class="w-3 h-3 rounded-full bg-green-400"></span></div><video width="100%" loop="" autoplay="" muted=""><source src="/assets/medias/inline_table_editing-1170032e2510c4c6a64fce50c6d06f9d.mp4" type="video/mp4"></video></div></div><div class="flex items-center mb-3 max-w-5xl"><div class="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3"><svg class="fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" height="12" width="12"><path d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534z"></path></svg></div><h3 class="h3 m-0">Inline editing</h3></div><p class="text-xl md:text-2xl text-gray-600 dark:text-gray-200">FireCMS provides all the flexibility you need with the best UX. Edit your collections and entities using both a <b>spreadsheet view</b> and <b>powerful forms</b>.</p><p class="text-xl text-gray-600 dark:text-gray-200">Inline editing is very useful when you want to quickly edit a few fields of a document. For example, if you have a list of users, you can quickly edit the name of the user by clicking on the name and editing it.</p></section><div class="relative max-w-7xl mx-auto p-4 md:p-8 relative mx-auto my-8 md:my-12"><div class="max-w-full flex flex-col lg:grid lg:grid-cols-12 lg:gap-10 flex-col-reverse"><div class="max-w-7xl lg:max-w-none lg:w-full mx-auto flex justify-center flex-col h-full my-8 lg:my-0 lg:col-span-6" data-aos="fade-right"><div class="relative flex flex-col"><video style="max-width:540px;aspect-ratio:0.8624787775891342" class="rounded-xl border border-solid dark:border-gray-800 border-gray-200 border-gray-200" width="100%" loop="" autoplay="" muted=""><source src="/assets/medias/editing_demo-9ab6cf025a44889eb7e3fde6542a041c.mp4" type="video/mp4"></video></div></div><div class="max-w-7xl lg:max-w-none lg:w-full mx-auto lg:order-1 flex justify-center flex-col h-full my-8 lg:my-0 lg:col-span-6" data-aos="fade-left"><div class="flex items-center mb-3"><div class="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="fill-current" height="24" width="24" viewBox="0 0 48 48"><path d="M25.5 19.5V6H42v13.5ZM6 25.5V6h16.5v19.5ZM25.5 42V22.5H42V42ZM6 42V28.5h16.5V42Zm3-19.5h10.5V9H9ZM28.5 39H39V25.5H28.5Zm0-22.5H39V9H28.5ZM9 39h10.5v-7.5H9Zm10.5-16.5Zm9-6Zm0 9Zm-9 6Z"></path></svg></div><h3 class="h3 m-0">Dedicated form view</h3></div><p class="text-xl md:text-2xl text-gray-600 dark:text-gray-200">FireCMS offers more than 20 built-in property fields, from basic text fields to complex ones, like multiple file uploads, sortable arrays, references to other collections, etc.</p><p class="text-xl text-gray-600 dark:text-gray-200">The form view opens by default in a convenient side dialog that allows you to maintain the context you are working on, when you are done.</p><p class="text-xl text-gray-600 dark:text-gray-200">FireCMS is a React CMS, and it offers multiple extension points where you can define your custom views. Adding additional custom view to your form view can be really useful.</p></div></div></div><div class="relative max-w-7xl mx-auto p-4 md:p-8 relative mx-auto my-8 md:my-12"><div class="max-w-full flex flex-col lg:grid lg:grid-cols-12 lg:gap-10 flex-col"><div class="max-w-7xl lg:max-w-none lg:w-full mx-auto flex justify-center flex-col h-full my-8 lg:my-0 lg:col-span-6" data-aos="fade-right"><div class="flex items-center mb-3"><div class="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="16" fill="#FFF"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"></path></svg></div><h3 class="h3 m-0 ml-3">Easy to customise</h3></div><p class="text-xl md:text-2xl text-gray-600 dark:text-gray-200">FireCMS offers developers an easy way to adapt the platform to their specific needs while keeping the<b>initial setup simple</b>. Our practical defaults can be conveniently <b>overridden or expanded</b>.</p><p class="text-xl text-gray-600 dark:text-gray-200">Effortlessly integrate your custom form fields as React components and preview widgets. Moreover, you can create detailed views related to your entities or within the main navigation for a truly customized experience.</p><p class="text-xl text-gray-600 dark:text-gray-200">You could add:</p><li> A dashboard for your client</li><li> A preview of the blog article you are writing</li><li> A representation of how the content is going to look like in your app or website.</li><li> And everything you can imagine.</li><p></p></div><div class="max-w-7xl lg:max-w-none lg:w-full mx-auto lg:order-1 flex justify-center flex-col h-full my-8 lg:my-0 lg:col-span-6" data-aos="fade-left"><div class="relative flex flex-col"><video class="rounded-xl border border-solid dark:border-gray-800 border-gray-200 border-gray-200" style="max-width:540px;aspect-ratio:1.0485436893203883" width="100%" loop="" autoplay="" muted=""><source src="/assets/medias/custom_fields-4d8c088255990a1c44c6660f147895eb.mp4" type="video/mp4"></video></div></div></div></div><section class="max-w-full relative flex flex-col items bg-gray-200 dark:bg-gray-800"><div class="my-12"><div class="relative max-w-7xl mx-auto p-4 md:p-8"><p class="text-center text-secondary uppercase font-bold">For developers</p><div class="relative max-w-7xl mx-auto p-4 md:p-8 relative mx-auto my-8 md:my-12"><div class="max-w-full flex flex-col lg:grid lg:grid-cols-12 lg:gap-10 flex-col-reverse"><div class="max-w-7xl lg:max-w-none lg:w-full mx-auto flex justify-center flex-col h-full my-8 lg:my-0 lg:col-span-6"><div class="relative flex-col font-mono"><pre class="max-w-xs overflow-x-auto sm:max-w-full overflow-y-hidden border border-solid dark:border-gray-800 border-gray-200" style="display:block;overflow-x:auto;padding:0.5em;color:#383a42;background:#fafafa"><code class="language-typescript" style="white-space:pre"><span><span style="color:#a626a4">const</span><span> price = buildProperty({ </span></span><span><span> </span><span style="color:#986801">name</span><span>: </span><span style="color:#50a14f">"Price"</span><span>, </span></span><span><span> </span><span style="color:#986801">description</span><span>: </span><span style="color:#50a14f">"Price with range validation"</span><span>, </span></span><span><span> </span><span style="color:#986801">dataType</span><span>: </span><span style="color:#50a14f">"number"</span><span>, </span></span><span><span> </span><span style="color:#986801">validation</span><span>: { </span></span><span><span> </span><span style="color:#986801">required</span><span>: </span><span style="color:#0184bb">true</span><span>, </span></span><span><span> </span><span style="color:#986801">requiredMessage</span><span>: </span></span><span><span> </span><span style="color:#50a14f">"You must set a price between 0 and 1000"</span><span>, </span></span><span><span> </span><span style="color:#986801">min</span><span>: </span><span style="color:#986801">0</span><span>, </span></span><span><span> </span><span style="color:#986801">max</span><span>: </span><span style="color:#986801">1000</span><span> </span></span><span> } </span><span>});</span></code></pre><div class="p-1 flex justify-center"><img src="/assets/images/price-2ffaf71def07675e0e8c51563b59aa75.png" width="500" alt="Element"></div></div></div><div class="max-w-7xl lg:max-w-none lg:w-full mx-auto lg:order-1 flex justify-center flex-col h-full my-8 lg:my-0 lg:col-span-6"><div class="lg:pr-4 lg:pr-12 xl:pr-16"><div class="flex items-center mb-3"><div class="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0"><svg class="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z" fill-rule="nonzero"></path></svg></div><h3 class="h3 m-0 ml-3">Easy schema definition</h3></div><p class="text-xl md:text-2xl text-gray-600 dark:text-gray-200">Define your schemas and choose from multiple form widgets and validation options.</p><p class="text-xl md:text-2xl text-gray-600 dark:text-gray-200">Use advanced features like conditional logic for your fields, references to other collections, markdown or file uploads</p><p class="text-xl text-gray-600 dark:text-gray-200">FireCMS provides a powerful schema definition API that allows you to customise your forms and views.</p><p class="text-xl text-gray-600 dark:text-gray-200">You can also use the schema definition API to create custom views and components.</p><p class="italic text-base text-gray-600 dark:text-gray-200">* Some features can only be enabled by using the self-hosted version, but will be available in FireCMS Cloud version soon.</p></div></div></div></div><div class="relative max-w-7xl mx-auto p-4 md:p-8 relative mx-auto my-8 md:my-12"><div class="max-w-full flex flex-col lg:grid lg:grid-cols-12 lg:gap-10 flex-col"><div class="max-w-7xl lg:max-w-none lg:w-full mx-auto flex justify-center flex-col h-full my-8 lg:my-0 lg:col-span-6"><div class="flex items-center mb-3"><div class="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="fill-current" height="36" width="36" viewBox="0 0 48 48"><path d="M18.9 35.7 7.7 24.5l2.15-2.15 9.05 9.05 19.2-19.2 2.15 2.15Z"></path></svg></div><h3 class="h3 m-0">Built for every project</h3></div><p class="text-xl md:text-2xl text-gray-600 dark:text-gray-200">FireCMS is a headless CMS built to work with every existing Firebase/Firestore project. It does not enforce any data structure.</p><p class="text-xl md:text-2xl text-gray-600 dark:text-gray-200">Use the integrated hooks and callbacks to integrate your business logic in multiple ways.</p><p class="italic text-base text-gray-600 dark:text-gray-200">* Some features can only be enabled by using the self-hosted version, but will be available in the FireCMS Cloud version soon.</p></div><div class="max-w-7xl lg:max-w-none lg:w-full mx-auto lg:order-1 flex justify-center flex-col h-full my-8 lg:my-0 lg:col-span-6"><div class="relative flex-col font-mono"><pre class="max-w-xs overflow-x-auto sm:max-w-full overflow-y-hidden border border-solid dark:border-gray-800 border-gray-200" style="display:block;overflow-x:auto;padding:0.5em;color:#383a42;background:#fafafa"><code class="language-typescript" style="white-space:pre"><span style="color:#a626a4">const</span><span> productCollection = buildCollection({ </span><span> </span><span style="color:#986801">name</span><span>: </span><span style="color:#50a14f">"Product"</span><span>, </span><span> </span><span style="color:#986801">properties</span><span>: { </span><span> </span><span style="color:#986801">name</span><span>: { </span><span> </span><span style="color:#986801">dataType</span><span>: </span><span style="color:#50a14f">"string"</span><span>, </span><span> </span><span style="color:#986801">name</span><span>: </span><span style="color:#50a14f">"Name"</span><span>, </span><span> </span><span style="color:#986801">defaultValue</span><span>: </span><span style="color:#50a14f">"Default name"</span><span> </span> }, <span> </span><span style="color:#986801">uppercase</span><span>: { </span><span> </span><span style="color:#986801">dataType</span><span>: </span><span style="color:#50a14f">"string"</span><span>, </span><span> </span><span style="color:#986801">name</span><span>: </span><span style="color:#50a14f">"Uppercase Name"</span><span>, </span><span> </span><span style="color:#986801">readOnly</span><span>: </span><span style="color:#0184bb">true</span><span> </span> } <!-- --> } <!-- --> }); <!-- --> <span> </span><span style="color:#a626a4">const</span><span> productCallbacks = buildEntityCallbacks({ </span><span> </span><span style="color:#986801">onPreSave</span><span>: </span><span class="hljs-function">(</span><span class="hljs-function hljs-params">{ values }</span><span class="hljs-function">) =></span><span> { </span> values.uppercase = values.name.toUpperCase(); <span> </span><span style="color:#a626a4">return</span><span> values; </span> } <!-- -->});</code></pre></div></div></div></div></div></div></section></main></div></div><section class="relative"><div class="mx-auto px-4 sm:px-6 bg-primary text-white"><div class="relative flex flex-col items-center px-6 py-12"><h4 class="h2 my-4 text-white uppercase">Enterprise?</h4><div class="flex flex-col space-y-2 items-center text-lg"><div class="text-center mb-4">Learn how to get the most out of your project with the help of our consulting team.</div><a href="/enterprise" class="btn mx-auto sm:mb-0 py-4 bg-black text-white hover:text-white uppercase border border-solid w-full sm:w-auto rounded">Learn more</a></div><div class="flex flex-wrap"><div class="w-full py-2 border-b-2 border-gray-400 flex justify-between gap-2"></div></div></div></div></section><section class="relative"><div class="mx-auto px-4 sm:px-6 bg-gray-200 dark:bg-gray-800"><div class="relative flex flex-col items-center px-6 py-16"><div><div class="flex flex-col space-y-2 mb-4 text-lg"><strong> Sign up to our newsletter to get the latest news and updates. No spam!</strong></div><div class="flex flex-wrap"><form><label class="w-full flex items-baseline gap-3 text-sm"><input type="checkbox" value="policy-read"><span>By subscribing to our newsletter, you acknowledge you have read, and agree to <a href="/privacy_policy" class="underline">our personal data policy</a>.</span></label><div class="w-full py-2 flex justify-between gap-2"><input class="appearance-none outline-none text-xl flex-1 px-4 py-4 bg-gray-100 dark:bg-gray-900 rounded w-full leading-tight focus:border-primary border-none" id="email" type="email" placeholder="Enter your email"><button type="submit" disabled="" class="btn px-8 py-4 sm:px-12 sm:py-4 uppercase w-auto sm:mb-0 sm:ml-2 bg-gray-200 dark:bg-gray-800">Sign up</button></div></form></div></div></div></div></section><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Get in touch</div><ul class="footer__items clean-list"><li class="footer__item"><a href="mailto: hello@firecms.co" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contact<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Links</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/enterprise">Enterprise</a></li><li class="footer__item"><a href="https://app.firecms.co/subscriptions" target="_blank" rel="noopener noreferrer" class="footer__link-item">Manage subscriptions</a></li><li class="footer__item"><a href="https://demo.firecms.co" target="_blank" rel="noopener noreferrer" class="footer__link-item">Demo</a></li><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" href="/policy/privacy_policy">Privacy policy</a></li><li class="footer__item"><a class="footer__link-item" href="/policy/terms_conditions">Terms and conditions</a></li><li class="footer__item"><a class="footer__link-item" href="/policy/cookies_policy">Cookies policy</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://discord.gg/fxy7xsQm3m" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/FireCMSco/firecms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title"></div><ul class="footer__items clean-list"><li class="footer__item"> <iframe src="https://discordapp.com/widget?id=1013768502458470442&theme=dark" width="300" height="300" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">