Il framework Back-Office
che gli sviluppatori amano davvero

FireCMS è il framework developer-centric che amerai. Crea strumenti interni potenti, veloci e flessibili con React e TypeScript.

Scelto dagli sviluppatori nelle aziende più innovative

Scegli il tuo percorso

Inizia subito con il nostro Cloud gestito o ospita il framework open-source per il controllo totale.

FireCMS Cloud

Ideale per Startup e MVP

Per massima velocità e zero manutenzione. Lancia il tuo pannello admin in pochi minuti.

  • Configurazione istantanea – nessun deployment necessario
  • Aggiornamenti e manutenzione automatici
  • Generoso piano gratuito per iniziare
Inizia con Cloud

Self-Hosted

Ideale per Agenzie e Build Personalizzate

Per massimo controllo e personalizzazione profonda. Distribuisci ovunque.

  • Accesso completo al codice sorgente (licenza MIT)
  • Distribuisci nella tua infrastruttura
  • Estendi con i tuoi componenti React
Vedi la Documentazione Self-Hosted

Un toolkit che funziona e basta

Tutto ciò di cui hai bisogno. Niente di ciò che non ti serve.

Smetti di reinventare la ruota. FireCMS offre un toolkit production-ready di componenti e logica, così puoi concentrarti sulle funzionalità che rendono unica la tua app.

typescript
import { buildProperty } from "@firecms/core";

const price = buildProperty({
name: "Price",
description: "Price with range validation",
dataType: "number",
validation: {
    required: true,
    requiredMessage: "Price must be between 0 and 1000",
    min: 0,
    max: 1000
}
});
Price textfield preview

Schema come codice, con validazione

Definisci i tuoi modelli di dati in TypeScript. Il tuo codice è l'unica fonte di verità, offrendoti controllo versione e type safety. FireCMS genera automaticamente tutte le viste e i form CRUD con validazione integrata (required, min/max, regex).

Estensibilità React radicale

Se puoi costruirlo in React, puoi costruirlo in FireCMS. Crea i tuoi campi form personalizzati o costruisci viste top-level completamente nuove (come una dashboard personalizzata) e aggiungile alla navigazione principale.

typescript
import { buildCollection } from "@firecms/core";

export const productsCollection = buildCollection({
    name: "Products",
    path: "products",
    callbacks: {
        onSave: async ({ values }) => {
            // e.g., send a notification
            await sendSlackMessage(`Product updated: ${values.name}`);

            // e.g., modify data before saving
            values.updatedAt = new Date();
            return values;
        }
    }
    // ...properties
});

Logica di business integrata

Esegui il tuo codice personalizzato durante il ciclo di vita dei dati. Usa onSave, onDelete e altri callback per funzioni cloud, notifiche o integrazioni API di terze parti.

Tutto per le tue
esigenze UI

Se hai bisogno di creare viste o componenti personalizzati, puoi utilizzare i nostri collaudati componenti UI FireCMS.

Crea viste personalizzate

Usa tutti gli hook dati integrati per creare componenti React su misura e aggiungerli direttamente alla navigazione principale o ai documenti.

typescript
export function ProductDetailPreview({ modifiedValues }: {
    modifiedValues?: EntityValues<Product>;
}) {

    const snackbarController = useSnackbarController();
    const [quantity, setQuantity] = React.useState(1);

    if (!modifiedValues) {
        return <CenteredView>Please add some data to see the preview</CenteredView>;
    }

    const { name, price, description, images } = modifiedValues;
    const mainImage = images?.[0];

    return (
        <div className="p-8">
            <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">

                {/* Product Image */}
                {mainImage && (
                    <img
                        alt="Product"
                        className="aspect-square object-cover w-full rounded-lg"
                        src={mainImage}
                    />
                )}

                {/* Product Details */}
                <div className="grid gap-4 content-center">
                    <div className="flex items-start">
                        <h1 className="flex-grow text-3xl font-bold">
                            {name ?? "Product name"}
                        </h1>
                        <div className="text-3xl font-semibold ml-auto">
                            ${price}
                        </div>
                    </div>

                    <Markdown source={description ?? ""} />

                    <QuantitySelect onSelected={(quantity) => snackbarController.open({
                                                    type: "success",
                                                    message: `Added \${ quantity } items to cart`
                                                })}/>
                </div>
            </div>
        </div>
    );
}
Custom React component demo
person

auto_fix_high

I'll help you update the status for users who signed up last month. Here's the code to do that:

javascript
const lastMonth = new Date();
lastMonth.setMonth(lastMonth.getMonth() - 1);

const users = await db.collection('users')
  .where('signupDate', '>=', lastMonth)
  .get();

const batch = db.batch();
users.docs.forEach(doc => {
  batch.update(doc.ref, { status: 'active' });
});

await batch.commit();
console.log("Updated ${users.size} users");

Risparmia ore di Data-Ops

Smetti di scrivere script one-off per aggiornamenti in batch o query complesse. DataTalk ti permette di lavorare direttamente sui tuoi dati in linguaggio naturale.

"Update status to 'active' for all users who signed up last month"

Oltre 20 campi dati potenti

Abbiamo costruito tutti i campi complessi che non vuoi costruire tu. Ottieni un editor rich-text stile Notion, upload file su Firebase Storage, dati relazionali (riferimenti), enum, array, mappe e molto altro.

Lancia il tuo progetto Self-Hosted

npx create-firecms-app
Vedi la Documentazione completa

Pronto a costruire?

Inizia in secondi con il nostro piano Cloud gratuito o immergiti nei docs open-source.

Prova FireCMS Cloud

Il modo più veloce per iniziare. Perfetto per MVP, startup e chi vuole una configurazione senza complicazioni.

Inizia gratis

Esplora i Docs

Immergiti nel framework open-source. Perfetto per agenzie, build personalizzate e controllo totale.

Leggi la Documentazione