In this guide, you'll create your first Firestore schema file and launch an interactive documentation viewer. The whole process takes about 5 minutes — no backend, no build step, no framework required. JSON Schema.
Step 1: Create a Schema File
Create a folder called schemas in your project. Inside it, create a file called users.schema.json. This file describes the structure of your Firestore users collection:
{
"$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"]
}
}Folder structure
your-project/
└── schemas/
└── users.schema.json💡 The filename determines the collection name. users.schema.json becomes the users collection. For subcollections, use nested folders: schemas/users/orders.schema.json.
Step 2: Add the Viewer to HTML
Create an index.html file in your project root (same level as the schemas folder). Add these lines:
<!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>💡 That's it — just 2 lines for the CSS and JS. The schemasDir option tells FireSchema where to find your schema files. It will auto-discover all .schema.json files in that directory.
Step 3: Open in Browser
Serve your project folder with any static server. If you have Node.js installed:
npx serve .Open http://localhost:3000 and you'll see your interactive Firestore schema documentation. Click on the users collection to explore its fields, types, and descriptions.
Next Steps
Now that your first schema is running, here's where to go next: