Add JSON editor widget to Django Admin for JSON fields, inspired by @josdejong/jsoneditor

[Mkqm]

Code of Conduct

• I agree to follow Django's Code of Conduct

Feature Description

Add a JSON field editor to Django Admin similar to @josdejong/jsoneditor, allowing users to conveniently view and edit JSON data within the admin interface. inspired by @josdejong/jsoneditor

Now:

After:

Problem

Currently, editing JSON fields in Django Admin is cumbersome and not user-friendly. Users must manually enter JSON as text, which is error-prone and hard to read or edit. A visual editor would improve usability and reduce errors.

Request or proposal

request

Additional Details

An integration with a library like https://github.com/josdejong/jsoneditor would provide a powerful, interactive JSON editor UI in Django Admin. This would make it much easier to work with JSON fields directly from the admin.

Implementation Suggestions

Consider adding an optional widget for JSONField in Django Admin that embeds the jsoneditor component. This could be configurable, so users can enable it for specific models or fields. Look into frontend integration, possibly using a custom widget that loads the jsoneditor library.

[github-actions]

Thank you Mkqm for sharing your idea! We have a lot of them so please be patient. You can see the current queue here.

Community instructions

For commenters, please use the emoji reactions on the issue to express support, and/or concern easily. Please use the comments to ask questions or contribute knowledge about the idea. It is unhelpful to post comments of "I'd love this" or "What's the state of this?"

Reaction Guide

• 👍 This is something I would use
• 👎 This is something that would cause problems for me or Django
• 😕 I’m indifferent to this
• 🎉 This is an easy win

[tim-schilling]

Sounds like a good idea. Are there django packages out there that do this already?

[shangxiao]

I voted no because these sorts of things are highly contentious. Also as Tim pointed out there's a few plugins already out there so people can have their choice of what type of editor they prefer.

I think though, admin should at least pretty print json to make it easier to edit. Dealing with all that JSON in a single line is a headache.

[knyghty]

Personally I would like this in some form but historically we have an aversion to JS widgets because they are vendored in and annoying to update. Or we have to write the code ourselves which is also quite annoying.

Maybe if we had a better way of managing admin JS assets...

I also think there are so many ways to do this that I'm not sure if there's a one size fits all solution and maybe it's best left for third party apps. Not sure.

[DmytroLitvinov]

Hi @tim-schilling ,

Are there django packages out there that do this already?

Personally, I use django-json-widget https://pypi.org/project/django-json-widget/ at my projects.

[jacobtylerwalls]

I think though, admin should at least pretty print json to make it easier to edit. Dealing with all that JSON in a single line is a headache.

Yep, last time I had an admin workflow on a JSON field, I provided a custom encoder that supplied the indent arg; we should (likely*) just fix DjangoJSONEncoder.__init__() to use a default indent value. Should we cleave this off into a separate issue?

(*) caveat: first impression, haven't hunted yet for backwards-compat implications.

[LilyFirefly]

A separate issue sounds good to me!

[LilyFirefly]

On the primary focus of this issue, I think linking to some existing third-party ecosystem packages for this in Django's docs would be a good way forward.

[LilyFirefly]

Some other third-party implementations:

• https://github.com/feincms/django-json-schema-editor
• https://github.com/bhch/django-jsonform