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?

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