![\"AstroBlocks\"](\"src/img/blocks_logo.jpg\"){kind=logo}
\n\n \n
\n Block-first CMS for Astro projects.
\n Pages, menus, params, settings and a responsive media library stored in JSON, with your own Astro components as blocks.\n
\n ![\"version\"](\"https://img.shields.io/badge/version-4.1.3-blue\"){kind=icon}
![\"coverage\"](\"https://img.shields.io/badge/coverage-93.3%25-brightgreen\"){kind=icon}
![\"npm](\"https://img.shields.io/npm/v/%40astroblocks%2Fastro-blocks?logo=npm\")
![\"npm](\"https://img.shields.io/npm/dm/%40astroblocks%2Fastro-blocks?logo=npm\")
![\"stable\"](\"https://img.shields.io/badge/status-stable-brightgreen\"){kind=icon}
![\"Node](\"https://img.shields.io/badge/node-%3E%3D22.12-339933?logo=node.js\"){kind=icon}
![\"Astro](\"https://img.shields.io/badge/Astro-7+-FF5D01?logo=astro\"){kind=icon}
\n ![\"AstroBlocks](\"src/img/dashboard.jpg\")
\n
The CMS dashboard — project status, quick actions and recent activity.\n
\n ![\"AstroBlocks](\"src/img/page_editor.jpg\")
\n
The page editor — a compact block builder where content, SEO and structure are managed together.\n
\n ![\"AstroBlocks](\"src/img/media-library.png\")
\n
The media library — upload, search, paginate, edit alt text and see per-asset metadata.\n
\n ![\"AstroBlocks](\"src/img/image-picker.png\")
\n
The image field picker — choose an asset and set a per-usage alt and caption.\n
\n ![\"AstroBlocks](\"src/img/import-export.jpg\")
\n
The import / export page — select units, download a backup, or restore from a .zip file.\n
Tags (array
Tags (array<string>)
\n ```\n\n This is your markup to fix, not an AstroBlocks regression — the compiler is simply reporting what was always invalid. See Astro's [v7 upgrade guide](https://docs.astro.build/en/guides/upgrade-to/v7/).\n\n## Installation\n\nInstall the integration and an SSR adapter (`@astrojs/node` is the reference adapter):\n\n```bash\n# npm\nnpm install @astroblocks/astro-blocks @astrojs/node\n```\n\n```bash\n# pnpm\npnpm add @astroblocks/astro-blocks @astrojs/node\n```\n\n```bash\n# yarn\nyarn add @astroblocks/astro-blocks @astrojs/node\n```\n\n> To validate a locally built package before publishing, use the tarball flow documented in [LOCAL_PACKAGE_TESTING.md](./docs/LOCAL_PACKAGE_TESTING.md).\n\n## Environment Setup\n\nThe admin UI at `/cms` authenticates with a JWT carried in a request header, verified against the user store on every request — so sessions are revocable, not stateless. Deleting a user or changing a password signs them out everywhere immediately, even though their token has not expired. The admin account is created on **first login** — there are no admin username/password variables to configure.\n\n| Variable | Required | Description |\n| --- | --- | --- |\n| `ASTRO_BLOCKS_JWT_SECRET` | Yes (production) | Secret used to sign and verify JWT session tokens. Use a long random string (32+ characters). Rotating it invalidates all sessions. **Required in production** — without it the admin login returns `503` and no session is issued. Legacy alias `CMS_JWT_SECRET` is accepted but deprecated. |\n\nExample `.env` (local development only — **never commit real values**):\n\n```sh\nASTRO_BLOCKS_JWT_SECRET=your-long-random-secret-here\n```\n\n> Set this as an environment/runtime variable on your deployment platform — not in committed files. The **first person to log in at `/cms` creates the owner account**, so complete that initial login yourself over a trusted connection right after deploying. For the complete list of optional variables (upload and import size limits, project-root override), see the [Environment Variables Reference](./AGENTS.consumer.md#environment-variables-reference-complete-list) in `AGENTS.consumer.md`.\n\n## Quick Start\n\n### 1. Configure Astro\n\n```ts\nimport { defineConfig, memoryCache } from 'astro/config';\nimport node from '@astrojs/node';\nimport astroBlocks from '@astroblocks/astro-blocks';\nimport { schema as heroSchema } from './src/components/Hero.schema.ts';\n\nexport default defineConfig({\n output: 'static',\n adapter: node({ mode: 'standalone' }),\n cache: {\n provider: memoryCache(),\n },\n integrations: [\n astroBlocks({\n layoutPath: './src/layouts/Layout.astro',\n blocks: [heroSchema],\n }),\n ],\n});\n```\n\n### 2. Define a block component\n\n```astro\n---\ninterface Props {\n title: string;\n subtitle?: string;\n}\n\nconst { title, subtitle } = Astro.props;\n---\n\n{subtitle}
}\n