Storing Content in JSON files with NetlifyCMS

Hello friends,

Are there any example of configuring Netlify CMS to store content page content in JSON files instead of YML?

Many thanks

Hi there - Netlify CMS currently supports markdown, yaml, json, and toml. Editing json files works the same way that editing yaml files works. Have you tried and run into any issues?

1 Like

You can find all available configuration settings for data types here: https://www.netlifycms.org/docs/configuration-options/#extension-and-format

1 Like

@erquhart or @tomrutgers Could you provide an example of what that setup should look like within the Config? I’ve built my navigation with a JSON file and have tried to point to it with:

- name: "navigation"
  label: "Navigation"
  files:
    - file: "src/data/navigation.json"
      label: "Navigation"
      name: "navigation"
      extension: "json"
      format: "json"
      editor:
        preview: false
      fields:
        - { name: body, label: Body, widget: code }

The fields doesn’t seem right, but I get an error if I don’t supply one. Within the CMS, the current JSON content won’t load and I just get the body code editor in the CMS.

The extension and format properties belong to the collection, you can’t set it on a per file basis when using a file collection:

- name: "settings"
  label: "Settings"
  extension: "json"
  editor:
    preview: false

  files:
    - file: "src/data/navigation.json"
      label: "Navigation"
      name: "navigation"

      fields:
        - { name: body, label: Body, widget: code }

Hmm, I have it setup exactly how you sent it (minus the empty lines, do those matter?) and it’s still coming up empty. I’m positive the file has content, and all of my other collections / files are prepopulating.

The empty lines do not matter, that’s just a personal preference. Are your files pushed to Git? If you access the CMS locally, it will still look for your content on Github.

If you can share your repo, I’d more than happy to take a look!

Thanks a ton for your help!

This is the repo: https://github.com/sdzaveri/capital-website-netlify

Ah now I get it. You’re trying to edit the entire json’s body with a code widget. Unfortunately the body name only works as a body with markdown. I think you’ll have to recreate the navigation.json file by using widgets:

fields: 
  - name: overview
    label: Overview
    widget: list
    fields:
    - name: links
      label: Links
      widget: list
      fields: 
        - {name: title}
        - {name: url}
  ...

@erez Do you have any idea if editing the contents of a json file from a code widget is possible in some other way?

1 Like

Thanks for the mention @tomrutgers, you can use the code widget to edit an entire json file, it requires a bit of restructuring of the current data:

Brilliant, thanks for helping out @erez!

1 Like

Thanks a ton for your help!!

2 Likes

Hmm looking into this, I think it’s worth noting that it’s kind of a bummer that it has to be formatted this way to edit. This makes it very hard to manage in code, which means I have to decide if the file is managed within the CMS or within the code. I was hoping the CMS could just pull the file exactly as it is, just to expose it within the CMS and allow someone to make changes without needing Github.

1 Like

You can, but then you have to recreate its structure in config.yml instead of using the code widget.

hi can we have single json file rather than each entry to the collection creating new json files .

Hey @crimzonarc,
If I’m understanding correctly, I believe this is a feature request-- possibly the one being discussed here?

Feel free to chime in there to voice your support, or let us know here if you have followup questions!

@sdzaveri Agreed. I would like to automatically generate content based on data that is produced by a different application (my example is Dialogflow). Their json data contains a lot of information that I don’t need, lacks a templateKey, and is split into multiple files that are identified as parts of a whole based on prefixes/suffixes.

I may, unfortunately, need to seek a solution that is far more dynamic than Netlify.

Fortunately, you can use any CMS with Netlify’s web service :wink:

2 Likes

This works very well! Even without the ugly „restructuring“, @sdzaveri.

This:

collections:
  - name: "terminkalender" # Used in routes, e.g., /admin/collections/blog
    label: "Terminkalender" # Used in the UI
    media_folder: /content/yoga_meditation/termine/timetable/images
    public_folder: /
    create: false # Allow users to create new documents in this collection
    delete: false
    extension: json
    format: json
    editor:
      preview: true
    files:
      - label: "Termine"
        name: "termine"
        file: "/content/yoga_meditation/termine/timetable/timetables_day.json"
        fields:
          - name: items
            label: Kalendereintrag
            widget: list
            fields:
              - name: day
                label: Tag
                required: false
                widget: "select"
                options:
                  ["monday", "tuesday", "wednesday", "thursday", "friday"]
              - name: name
                label: Titel
                widget: string
              - name: image
                label: Bild
                required: false
                widget: image
              - name: start_time
                label: Start
                widget: string
              - name: end_time
                label: Ende
                widget: string
              - name: color
                hint: "von 1-3 wird die Farbe immer satter, 4 ist grau."
                label: Farbe
                widget: "select"
                options: ["1", "2", "3", "4"]
              - name: description
                label: Beschreibung
                widget: text

results in:

{
  "items": [
    {
      "day": "tuesday",
      "name": "sadsdqwdqwqdqw",
      "image": "/yoga.jpg",
      "start_time": "11:20",
      "end_time": "15:40",
      "color": "1",
      "description": "ssdqwqdwdqwqdq"
    }, …
 ]
}

What a pain in the… but finally it works! THANK YOU!