Le framework Back-Office
que les développeurs apprécient vraiment
FireCMS est le framework conçu pour les développeurs que vous adorerez utiliser. Construisez de puissants outils internes, des interfaces CRUD et des panneaux d'administration rapides et flexibles avec React et TypeScript.
Approuvé par les développeurs d'entreprises innovantes
Choisissez votre voie
Démarrez instantanément avec notre cloud géré ou hébergez vous-même le framework open source pour un contrôle total.
FireCMS Cloud
Idéal pour les Startups et MVPs
Pour une vitesse maximale et zéro maintenance. Lancez votre panneau d'administration en quelques minutes.
- Configuration instantanée - aucun déploiement nécessaire
- Mises à jour et maintenance automatiques
- Niveau gratuit généreux pour commencer
Auto-hébergé
Idéal pour les Agences et projets custom
Pour un contrôle maximal et une personnalisation poussée. Déployez n'importe où.
- Accès complet au code source (licence MIT)
- Déployez dans votre propre infrastructure
- Étendez avec vos propres composants React
Une boîte à outils qui fonctionne simplement
Tout ce dont vous avez besoin. Rien de superflu.
Arrêtez de réinventer la roue. FireCMS fournit une boîte à outils prête pour la production, afin que vous puissiez vous concentrer sur les fonctionnalités qui rendent votre application unique.
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
}
});
Schéma en tant que code, avec validation
Définissez vos modèles de données en TypeScript. Votre code est la source unique de vérité, vous donnant le contrôle de version et la sécurité des types. FireCMS génère automatiquement toutes les vues et formulaires CRUD, avec une validation intégrée (obligatoire, min/max, regex) qui fonctionne d'emblée.
Extensibilité React radicale
Si vous pouvez le créer en React, vous pouvez le créer dans FireCMS. Créez vos propres champs de formulaire personnalisés ou construisez de nouvelles vues de niveau principal (comme un tableau de bord personnalisé) et ajoutez-les à la navigation principale. Sans boîtes noires.
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
});Logique métier intégrée
Exécutez votre code personnalisé pendant le cycle de vie des données. Utilisez onSave, onDelete et d'autres callbacks pour déclencher des fonctions cloud, envoyer des notifications, nettoyer les données ou intégrer des API tierces directement depuis votre configuration CMS.
Tout pour vos besoins
d'interface
Si vous devez créer des vues ou des composants personnalisés, vous pouvez utiliser nos composants d'interface FireCMS éprouvés en production.
Créez des vues personnalisées
Utilisez tous les hooks de données intégrés pour créer vos propres composants React et les ajouter directement à la navigation principale ou aux documents
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>
);
}
I'll help you update the status for users who signed up last month. Here's the code to do that:
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");Gagnez des heures sur les opérations de données
Arrêtez d'écrire des scripts à usage unique pour les mises à jour en masse ou les requêtes complexes. DataTalk vous permet d'opérer directement sur vos données en langage naturel, transformant des heures de travail de développement fastidieux en quelques secondes de frappe.
"Update status to 'active' for all users who signed up last month"
Plus de 20 champs de données puissants
Nous avons créé tous les champs complexes que vous ne voulez pas développer. Profitez d'un éditeur de texte enrichi de style Notion, de téléchargements de fichiers vers Firebase Storage, de données relationnelles (références), d'énumérations, de tableaux, de maps et plus encore, tous sous la forme de composants pré-construits.
Démarrez votre projet auto-hébergé
npx create-firecms-app Prêt à construire ?
Commencez à construire en quelques secondes avec notre niveau cloud gratuit ou plongez dans la documentation open source.
Essayer FireCMS Cloud
Le moyen le plus rapide de commencer. Parfait pour les MVPs, les startups et tous ceux qui veulent une configuration sans tracas.
Commencer gratuitement Explorer la documentation
Plongez dans le framework open source. Parfait pour les agences, les projets personnalisés et le contrôle total.
Lire la documentation 