O Framework de Back-Office
que os Desenvolvedores Adoram
O FireCMS é o framework developer-first que você vai adorar usar. Crie ferramentas internas poderosas, rápidas e flexíveis, interfaces CRUD e painéis de administração com React e TypeScript.
Confiado por desenvolvedores em empresas inovadoras
Escolha Seu Caminho
Comece imediatamente com nosso cloud gerenciado ou hospede o framework de código aberto para controle total.
FireCMS Cloud
Melhor para Startups e MVPs
Para máxima velocidade e zero manutenção. Lance seu painel de administração em minutos.
- Configuração instantânea - sem deployment necessário
- Atualizações e manutenção automáticas
- Plano gratuito generoso para começar
Self-Hosted
Melhor para Agências e Builds Personalizados
Para máximo controle e personalização profunda. Faça deploy em qualquer lugar.
- Acesso total ao código-fonte (licença MIT)
- Deploy na sua própria infraestrutura
- Extensível com seus próprios componentes React
Um Toolkit que Simplesmente Funciona
Tudo que você precisa. Nada do que não precisa.
Pare de reinventar a roda. O FireCMS fornece um toolkit de componentes e lógica prontos para produção, para que você possa focar nos recursos que tornam seu app único.
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 como Código, com Validação
Defina seus modelos de dados em TypeScript. Seu código é a única fonte da verdade, dando controle de versão e segurança de tipos. O FireCMS gera automaticamente todas as views e formulários CRUD, com validação embutida (required, min/max, regex) que funciona imediatamente.
Extensibilidade Radical com React
Se você pode construí-lo em React, pode construí-lo no FireCMS. Crie seus próprios campos de formulário personalizados ou construa views de nível superior completamente novas (como um dashboard personalizado) e as adicione à navegação principal. Sem caixas pretas.
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 Negócio Embutida
Execute seu código personalizado durante o ciclo de vida dos dados. Use onSave, onDelete e outros callbacks para acionar cloud functions, enviar notificações, limpar dados ou integrar com APIs de terceiros direto da sua configuração CMS.
Tudo para suas
necessidades de UI
Se você precisa criar views ou componentes personalizados, pode usar nossos componentes UI testados em batalha do FireCMS.
Crie Views Personalizadas
Use todos os hooks de dados embutidos para criar seus próprios componentes React e adicioná-los diretamente à navegação principal ou a documentos
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");Economize Horas em Data-Ops
Pare de escrever scripts isolados para atualizações em lote ou consultas complexas. O DataTalk permite operar diretamente nos seus dados em linguagem natural, transformando horas de trabalho tedioso em segundos de digitação.
"Update status to 'active' for all users who signed up last month"
Mais de 20 Tipos de Dados Poderosos
Construímos todos os campos complexos que você não quer. Obtenha um editor de texto rico estilo Notion, uploads de arquivo para o Firebase Storage, dados relacionais (referências), enums, arrays, maps e muito mais, tudo como componentes pré-construídos.
Inicie Seu Projeto Self-Hosted
npx create-firecms-app Pronto para Construir?
Comece a construir em segundos com nosso plano cloud gratuito ou mergulhe na documentação open-source.
Experimentar FireCMS Cloud
A maneira mais rápida de começar. Perfeito para MVPs, startups e quem quer configuração sem complicações.
Comece a Construir Gratuitamente Explorar a Documentação
Mergulhe no framework de código aberto. Perfeito para agências, builds personalizados e controle total.
Ler a Documentação 