Widgets

Widgets define the data type and interface for entry fields. Netlify CMS comes with several built-in widgets. Click the widget names in the sidebar to jump to specific widget details. We’re always adding new widgets, and you can also create your own!

Widgets are specified as collection fields in the Netlify CMS config.yml file. Note that YAML syntax allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.

To see working examples of all of the built-in widgets, try making a ‘Kitchen Sink’ collection item on the CMS demo site. (No login required: click the login button and the CMS will open.) You can refer to the demo configuration code to see how each field was configured.

Common widget options

The following options are available on all fields:

  • required: specify as false to make a field optional; defaults to true
  • hint: optionally add helper text directly below a widget. Useful for including instructions. Accepts markdown for bold, italic, strikethrough, and links.
  • pattern: add field validation by specifying a list with a regex pattern and an error message; more extensive validation can be achieved with custom widgets.
  • Example:
      label: "Title"
      name: "title"
      widget: "string"
      pattern: ['.{12,}', "Must have at least 12 characters"]

Default widgets

Boolean

The boolean widget translates a toggle switch input to a true/false value.

  • Name: boolean
  • UI: toggle switch
  • Data type: boolean
  • Options:
    • default: accepts true or false; defaults to false when required is set to false
  • Example:
    - {label: "Draft", name: "draft", widget: "boolean", default: true}

Code

The code widget provides a code editor (powered by Codemirror) with optional syntax awareness. Can output the raw code value or an object with the selected language and the raw code value.

  • Name: code
  • UI: code editor
  • Data type: string
  • Options:
    • default_language: optional; default language to use
    • allow_language_selection: optional; defaults to false: allows syntax to be changed
    • keys: optional; sets key names for code and lang if outputting an object; defaults to { code: 'code', lang: 'lang' }
    • output_code_only: set to true to output the string value only, defaults to false
  • Example:
    - label: 'Code'
    name: 'code'
    widget: 'code'

Color

