django-json-widget 2.1.1

Quickstart

Install django-json-widget:

pip install django-json-widget

Add it to your INSTALLED_APPS:

INSTALLED_APPS = (
    ...
    'django_json_widget',
    ...
)

Add the widget in your admin.py:

from django.contrib import admin
from django.db.models import JSONField
from django_json_widget.widgets import JSONEditorWidget
from .models import YourModel


@admin.register(YourModel)
class YourModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        JSONField: {'widget': JSONEditorWidget},
    }

You can also add the widget in your forms.py:

from django import forms
from django_json_widget.widgets import JSONEditorWidget
from .models import YourModel


class YourForm(forms.ModelForm):
    class Meta:
        model = YourModel

        fields = ('jsonfield',)

        widgets = {
            'jsonfield': JSONEditorWidget
        }

Configuration

You can customize the JSONEditorWidget with the following options:

• width: Width of the editor as a string with CSS size units (px, em, % etc). Defaults to 90%.

• height: Height of the editor as a string CSS size units. Defaults to 550px.

• options: A dict of options accepted by the JSON editor. Options that require functions (eg. onError) are not supported.

• mode (deprecated): The default editor mode. This argument is redundant because it can be specified as a part of options. Preserved for backwards compatibility with version 0.2.0.

• attrs: HTML attributes to be applied to the wrapper element. See the Django Widget documentation.

Accessing JsonEditor Instance

The JsonEditor instance is automatically exposed for external access through two methods:

1. Window object: Available as window['FIELD_ID_editor'] where FIELD_ID is the field’s HTML ID

2. DOM element: Available as container.jsonEditor property on the widget’s container element

Example usage for external JavaScript access:

// Access via window object
var editor = window['id_jsonfield_editor'];
editor.set({'key': 'new value'});

// Access via DOM element
var container = document.getElementById('id_jsonfield');
var editor = container.jsonEditor;
editor.set({'key': 'new value'});

This allows you to programmatically call JsonEditor methods like set(), get(), update(), etc. from custom JavaScript code running in your admin pages or forms.

JSONEditorWidget widget

Before:

After:

Development Guide

Read the contribution guide.

Credits

Tools used in rendering this package:

• Cookiecutter

• cookiecutter-djangopackage

2.1.1 (2025-12-12)

• Issue #108: respect Django admin color scheme setting for JSON editor.

2.1.0 (2025-10-24)

• Issue #114: expose editor instance to window object and DOM element.

2.0.4 (2025-10-11)

• Fix dark mode CSS support #107

2.0.3 (2025-07-29)

2.0.2 (2025-07-28)

• Fix Version 2.0.1 causes rendering HTML scripts issue #80

2.0.1 (2024-03-02) ——————=

• Fixed Version 2.0.0 causes issues with Django 4.x due to missing sourcemaps issue #83

2.0.0 (2024-03-24)

• Fix default paths for static files #53

• Stop declaring support for Django versions before 3.2 #65

• Avoid HTML injection via unsafe JSON injection #64

• Remove source map reference from JS bundle #70

• Add dark mode CSS support #82

• Updated documentation

1.1.1 (2021-02-17)

• Fix for issue #51, updates the bundled libs to 9.1.9 and additional notes for Django 3.1 changes

1.1.0 (2021-02-05)

• Added functionality to override version of JSONEditor to use

• update readme for django 3.1

1.0.1 (2020-04-17)

• Stop resolving paths to the static files

1.0.0 (2020-01-16)

• Update Makefile

• Make Stable the project

0.3.0 (2020-01-16)

• Update requirements.txt

• Fixed static to work with CDN tools like django-storages

• Make widget more configurable

• Fixed an incompatibility with Python 2.7

• update jsoneditor to latest version