Das Back-Office-Framework,
das Entwickler wirklich mögen

FireCMS ist das entwicklerzentrierte Framework, das Sie lieben werden. Erstellen Sie leistungsstarke, schnelle und flexible interne Tools mit React und TypeScript.

Von Entwicklern in zukunftsorientierten Unternehmen vertraut

Wählen Sie Ihren Weg

Starten Sie sofort mit unserer verwalteten Cloud oder hosten Sie das Open-Source-Framework selbst für vollständige Kontrolle.

FireCMS Cloud

Ideal für Startups & MVPs

Für maximale Geschwindigkeit und null Wartung. Starten Sie Ihr Admin-Panel in Minuten.

  • Soforteinrichtung – kein Deployment nötig
  • Automatische Updates und Wartung
  • Großzügiges kostenloses Kontingent zum Einstieg
Mit Cloud starten

Self-Hosted

Ideal für Agenturen & Custom Builds

Für maximale Kontrolle und tiefe Anpassung. Überall deployen.

  • Vollständiger Quellcode-Zugriff (MIT-Lizenz)
  • In Ihrer eigenen Infrastruktur deployen
  • Mit eigenen React-Komponenten erweitern
Self-Hosted Docs ansehen

Ein Toolkit, das einfach funktioniert

Alles, was Sie brauchen. Nichts, was Sie nicht brauchen.

Hören Sie auf, das Rad neu zu erfinden. FireCMS bietet ein produktionsreifes Toolkit aus Komponenten und Logik, damit Sie sich auf die Funktionen konzentrieren können, die Ihre App einzigartig machen.

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 als Code, mit Validierung

Definieren Sie Ihre Datenmodelle in TypeScript. Ihr Code ist die einzige Wahrheitsquelle, die Ihnen Versionskontrolle und Typsicherheit bietet. FireCMS generiert automatisch alle CRUD-Ansichten und Formulare mit integrierter Validierung (erforderlich, min/max, Regex).

Radikale React-Erweiterbarkeit

Wenn Sie es in React bauen können, können Sie es in FireCMS bauen. Erstellen Sie eigene benutzerdefinierte Formularfelder oder bauen Sie völlig neue Top-Level-Ansichten (wie ein benutzerdefiniertes Dashboard) und fügen Sie sie zur Hauptnavigation hinzu.

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
});

Eingebaute Geschäftslogik

Führen Sie Ihren benutzerdefinierten Code während des Daten-Lebenszyklus aus. Nutzen Sie onSave, onDelete und andere Callbacks für Cloud-Funktionen, Benachrichtigungen oder Drittanbieter-API-Integrationen.

Alles für Ihre
UI-Anforderungen

Wenn Sie benutzerdefinierte Ansichten oder Komponenten erstellen müssen, können Sie unsere praxiserprobten FireCMS UI-Komponenten verwenden.

Benutzerdefinierte Ansichten erstellen

Verwenden Sie alle integrierten Daten-Hooks, um eigene React-Komponenten zu erstellen und direkt zur Hauptnavigation oder zu Dokumenten hinzuzufügen.

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");

Sparen Sie Stunden bei Data-Ops

Hören Sie auf, einmalige Skripte für Batch-Updates oder komplexe Abfragen zu schreiben. DataTalk ermöglicht es Ihnen, direkt in natürlicher Sprache auf Ihre Daten zu operieren.

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

Über 20+ leistungsstarke Datenfelder

Wir haben alle komplexen Felder gebaut, die Sie nicht wollen. Erhalten Sie einen Notion-ähnlichen Rich-Text-Editor, Datei-Uploads zu Firebase Storage, relationale Daten (Referenzen), Enums, Arrays, Maps und mehr.

Starten Sie Ihr Self-Hosted-Projekt

npx create-firecms-app
Vollständige Dokumentation ansehen

Bereit zum Bauen?

Beginnen Sie in Sekunden mit unserem kostenlosen Cloud-Kontingent oder tauchen Sie in die Open-Source-Docs ein.

FireCMS Cloud testen

Der schnellste Einstieg. Perfekt für MVPs, Startups und alle, die eine unkomplizierte Einrichtung möchten.

Kostenlos starten

Docs erkunden

Tauchen Sie in das Open-Source-Framework ein. Perfekt für Agenturen, Custom Builds und vollständige Kontrolle.

Dokumentation lesen