TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    Astro + Netlify CMS

    Add Netlify CMS’s admin dashboard to any Astro project


    npm i astro-netlify-cms

    What is this?

    This is an integration for the Astro site builder, which adds support for Netlify CMS, an open-source, Git-based content management system.

    Adding the integration will:

    • Add the Netlify CMS dashboard at /admin (or another route if you prefer)
    • Inject Netlify’s Identity Widget across your site to support logging in to the admin app
    • Run a local proxy server in dev mode to allow local content updates via the CMS

    Usually each of these requires individual set up and configuration. Using this integration, you configure your CMS once in astro.config.mjs, sit back, and enjoy!

    Looking for a quick way to get started? Try out the Blog Starter with Netlify CMS →


    Experimental status

    Third-party integrations are currently only supported behind a flag, so you’ll need to update your Astro scripts to include the flag:

    astro dev --experimental-integrations
    astro build --experimental-integrations
    astro preview --experimental-integrations

    Adding the integration

    To add Netlify CMS to your project, import and use the integration in your Astro config file, adding it to the integrations array.

    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import NetlifyCMS from 'astro-netlify-cms';
    export default defineConfig({
      integrations: [
          config: {
            backend: {
              name: 'git-gateway',
              branch: 'main',
            collections: [
              // Content collections

    Configuration options

    You can pass an options object to the integration to configure how it behaves.


    Type: string
    Default: '/admin'

    Determines the route where the Netlify CMS admin dashboard will be available on your site.

    Feeling nostalgic for WordPress? You could set this to '/wp-admin'!


    Type: CmsConfig

    This option is required. It allows you to configure Netlify CMS with the same options you would use when using Netlify CMS’s config.yml file format.

    You can see a full list of configuration options in the Netlify CMS docs.

    At a minimum, you must set the backend and collections options:

    config: {
      // Use Netlify’s “Git Gateway” authentication and target our default branch
      backend: {
        name: 'git-gateway',
        branch: 'main',
      collections: [
        // Define a blog post collection
          name: 'posts',
          label: 'Blog Posts',
          folder: 'src/pages/posts',
          create: true,
          delete: true,
          fields: [
            { name: 'title', widget: 'string', label: 'Post Title' },
            { name: 'body', widget: 'markdown', label: 'Post Body' },


    Type: Array<string | [string, { raw: true }]>

    Sets custom CSS styles to apply in the Netlify CMS preview pane.

    You can provide URLs to external CSS stylesheets (Google Fonts for example), paths to local CSS files in your project, or even raw CSS strings:

    previewStyles: [
      // Path to a local CSS file, relative to your project’s root directory
      // A URL to an externally hosted CSS file
      // Raw CSS!
      ['p { color: red; }', { raw: true }],


    • Support registering custom preview components to render content as it is edited.
    • Support registering custom block components for use in the Markdown editor.


    npm i astro-netlify-cms

    DownloadsWeekly Downloads






    Unpacked Size

    19.4 kB

    Total Files


    Last publish


    • delucis