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
Consigliato per la Maggior Parte dei Team
Il modo più veloce per iniziare. Zero manutenzione, personalizzazione completa con viste React e prova gratuita.
- Configurazione istantanea – nessun deployment necessario
- Viste e componenti React personalizzati supportati
- Prova gratuita, aggiornamenti e manutenzione automatici
Self-Hosted
Per Enterprise e Controllo Totale
Per team che necessitano di proprietà totale dell'infrastruttura, auth personalizzata o requisiti di conformità.
- Accesso completo al codice sorgente (licenza MIT)
- Distribuisci nella tua infrastruttura
- Auth personalizzata, SSO e opzioni di conformità
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.
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
}
});
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.
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.
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");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 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 