The color widget translates a color picker to a color string.

  • Name: color
  • UI: color picker
  • Data type: string
  • Options:
    • default: accepts a string; defaults to an empty string. Sets the default value
    • allowInput: accepts a boolean, defaults to false. Allows manual editing of the color input value
    • enableAlpha: accepts a boolean, defaults to false. Enables Alpha editing
  • Example:
    - { label: 'Color', name: 'color', widget: 'color' }
  • Example:
    - { label: 'Color', name: 'color', widget: 'color', enableAlpha: tru

Date

Deprecation notice: the date widget has been deprecated and will be removed in the next major release. Please use the datetime widget instead.

The date widget translates a date picker input to a date string. For saving date and time together, use the datetime widget.

  • Name: date
  • UI: date picker
  • Data type: Moment.js-formatted date string
  • Options:
    • default: accepts a date string, or an empty string to accept blank input; otherwise defaults to current date
    • format: optional; accepts Moment.js tokens; defaults to raw Date object (if supported by output format)
    • date_format: optional; boolean or Moment.js tokens. If true use default locale format.
    • time_format: optional; boolean or Moment.js tokens. If true use default locale format, false hides time-picker. Defaults to false.
  • Example:
    - label: 'Birthdate'
      name: 'birthdate'
      widget: 'date'
      default: ''
      format: 'MMM Do YY'

DateTime

The datetime widget translates a datetime picker to a datetime string.

  • Name: datetime
  • UI: datetime picker
  • Data type: Moment.js-formatted datetime string
  • Options:
    • default: accepts a datetime string, or an empty string to accept blank input; otherwise defaults to current datetime
    • format: sets storage format; accepts Moment.js tokens; defaults to raw Date object (if supported by output format)
    • date_format: sets date display format in UI; boolean or Moment.js tokens. If true use default locale format.
    • time_format: sets time display format in UI; boolean or Moment.js tokens. If true use default locale format, false hides time-picker.
    • picker_utc: (default: false) when set to true, the datetime picker will display times in UTC. When false, the datetime picker will display times in the user’s local timezone. When using date-only formats, it can be helpful to set this to true so users in all timezones will see the same date in the datetime picker.
  • Example:
    - label: "Start time"
      name: "start"
      widget: "datetime"
      default: ""
      date_format: "DD.MM.YYYY" # e.g. 24.12.2021
      time_format: "HH:mm" # e.g. 21:07
      format: "LLL"
      picker_utc: false

File

The file widget allows editors to upload a file or select an existing one from the media library. The path to the file will be saved to the field as a string.

  • Name: file
  • UI: file picker button opens media gallery
  • Data type: file path string
  • Options:
    • default: accepts a file path string; defaults to null
    • media_library: media library settings to apply when a media library is opened by the current widget
      • allow_multiple: (default: true) when set to false, prevents multiple selection for any media library extension, but must be supported by the extension in use
      • config: a configuration object that will be passed directly to the media library being used – available options are determined by the library
      • media_folder (Beta): file path where uploaded files will be saved specific to this control. Paths can be relative to a collection folder (e.g. files will add the file to a sub-folder in the collection folder) or absolute with reference to the base of the repo which needs to begin with / (e.g /static/files will save uploaded files to the static folder in a sub folder named files)
      • choose_url: (default: true) when set to false, the “Insert from URL” button will be hidden
  • Example:
    - label: "Manual PDF"
      name: "manual_pdf"
      widget: "file"
      default: "/uploads/general-manual.pdf"
      media_library:
        config:
          multiple: true

Hidden

Hidden widgets do not display in the UI. In folder collections that allow users to create new items, you will often want to set a default for hidden fields, so they will be set without requiring an input.

  • Name: hidden
  • UI: none
  • Data type: any valid data type
  • Options:
    • default: accepts any valid data type; recommended for collections that allow adding new items
  • Example:
    - {label: "Layout", name: "layout", widget: "hidden", default: "blog"

Image

The image widget allows editors to upload an image or select an existing one from the media library. The path to the image file will be saved to the field as a string.

  • Name: image
  • UI: file picker button opens media gallery allowing image files (jpg, jpeg, webp, gif, png, bmp, tiff, svg) only; displays selected image thumbnail
  • Data type: file path string
  • Options:
    • default: accepts a file path string; defaults to null
    • media_library: settings to apply when a media library is opened by the current widget
    • allow_multiple: (default: true) when set to false, multiple selection will be disabled even if the media library extension supports it
    • config: a configuration object passed directly to the media library; check the documentation of your media library extension for available config options
    • media_folder (Beta): file path where uploaded images will be saved specific to this control. Paths can be relative to a collection folder (e.g. images will add the image to a sub-folder in the collection folder) or absolute with reference to the base of the repo which needs to begin with / (e.g /static/images will save uploaded images to the static folder in a sub folder named images)
    • choose_url: (default: true) when set to false, the “Insert from URL” button will be hidden
  • Example:
  - label: "Featured Image"
    name: "thumbnail"
    widget: "image"
    choose_url: true
    default: "/uploads/chocolate-dogecoin.jpg"
    media_library:
      config:
        multiple: true

List

The list widget allows you to create a repeatable item in the UI which saves as a list of widget values. map a user-provided string with a comma delimiter into a list. You can choose any widget as a child of a list widget—even other lists.

  • Name: list
  • UI: without any fields specified, the list widget defaults to a text input for entering comma-separated values; with fields specified, the list widget contains a repeatable child widget, with controls for adding, deleting, and re-ordering the repeated widgets.
  • Data type: list of widget values
  • Options:
    • default: you may specify a list of strings to populate the basic text field, or an array of list items for lists using the fields option. If no default is declared when using field or fields, will default to a single list item using the defaults on the child widgets
    • allow_add: false hides the button to add additional items
    • collapsed: when true, the entries collapse by default
    • summary: specify the label displayed on collapsed entries
    • minimize_collapsed: when true, collapsing the list widget will hide all of it’s entries instead of showing summaries
    • label_singular: the text to show on the add button
    • field: a single widget field to be repeated
    • fields: a nested list of multiple widget fields to be included in each repeatable iteration
    • max: maximum number of items in the list
    • min: minimum number of items in the list
    • add_to_top: when true, new entries will be added to the top of the list
  • Example (field/fields not specified):
- label: "Tags"
  name: "tags"
  widget: "list"
  default: ["news"]
  • Example (allow_add marked false):
- label: "Tags"
  name: "tags"
  widget: "list"
  allow_add: false
  default: ["news"]
  • Example (with field):
- label: "Gallery"
  name: "galleryImages"
  widget: "list"
  summary: '{{fields.image}}'
  field: {label: Image, name: image, widget: image}
  • Example (with fields):
- label: "Testimonials"
  name: "testimonials"
  widget: "list"
  summary: '{{fields.quote}} - {{fields.author.name}}'
  fields:
    - {label: Quote, name: quote, widget: string, default: "Everything is awesome!"}
    - label: Author
      name: author
      widget: object
      fields:
        - {label: Name, name: name, widget: string, default: "Emmet"}
        - {label: Avatar, name: avatar, widget: image, default: "/img/emmet.jpg"}
  • Example (with default):
- label: "Gallery"
  name: "galleryImages"
  widget: "list"
  fields:
    - { label: "Source", name: "src", widget: "string" }
    - { label: "Alt Text", name: "alt", widget: "string" }
  default:
    - { src: "/img/tennis.jpg", alt: "Tennis" }
    - { src: "/img/footbar.jpg", alt: "Football" }
  • Example (collapsed marked false):
- label: "Testimonials"
  name: "testimonials"
  collapsed: false
  widget: "list"
  fields:
    - {label: Quote, name: quote, widget: string, default: "Everything is awesome!"}
    - {label: Author, name: author, widget: string }
  • Example (minimize_collapsed marked true):
- label: "Testimonials"
  name: "testimonials"
  minimize_collapsed: true
  widget: "list"
  fields:
    - {label: Quote, name: quote, widget: string, default: "Everything is awesome!"}
    - {label: Author, name: author, widget: string }
  • Example (with max & min):
- label: "Tags"
  name: "tags"
  widget: "list"
  max: 3
  min: 1
  default: ["news"]
  • Example (add_to_top marked true):
- label: "Tags"
  name: "tags"
  widget: "list"
  add_to_top: true

Map

The map widget allows you to edit spatial data using an interactive map. Spatial data for a single piece of geometry saves as a GeoJSON string in WGS84 projection.

  • Name: map
  • UI: interactive map
  • Data type: GeoJSON string
  • Options:
    • decimals: accepts a number to specify precision of saved coordinates; defaults to 7 decimals
    • default: accepts a GeoJSON string containing a single geometry; defaults to an empty string
    • type: accepts one string value of Point, LineString or Polygon; defaults to Point
  • Example:
    - {label: "Location", name: "location", widget: "map" }

Markdown

The markdown widget provides a full fledged text editor allowing users to format text with features such as headings and blockquotes. Users can change their editing view with a handy toggle button.

Please note: If you want to use your markdown editor to fill a markdown file contents after its frontmatter, you’ll have to name the field body so the CMS recognizes it and saves the file accordingly.

  • Name: markdown
  • UI: full text editor
  • Data type: markdown
  • Options:
    • default: accepts markdown content
    • minimal: accepts a boolean value, false by default. Sets the widget height to minimum possible.
    • buttons: an array of strings representing the formatting buttons to display (all shown by default). Buttons include: bold, italic, code, link, heading-one, heading-two, heading-three, heading-four, heading-five, heading-six, quote, bulleted-list, and numbered-list.
    • editor_components: an array of strings representing the names of editor components to display (all shown by default). Netlify CMS includes image and code-block editor components by default, and custom components may be created and registered.
    • modes: an array of strings representing the names of allowed editor modes. Possible modes are raw and rich_text. A toggle button appears in the toolbar when more than one mode is available.
    • sanitize_preview: accepts a boolean value, false by default. Sanitizes markdown preview to prevent XSS attacks – might alter the preview content.
  • Example:
    - { label: 'Blog post content', name: 'body', widget: 'markdown' }

This would render as:

Markdown widget example

Please note: The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator’s documentation for more information about rendering

Number

The number widget uses an HTML number input, saving the value as a string, integer, or floating point number.

  • Name: number
  • UI: HTML number input
  • Data type: string by default; configured by value_type option
  • Options:
    • default: accepts string or number value; defaults to empty string
    • value_type: accepts int or float; any other value results in saving as a string
    • min: accepts a number for minimum value accepted; unset by default
    • max: accepts a number for maximum value accepted; unset by default
    • step: accepts a number for stepping up/down values in the input; 1 by default
  • Example:
    - label: "Puppy Count"
      name: "puppies"
      widget: "number"
      default: 2
      value_type: "int"
      min: 1
      max: 101
      step: 2

markdown.

Object

The object widget allows you to group multiple widgets together, nested under a single field. You can choose any widget as a child of an object widget—even other objects.

  • Name: object
  • UI: a field containing one or more child widgets
  • Data type: list of child widget values
  • Options:
    • default: you can set defaults within each sub-field’s configuration
    • collapsed: if added and labeled true, collapse the widget’s content by default
    • summary: specify the label displayed when the object is collapsed
    • fields: (required) a nested list of widget fields to include in your widget
  • Example:
    - label: "Profile"
      name: "profile"
      widget: "object"
      summary: '{{fields.name}}: {{fields.birthdate}}'
      fields:
        - {label: "Public", name: "public", widget: "boolean", default: true}
        - {label: "Name", name: "name", widget: "string"}
        - label: "Birthdate"
          name: "birthdate"
          widget: "date"
          default: ""
          format: "MM/DD/YYYY"
        - label: "Address"
          name: "address"
          widget: "object"
          collapsed: true
          fields: 
            - {label: "Street Address", name: "street", widget: "string"}
            - {label: "City", name: "city", widget: "string"}
            - {label: "Postal Code", name: "post-code", widget: "string"

Relation

The relation widget allows you to reference items from another collection. It provides a search input with a list of entries from the collection you’re referencing, and the list automatically updates with matched entries based on what you’ve typed.

  • Name: relation
  • UI: text input with search result dropdown
  • Data type: data type of the value pulled from the related collection item
  • Options:
    • collection: (required) name of the referenced collection (string)
    • value_field: (required) name of the field from the referenced collection whose value will be stored for the relation. For nested fields, separate each subfield with a . (e.g. name.first). For list fields use a wildcard * to target all list items (e.g. categories.*).
    • search_fields: (required) list of one or more names of fields in the referenced collection to search for the typed value. Syntax to reference nested fields is similar to that of value_field.
    • file: allows referencing a specific file when the referenced collection is a files collection (string)
    • display_fields: list of one or more names of fields in the referenced collection that will render in the autocomplete menu of the control. Defaults to value_field. Syntax to reference nested fields is similar to that of value_field.
    • default: accepts any widget data type; defaults to an empty string
    • multiple : accepts a boolean, defaults to false
    • min: minimum number of items; ignored if multiple is false
    • max: maximum number of items; ignored if multiple is false
    • options_length: accepts integer to override number of options presented to user. Defaults to 20.
  • Referencing a folder collection example (assuming a separate “authors” collection with “name” and “twitterHandle” fields with subfields “first” and “last” for the “name” field):
- label: "Post Author"
  name: "author"
  widget: "relation"
  collection: "authors"
  search_fields: ["name.first", "twitterHandle"]
  value_field: "name.first"
  display_fields: ["twitterHandle", "followerCount"]

The generated UI input will search the authors collection by name and twitterHandle, and display each author’s handle and follower count. On selection, the author’s name is saved for the field.

  • String templates example (assuming a separate “authors” collection with “name” and “twitterHandle” fields with subfields “first” and “last” for the “name” field):
- label: "Post Author"
  name: "author"
  widget: "relation"
  collection: "authors"
  search_fields: ['name.first']
  value_field: "{{slug}}"
  display_fields: ["{{twitterHandle}} - {{followerCount}}"]

The generated UI input will search the authors collection by name, and display each author’s handle and follower count. On selection, the author entry slug is saved for the field.

  • Referencing a file collection list field example (assuming a separate “relation_files” collection with a file named “cities” with a list field “cities” with subfields “name” and “id”):
- label: "City"
  name: "city"
  widget: "relation"
  collection: "relation_files"
  file: "cities"
  search_fields: ["cities.*.name"]
  display_fields: ["cities.*.name"]
  value_field: "cities.*.id"

The generated UI input will search the cities file by city name, and display each city’s name. On selection, the city id is saved for the field.

Select

The select widget allows you to pick a string value from a dropdown menu.

  • Name: select
  • UI: select input
  • Data type: string or array
  • Options:
    • default: options must contain any default values
      • string values: accepts a string; defaults to an empty string. Accepts an array of strings and defaults to an empty array with multiple: true enabled.
      • object with label and value fields: accepts an object with label and value field or an array of such objects when multiple: true is enable. Defaults to no value
    • options: (required) there are two ways to list of options for the dropdown menu:
      • string values: the dropdown displays the value directly
      • object with label and value fields: the label displays in the dropdown; the value saves in the file
    • multiple: accepts a boolean; defaults to false
    • min: minimum number of items; ignored if multiple is false
    • max: maximum number of items; ignored if multiple is false
  • Example (options as strings):
- label: "Align Content"
  name: "align"
  widget: "select"
  options: ["left", "center", "right"]

Selecting the center option, will save the value as:

align: "center"
  • Example (options as objects):
- label: "City"
  name: "airport-code"
  widget: "select"
  options:
    - { label: "Chicago", value: "ORD" }
    - { label: "Paris", value: "CDG" }
    - { label: "Tokyo", value: "HND" }

Selecting the Chicago option, will save the value as:

airport-code: "ORD"
  • Example (multiple):
- label: "Tags"
  name: "tags"
  widget: "select"
  multiple: true
  options: ["Design", "UX", "Dev"]
  default: ["Design"]
  • Example (min/max):
- label: "Tags"
  name: "tags"
  widget: "select"
  multiple: true
  min: 1
  max: 3
  options: ["Design", "UX", "Dev"]
  default: ["Design"]

String

The string widget translates a basic text input to a string value. For larger textarea inputs, use the text widget.

  • Name: string
  • UI: text input
  • Data type: string
  • Options:
    • default: accepts a string; defaults to an empty string
  • Example:
    - {label: "Title", name: "title", widget: "string"}

Text

The text widget takes a multiline text field and saves it as a string. For shorter text inputs, use the string widget.

  • Name: text
  • UI: HTML textarea
  • Data type: string
  • Options:
    • default: accepts a string; defaults to an empty string
  • Example:
    - {label: "Description", name: "description", widget: "text"}

 

Configuration Options

Configuration File

All configuration options for Netlify CMS are specified in a config.yml file, in the folder where you access the editor UI (usually in the /admin folder).

Alternatively, you can specify a custom config file using a link tag:

<!-- Note the "type" and "rel" attribute values, which are required. -->
<link href="path/to/config.yml" type="text/yaml" rel="cms-config-url">

To see working configuration examples, you can start from a template or check out the CMS demo site. (No login required: click the login button and the CMS will open.) You can refer to the demo configuration code to see how each option was configured.

You can find details about all configuration options below. Note that YAML syntax allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.

Backend

This setting is required.

The backend option specifies how to access the content for your site, including authentication. Full details and code samples can be found in Backends.

Note: no matter where you access Netlify CMS — whether running locally, in a staging environment, or in your published site — it will always fetch and commit files in your hosted repository (for example, on GitHub), on the branch you configured in your Netlify CMS config.yml file. This means that content fetched in the admin UI will match the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI will save directly to the hosted repository, even if you’re running the UI locally or in staging. If you want to have your local CMS write to a local repository, try the local_backend setting, currently in beta.

Publish Mode

By default, all entries created or edited in the Netlify CMS are committed directly into the main repository branch.

The publish_mode option allows you to enable “Editorial Workflow” mode for more control over the content publishing phases. All unpublished entries will be arranged in a board according to their status, and they can be further reviewed and edited before going live.

Note: Editorial workflow works with GitHub repositories, and support for GitLab and Bitbucket is in beta.

You can enable the Editorial Workflow with the following line in your Netlify CMS config.yml file:

# /admin/config.yml
publish_mode: editorial_workflow

From a technical perspective, the workflow translates editor UI actions into common Git commands:

Actions in Netlify UI Perform these Git actions
Save draft Commits to a new branch (named according to the pattern cms/collectionName/entrySlug), and opens a pull request
Edit draft Pushes another commit to the draft branch/pull request
Approve and publish draft Merges pull request and deletes branch

Media and Public Folders

Netlify CMS users can upload files to your repository using the Media Gallery. The following settings specify where these files are saved, and where they can be accessed on your built site.

Media Folder

This setting is required.

The media_folder option specifies the folder path where uploaded files should be saved, relative to the base of the repo.

media_folder: "static/images/uploads"

Public Folder

The public_folder option specifies the folder path where the files uploaded by the media library will be accessed, relative to the base of the built site. For fields controlled by [file] or [image] widgets, the value of the field is generated by prepending this path to the filename of the selected file. Defaults to the value of media_folder, with an opening / if one is not already included.

public_folder: "/images/uploads"

Based on the settings above, if a user used an image widget field called avatar to upload and select an image called philosoraptor.png, the image would be saved to the repository at /static/images/uploads/philosoraptor.png, and the avatar field for the file would be set to /images/uploads/philosoraptor.png.

This setting can be set to an absolute URL e.g. https://netlify.com/media should you wish, however in general this is not advisable as content should have relative paths to other content.

Media Library

Media library integrations are configured via the media_library property, and its value should be an object with at least a name property. A config property can also be used for options that should be passed to the library in use.

Example:

media_library:
  name: uploadcare
  config:
    publicKey: demopublickey

Site URL

The site_url setting should provide a URL to your published site. May be used by the CMS for various functionality. Used together with a collection’s preview_path to create links to live content.

Example:

site_url: https://your-site.com

Display URL

When the display_url setting is specified, the CMS UI will include a link in the fixed area at the top of the page, allowing content authors to easily return to your main site. The text of the link consists of the URL with the protocol portion (e.g., https://your-site.com).

Defaults to site_url.

Example:

display_url: https://your-site.com

When the logo_url setting is specified, the CMS UI will change the logo displayed at the top of the login page, allowing you to brand the CMS with your own logo. logo_url is assumed to be a URL to an image file.

Example:

logo_url: https://your-site.com/images/logo.svg

Locale

The CMS locale.

Defaults to en.

Other languages than English must be registered manually.

Example

In your config.yml:

locale: 'de'

And in your custom JavaScript code:

import CMS from 'netlify-cms-app';
import { de } from 'netlify-cms-locales';

CMS.registerLocale('de', de);

When a translation for the selected locale is missing the English one will be used.

When importing netlify-cms all locales are registered by default (so you only need to update your config.yml).

Deploy preview links can be disabled by setting show_preview_links to false.

Example:

show_preview_links: false

The search functionally requires loading all collection(s) entries, which can exhaust rate limits on large repositories. It can be disabled by setting the top level search property to false.

Defaults to true

Example:

search: false

Slug Type

The slug option allows you to change how filenames for entries are created and sanitized. It also applies to filenames of media inserted via the default media library.
For modifying the actual data in a slug, see the per-collection option below.

slug accepts multiple options:

  • encoding
    • unicode (default): Sanitize filenames (slugs) according to RFC3987 and the WHATWG URL spec. This spec allows non-ASCII (or non-Latin) characters to exist in URLs.
    • ascii: Sanitize filenames (slugs) according to RFC3986. The only allowed characters are (0-9, a-z, A-Z, _, -, ~).
  • clean_accents: Set to true to remove diacritics from slug characters before sanitizing. This is often helpful when using ascii encoding.
  • sanitize_replacement: The replacement string used to substitute unsafe characters, defaults to -.

Example

slug:
  encoding: "ascii"
  clean_accents: true
  sanitize_replacement: "_"

Collections

This setting is required.

The collections setting is the heart of your Netlify CMS configuration, as it determines how content types and editor fields in the UI generate files and content in your repository. Each collection you configure displays in the left sidebar of the Content page of the editor UI, in the order they are entered into your Netlify CMS config.yml file.

collections accepts a list of collection objects, each with the following options:

  • name (required): unique identifier for the collection, used as the key when referenced in other contexts (like the relation widget)
  • identifier_field: see detailed description below
  • label: label for the collection in the editor UI; defaults to the value of name
  • label_singular: singular label for certain elements in the editor; defaults to the value of label
  • description: optional text, displayed below the label when viewing a collection
  • files or folder (requires one of these): specifies the collection type and location; details in Collection Types
  • filter: optional filter for folder collections; details in Collection Types
  • create: for folder collections only; true allows users to create new items in the collection; defaults to false
  • publish: for publish_mode: editorial_workflow only; false hides UI publishing controls for a collection; defaults to true
  • hide: true hides a collection in the CMS UI; defaults to false. Useful when using the relation widget to hide referenced collections.
  • delete: false prevents users from deleting items in a collection; defaults to true
  • extension: see detailed description below
  • format: see detailed description below
  • frontmatter_delimiter: see detailed description under format
  • slug: see detailed description below
  • preview_path: see detailed description below
  • preview_path_date_field: see detailed description below
  • fields (required): see detailed description below
  • editor: see detailed description below
  • summary: see detailed description below
  • sortable_fields: see detailed description below
  • view_filters: see detailed description below
  • view_groups: see detailed description below

The last few options require more detailed information.

identifier_field

Netlify CMS expects every entry to provide a field named "title" that serves as an identifier for the entry. The identifier field serves as an entry’s title when viewing a list of entries, and is used in slug creation. If you would like to use a field other than "title" as the identifier, you can set identifier_field to the name of the other field.

Example

collections:
  - name: posts
    identifier_field: name

extension and format

These settings determine how collection files are parsed and saved. Both are optional—Netlify CMS will attempt to infer your settings based on existing items in the collection. If your collection is empty, or you’d like more control, you can set these fields explicitly.

extension determines the file extension searched for when finding existing entries in a folder collection and it determines the file extension used to save new collection items. It accepts the following values: yml, yaml, toml, json, md, markdown, html.

You may also specify a custom extension not included in the list above, as long as the collection files can be parsed and saved in one of the supported formats below.

format determines how collection files are parsed and saved. It will be inferred if the extension field or existing collection file extensions match one of the supported extensions above. It accepts the following values:

  • yml or yaml: parses and saves files as YAML-formatted data files; saves with yml extension by default
  • toml: parses and saves files as TOML-formatted data files; saves with toml extension by default
  • json: parses and saves files as JSON-formatted data files; saves with json extension by default
  • frontmatter: parses files and saves files with data frontmatter followed by an unparsed body text (edited using a body field); saves with md extension by default; default for collections that can’t be inferred. Collections with frontmatter format (either inferred or explicitly set) can parse files with frontmatter in YAML, TOML, or JSON format. However, they will be saved with YAML frontmatter.
  • yaml-frontmatter: same as the frontmatter format above, except frontmatter will be both parsed and saved only as YAML, followed by unparsed body text. The default delimiter for this option is ---.
  • toml-frontmatter: same as the frontmatter format above, except frontmatter will be both parsed and saved only as TOML, followed by unparsed body text. The default delimiter for this option is +++.
  • json-frontmatter: same as the frontmatter format above, except frontmatter will be both parsed and saved as JSON, followed by unparsed body text. The default delimiter for this option is { }.

frontmatter_delimiter

If you have an explicit frontmatter format declared, this option allows you to specify a custom delimiter like ~~~. If you need different beginning and ending delimiters, you can use an array like ["(", ")"].

slug

For folder collections where users can create new items, the slug option specifies a template for generating new filenames based on a file’s creation date and title field. (This means that all collections with create: true must have a title field (a different field can be used via identifier_field).

The slug template can also reference a field value by name, eg. {{title}}. If a field name conflicts with a built in template tag name – for example, if you have a field named slug, and would like to reference that field via {{slug}}, you can do so by adding the explicit fields. prefix, eg. {{fields.slug}}.

Available template tags:

  • Any field can be referenced by wrapping the field name in double curly braces, eg. {{author}}
  • {{slug}}: a url-safe version of the title field (or identifier field) for the file
  • {{year}}: 4-digit year of the file creation date
  • {{month}}: 2-digit month of the file creation date
  • {{day}}: 2-digit day of the month of the file creation date
  • {{hour}}: 2-digit hour of the file creation date
  • {{minute}}: 2-digit minute of the file creation date
  • {{second}}: 2-digit second of the file creation date

Example:

slug: "{{year}}-{{month}}-{{day}}_{{slug}}"

Example using field names:

slug: "{{year}}-{{month}}-{{day}}_{{title}}_{{some_other_field}}"

Example using field name that conflicts with a template tag:

slug: "{{year}}-{{month}}-{{day}}_{{fields.slug}}"

preview_path

A string representing the path where content in this collection can be found on the live site. This allows deploy preview links to direct to lead to a specific piece of content rather than the site root of a deploy preview.

Available template tags:

Template tags are the same as those for slug, with the following exceptions:

  • {{slug}} is the entire slug for the current entry (not just the url-safe identifier, as is the case with slug configuration)
  • The date based template tags, such as {{year}} and {{month}}, are pulled from a date field in your entry, and may require additional configuration – see preview_path_date_field for details. If a date template tag is used and no date can be found, preview_path will be ignored.
  • {{dirname}} The path to the file’s parent directory, relative to the collection’s folder.
  • {{filename}} The file name without the extension part.
  • {{extension}} The file extension.

Examples:

collections:
  - name: posts
    preview_path: "blog/{{year}}/{{month}}/{{slug}}"
collections:
  - name: posts
    preview_path: "blog/{{year}}/{{month}}/{{filename}}.{{extension}}"

preview_path_date_field

The name of a date field for parsing date-based template tags from preview_path. If this field is not provided and preview_path contains date-based template tags (eg. {{year}}), Netlify CMS will attempt to infer a usable date field by checking for common date field names, such as date. If you find that you need to specify a date field, you can use preview_path_date_field to tell Netlify CMS which field to use for preview path template tags.

Example:

collections:
  - name: posts
    preview_path_date_field: "updated_on"

fields

The fields option maps editor UI widgets to field-value pairs in the saved file. The order of the fields in your Netlify CMS config.yml file determines their order in the editor UI and in the saved file.

fields accepts a list of collection objects, each with the following options:

  • name (required): unique identifier for the field, used as the key when referenced in other contexts (like the relation widget)
  • label: label for the field in the editor UI; defaults to the value of name
  • widget: defines editor UI and inputs and file field data types; details in Widgets
  • default: specify a default value for a field; available for most widget types (see Widgets for details on each widget type). Please note that field default value only works for folder collection type.
  • required: specify as false to make a field optional; defaults to true
  • pattern: add field validation by specifying a list with a regex pattern and an error message; more extensive validation can be achieved with custom widgets
  • comment: optional comment to add before the field (only supported for yaml)

In files with frontmatter, one field should be named body. This special field represents the section of the document (usually markdown) that comes after the frontmatter.

Example:

fields:
  - label: "Title"
    name: "title"
    widget: "string"
    pattern: ['.{20,}', "Must have at least 20 characters"]
  - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
  - {label: "Featured Image", name: "thumbnail", widget: "image", required: false}
  - {label: "Body", name: "body", widget: "markdown"}
    comment: 'This is a multiline\ncomment'

editor

This setting changes options for the editor view of a collection or a file inside a files collection. It has one option so far:

  • preview: set to false to disable the preview pane for this collection or file; defaults to true

Example:

  editor:
     preview: false

Note: Setting this as a top level configuration will set the default for all collections

summary

This setting allows the customization of the collection list view. Similar to the slug field, a string with templates can be used to include values of different fields, e.g. {{title}}. This option over-rides the default of title field and identifier_field.

Available template tags:

Template tags are the same as those for slug, with the following additions:

  • {{dirname}} The path to the file’s parent directory, relative to the collection’s folder.
  • {{filename}} The file name without the extension part.
  • {{extension}} The file extension.
  • {{commit_date}} The file commit date on supported backends (git based backends).
  • {{commit_author}} The file author date on supported backends (git based backends).

Example

    summary: "Version: {{version}} - {{title}}"

sortable_fields

An optional list of sort fields to show in the UI.

Defaults to inferring title, date, author and description fields and will also show Update On sort field in git based backends.

When author field can’t be inferred commit author will be used.

Example

    # use dot notation for nested fields
    sortable_fields: ['commit_date', 'title', 'commit_author', 'language.en']

view_filters

An optional list of predefined view filters to show in the UI.

Defaults to an empty list.

Example

    view_filters:
      - label: "Alice's and Bob's Posts"
        field: author
        pattern: 'Alice|Bob'
      - label: 'Posts published in 2020'
        field: date
        pattern: '2020'
      - label: Drafts
        field: draft
        pattern: true

view_groups

An optional list of predefined view groups to show in the UI.

Defaults to an empty list.

Example

    view_groups:
      - label: Year
        field: date
        # groups items based on the value matched by the pattern
        pattern: \d{4}
      - label: Drafts
        field: draft

Writing Style Guide

Netlify CMS Style Guide

Adapted from the Kubernetes Style Guide

Documentation Formatting Standards

Use angle brackets for placeholders

Use angle brackets for placeholders. Tell the reader what a placeholder represents.

  1. Display information about a cli command:
npm install <package-name>

where <package-name> is the name of a package.

Use bold for user interface elements

Do: Click Save.

Don’t: Click “Save”.


Do: Select Log Out.

Don’t: Select ‘Log Out’.


Use italics to define or introduce new terms

Do: A collection is a set of entries …

Don’t: A “collection” is a set of entries …


Do: These components form the control pane.

Don’t: These components form the control pane.


Use code style for filenames, directories, and paths

Do: Open the config.yaml file.

Don’t: Open the config.yaml file.


Do: Go to the /docs/guides directory.

Don’t: Go to the /docs/guides directory.


Do: Open the /admin/index.html file.

Don’t: Open the /admin/index.html file.


Use the international standard for punctuation inside quotes

Do: Branch names begin with “cms”.

Don’t: Branch names begin with “stage.”


Do: The copy is called a “fork”.

Don’t: The copy is called a “fork.”


Inline code formatting

Use code style for inline code and commands

For inline code in an HTML document, use the <code> tag. In a Markdown document, use the backtick (`).

Do: The yarn start command starts the development server.

Don’t: The “yarn start” command starts the development server.


Do: For a production build, use yarn build.

Don’t: For a production build, use “yarn build”.


Do: Enclose code samples with triple backticks. (```)

Don’t:Enclose code samples with any other syntax.


Use code style for object field names

Do: Set the value of the media_folder field in the configuration file.

Don’t: Set the value of the “media_folder” field in the configuration file.


Do: The value of the name field is a string.

Don’t: The value of the “name” field is a string.


Use normal style for string and integer field values

For field values of type string or integer, use normal style without quotation marks.

Do: Set the value of publish_mode to editorial_workflow.

Don’t: Set the value of imagePullPolicy to “Always”.


Do: Set the value of image to nginx:1.8.

Don’t: Set the value of image to nginx:1.8.


Do: Set the value of the replicas field to 2.

Don’t: Set the value of the replicas field to 2.


Code snippet formatting

Don’t include the command prompt

Do: yarn start

Don’t: $ yarn start

Content best practices

This section contains suggested best practices for clear, concise, and consistent content.

Use present tense

Do: This command starts a proxy.

Don’t: This command will start a proxy.

Exception: Use future or past tense if it is required to convey the correct meaning.

Use active voice

Do: You can explore the API using a browser.

Don’t: The API can be explored using a browser.


Do: The YAML file specifies the collection name.

Don’t: The collection name is specified in the YAML file.


Exception: Use passive voice if active voice leads to an awkward construction.

Use simple and direct language

Use simple and direct language. Avoid using unnecessary phrases, such as saying “please.”

Do: To create an entry, …

Don’t: In order to create an entry, …


Do: See the configuration file.

Don’t: Please see the configuration file.


Do: View the fields.

Don’t: With this next command, we’ll view the fields.


Address the reader as “you”

Do: You can create a Deployment by …

Don’t: We’ll create a Deployment by …


Do: In the preceding output, you can see…

Don’t: In the preceding output, we can see …

Avoid Latin phrases

Prefer English terms over Latin abbreviations.

Do: For example, …

Don’t: e.g., …


Do: That is, …

Don’t: i.e., …


Exception: Use “etc.” for et cetera.

Patterns to avoid

Avoid using “we”

Using “we” in a sentence can be confusing, because the reader might not know whether they’re part of the “we” you’re describing.

Do: Version 1.4 includes …

Don’t: In version 1.4, we have added …


Do: Netlify CMS provides a new feature for …

Don’t: We provide a new feature …


Do: This page teaches you how to use Widgets.

Don’t: In this page, we are going to learn about Widgets.


Avoid jargon and idioms

Some readers speak English as a second language. Avoid jargon and idioms to help them understand better.

Do: Internally

Don’t: Under the hood, …


Do: Create a new cluster.

Don’t: Turn up a new cluster.


Avoid statements about the future

Avoid making promises or giving hints about the future. If you need to talk about an alpha feature, put the text under a heading that identifies it as alpha information.

Avoid statements that will soon be out of date

Avoid words like “currently” and “new.” A feature that is new today will not be new in a few months.

Do: In version 1.4, …

Don’t: In the current version, …


Do: The Federation feature provides …

Don’t: The new Federation feature provides …


Contributor Guide

We’re hoping that Netlify CMS will do for the Jamstack what WordPress did for dynamic sites back in the day. We know we can’t do that without building a thriving community of contributors and users, and we’d love to have you join us.

Getting started with contributing

Being a developer is not a requirement for contributing to Netlify CMS, you only need the desire, a web browser, and a GitHub account. The GitHub repo has a step-by-step guide to get started with the code.

The basics of the Netlify CMS docs

The documentation for Netlify CMS is written in Markdown (a good cheatsheet on Markdown is here), with the source residing on GitHub in the /website/content/docs folder.

The GitHub website allows you to submit issues, work with files, search for content, and browse changes that have been submitted in the past and those that are being submitted now (aka Pull Requests).

Style guidelines

A style guide is available to help provide context around grammar, code styling, syntax, etc.

Filing issues

If you have a GitHub account, you can file an issue (aka bug report) against the Netlify CMS docs. Even if you’re not able to, or don’t know how to, fix the issue (see Improve existing content), it helps to start the conversation.

When filing an issue, it is important to remember the Code of Conduct.

Improve existing content

If you are able to offer up a change to existing content, we welcome this. Once you’ve forked the repo, and changed the content, you would file a pull request (PR). The repo Contributing file lays out the correct format for PRs.

Other places to get involved

While we work on building this page (and you can help!), here are some links with more information about getting involved:

  • Setup instructions and Contribution Guidelines
  • Join our Community Chat
  • Code of Conduct
  • Project Milestones
  • Good First Issues

Deploy Preview Links

When using the editorial workflow, content editors can create and save content without publishing it to a live site. Deploy preview links provide a way to view live content when it has not been published, provided that you’re using a continuous deployment platform to provide “deploy previews” of your unmerged content.

Deploy preview links will work without configuration when all of the following requirements are met:

  • Netlify CMS version is 2.4.0+ for GitHub support and 2.10.6+ for GitLab/Bitbucket support
  • Using editorial workflow
  • Have a continuous deployment platform that builds every commit and provides statuses to your repo

Any site created using one of the Deploy to Netlify options on our starters page will automatically meet these criteria (barring any changes made to your Netlify settings), but you may need to update your Netlify CMS version to get the functionality.

Note: If you’re using a custom backend (one that is not included with Netlify CMS), please check the documentation for that backend for more information about enabling deploy preview links.

Deploy preview links are provided in the editor toolbar, near the publishing controls:

Deploy preview link for unpublished content

Waiting for builds

Deploy your site preview may take ten seconds or ten minutes, depending on many factors. For maximum flexibility, Netlify CMS provides a “Check for Preview” refresh button when the deploy preview is pending, which a content editor can use to manually check for a finished preview until it’s ready:

Deploy preview link for unpublished content

Configuring preview paths

Deploy preview links point to the site root by default, but you’ll probably want them to point to the specific piece of content that the content editor is viewing. You can do this by providing a preview_path string template for each collection, or for inidividual files in a files collection.

Let’s say we have a blog collection that stores content in our repo under content/blog. The path to a post in your repo may look like content/blog/2018-01-new-post.md, but the path to that post on your site would look more like: /blog/2018-01-new-post/. Here’s how you would use preview_path in your configuration for this scenario:

collections:
  - name: blog
    folder: content/blog
    slug: {{year}}-{{month}}-{{slug}}
    preview_path: blog/{{slug}}

Similarly, for an about page in a files collection under content/pages which maps to /about-the-project on your site, you would configure preview_path like this:

collections:
  - name: pages
    files:
      - name: about
        file: content/pages/about.md
        preview_path: about-the-project

With the above configuration, the deploy preview URL from your backend will be combined with your preview path to create a URL to a specific blog post.

Note: {{slug}} in preview_path is different than {{slug}} in slug. In the slug template, {{slug}} is only the url-safe identifier field, while in the preview_path template, {{slug}} is the entire slug for the entry. For example:

# for an entry created Jan 1, 2000 with identifier "My New Post!"
collections:
  - name: posts
    slug: {{year}}-{{month}}-{{slug}} # {{slug}} will compile to "my-new-post"
    preview_path: blog/{{slug}} # {{slug}} will compile to "2000-01-my-new-post"

Dates in preview paths

Some static site generators allow URL’s to be customized with date parameters – for example, Hugo can be configured to use values like year and month in a URL. These values are generally derived by the static site generator from a date field in the content file. preview_path accepts these parameters as well, similar to the slug configuration, except preview_path populates date values based on a date value from the entry, just like static site generators do. Netlify CMS will attempt to infer an obvious date field, but you can also specify which date field to use for preview_path template tags by using preview_path_date_field.

Together with your other field values, dates can be used to configure most URL schemes available through static site generators.

Example

# This collection's date field will be inferred because it has a field named `"date"`
collections:
  - name: posts
    preview_path: blog/{{year}}/{{month}}/{{title}}
    fields:
      - { name: title, label: Title }
        { name: date, label: Date, widget: date }
        { name: body, label: Body, widget: markdown }
# This collection requires `path_preview_date_field` because the no obvious date field is available
collections:
  - name: posts
    preview_path: blog/{{year}}/{{month}}/{{title}}
    preview_path_date_field: published_at
    fields:
      - { name: title, label: Title }
        { name: published_at, label: Published At, widget: date }
        { name: body, label: Body, widget: markdown }

You may also want preview links for published content as a convenience. You can do this by providing a site_url in your configuration, which will be used in place of the deploy preview URL that a backend would provide for an unpublished entry. Just as for deploy preview links to unpublished content, links to published content will use any preview_path values that are defined in the collection configurations.

Preview links for published content will also work if you are not using the editorial workflow.

Deploy preview link for unpublished content

To disable deploy preview links, set show_preview_links to false in your CMS configuration.

How it works

Deploy preview links are provided through your CMS backend, and Netlify CMS is unopinionated about where the links come from or how they’re created. That said, the general approach for Git backends like GitHub is powered by “commit statuses”. Continuous deployment platforms like Netlify can deploy a version of your site for every commit that is pushed to your remote Git repository, and then send a commit status back to your repository host with the URL.

The deploy preview URL provided by a backend will lead to the root of the deployed site. Netlify CMS will then use the preview_path template in an entry’s collection configuration to build a path to a specific piece of content. If a preview_path is not provided for an entry’s collection, the URL will be used as is.