El framework de Back-Office
que los desarrolladores adoran
FireCMS está pensado primero para los desarrolladores. Construye paneles de administración y herramientas internas potentes, rápidas y flexibles con React y TypeScript.
Utilizado por desarrolladores en empresas que marcan tendencia
Elige tu camino
Empieza de inmediato con nuestro cloud gestionado o auto-aloja el proyecto open-source para tener control total.
FireCMS Cloud
Ideal para Startups & MVPs
Para máxima velocidad y cero mantenimiento. Lanza tu panel de control en minutos.
- Configuración instantánea - sin despliegues
- Actualizaciones automáticas
- Una generosa capa gratuita para empezar
Auto-alojado
Ideal para Agencias y Vistas Customizadas
Para máximo control y personalización profunda. Despliégalo donde quieras.
- Acceso total al código fuente (licencia MIT)
- Despliega en tu propia infraestructura
- Extensible con tus propios componentes React
Software que simplemente funciona
Todo lo que necesitas. Nada de lo que no.
Deja de reinventar la rueda. FireCMS proporciona un conjunto de componentes y lógica listos para producción, para que puedas centrarte en las funciones que hacen que tu aplicación sea única.
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
}
});
Esquemas en código, con validación
Define tus modelos de datos en TypeScript. Tu código es la única fuente de la verdad, brindándote control de versiones y seguridad de tipos. FireCMS genera automáticamente todas las vistas y formularios CRUD, con validación integrada (requerido, min/max, expresiones regulares) que funciona de inmediato.
Extensibilidad Radical con React
Si puedes construirlo en React, puedes hacerlo en FireCMS. Crea tus propios campos de formulario o construye vistas completamente nuevas (como un dashboard personalizado) y agrégalas a la navegación principal. No hay elementos ocultos.
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
});Lógica de Negocios Integrada
Ejecuta tu propio código durante el ciclo de vida de los datos. Utiliza métodos como onSave, onDelete, y otros callbacks para invocar funciones en la nube, enviar notificaciones, limpiar datos o integrarte con APIs de terceros directamente.
Todo para tus
necesidades de UI
Si necesitas crear vistas personalizadas o componentes a medida, puedes utilizar nuestros sólidos componentes UI propios.
Crea Vistas Personalizadas
Utiliza todos los hooks de datos integrados para crear componentes React a medida y agregarlos a la navegación principal o a los documentos específicos.
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");Ahórrate horas de Data-Ops
Deja de escribir scripts para realizar actualizaciones lógicas o consultas complejas. DataTalk te permite operar sobre tus bases de datos mediante lenguaje natural, convirtiendo tareas tediosas en segundos de trabajo.
"Update status to 'active' for all users who signed up last month"
Más de 20 Tipos de Datos
Hemos desarrollado todo para ti. Tendrás acceso a un Editor de texto enriquecido (tipo Notion), subida de ficheros, datos relacionales (referencias), enumeraciones, listas y más, todo configurado de caja.
Empieza de manera auto alojada
npx create-firecms-app ¿Listo para empezar a crear?
Pruébalo al instante de manera gratuita con FireCMS Cloud, o sumérgete en el código open-source.
Probar FireCMS Cloud
La forma más rápida de empezar. Perfecto para MVPs, startups y equipos agiles.
Construir Gratis Explorar Docs
Descubre nuestro framework open-source. Perfecto para agencias, corporaciones y los que deciden no conformarse.
Ver Documentación 