Directus JSON Form Interface

[gray torrent]

Hey there! 👋

I originally built this Directus interface to help manage i18n translations in a more user-friendly way. While working on it, I realized it could be super useful for editing any kind of nested JSON data, so I made it more generic and decided to share it with the community! It gives you a nice structured view of your JSON data that's much easier to work with than raw JSON.

Features

• 🌳 Hierarchical view of nested JSON data
• 🔍 Search functionality to filter fields by key or value
• ➕ Add new nested fields dynamically
• 🗑️ Remove existing fields
• 🔄 Convert simple fields to nested objects
• 📝 Edit values inline
• 🔒 Read-only mode support
• 🎨 Directus theme-aware styling

Usage:

• Create a field with type json in your collection
• Select "Nested JSON Field Editor" as the interface
• Configure the interface options according to your needs
• Start editing your JSON data in a structured way

:octocat: I've made the extension publicly available on GitHub https://github.com/Xchos/directus-extension-interface-json-form. I'm also looking into the process of submitting it to the Directus marketplace to make it easily accessible to the whole community! (maybe any idea how to do that?)

Feel free to check it out, and any feedback or contributions are welcome! 🚀

[livid bough]

That looks awesome! I've been wanting something like this for a long time. A few questions:

Are you using native directus components?
Any plans to add other input types?
This looks like a great form builder, any plans to expand it that way?

[gray torrent]

Hey @livid bough , thanks for appreciating the extension 🙂 ..

1. I am using as much native components as possible, hopefully i have not missed any of those. I tried to make it directus compatible and reuse most of it. There are some styling but still coming from the default settings. I have tested it through appearance settings and in light / dark mode.

2. At this moment, im happy with this solution, but im open to get any feature request in the repository. In case there will be any feature you would like to add, feel free to contribute or raise a ticket inside the github repository.

3. The expansion of this extension is not planned yet as i believe it fits the cases i imagine its uselfull for. Unless i recieve any idea from the community or by myself, i will keep the extension as much stable as possible. I dont want people to get it on this version and than change it while they consider using it for their project.

add 3) One of the improvements i have in my mind is ability to localize keys in case its a static json format to add the posibility to make it more readable. So you can name the labels in the form wizzard

[livid bough]

What I want to start building is a way for users to select a form (json) from a related collection and the interface to render that form in the native directus components. So your extension is pretty much halfway there for me!
This will allow users to build custom inspection forms / checklists and deploy them to other users easily.
But for that I would definitely need go implement at a minimum drop downs, check boxes, radio buttons and maybe sliders.
I'm definitely having a look at your code, thanks for much for sharing!

[gray torrent]

this interface is more likely a wizard for simple json data that has nested strings in it and allows user who don’t know json to interact with it. Real usecase is i18n for example, or visualization of an import data.

for your case, i believe it would need much more work and specific user stories to develop it. anyway you should be able to fork it and continue from this extension to achieve your functionality

[feral spoke]

This looks awesome! It would be great if the field could get validated against a JSON schema