En esta guía, crearás tu primer archivo de esquema de Firestore y lanzarás un visor de documentación interactivo. Todo el proceso toma unos 5 minutos — sin backend, sin paso de build, sin framework necesario. JSON Schema.
Paso 1: Crea un Archivo de Esquema
Crea una carpeta llamada schemas en tu proyecto. Dentro de ella, crea un archivo llamado users.schema.json. Este archivo describe la estructura de tu colección users en Firestore:
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"collection": "users",
"description": "App users with profile information",
"schema": {
"type": "object",
"properties": {
"displayName": {
"type": "string",
"description": "User's display name"
},
"email": {
"type": "string",
"format": "email",
"description": "User's email address"
},
"createdAt": {
"type": "string",
"format": "date-time",
"description": "Account creation timestamp"
},
"role": {
"type": "string",
"enum": ["admin", "editor", "viewer"],
"description": "User role for access control"
}
},
"required": ["displayName", "email", "createdAt"]
}
}Estructura de carpetas
your-project/
└── schemas/
└── users.schema.json💡 El nombre del archivo determina el nombre de la colección. users.schema.json se convierte en la colección users. Para subcolecciones, usa carpetas anidadas: schemas/users/orders.schema.json.
Paso 2: Agrega el Visor al HTML
Crea un archivo index.html en la raíz de tu proyecto (al mismo nivel que la carpeta schemas). Agrega estas líneas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Firestore Schema Docs</title>
<link rel="stylesheet" href="https://unpkg.com/firestore-schema-viewer/dist/style.css">
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/firestore-schema-viewer/dist/fsv.umd.js"></script>
<script>
FirestoreSchemaViewer.render('#app', {
schemasDir: './schemas/'
})
</script>
</body>
</html>💡 Eso es todo — solo 2 líneas para el CSS y el JS. La opción schemasDir le indica a FireSchema dónde encontrar tus archivos de esquema. Descubrirá automáticamente todos los archivos .schema.json en ese directorio.
Paso 3: Abre en el Navegador
Sirve la carpeta de tu proyecto con cualquier servidor estático. Si tienes Node.js instalado:
npx serve .Abre http://localhost:3000 y verás tu documentación interactiva de esquemas de Firestore. Haz clic en la colección users para explorar sus campos, tipos y descripciones.
Siguientes Pasos
Ahora que tu primer esquema está funcionando, aquí tienes por dónde continuar: