django-jsonsson 0.1.2__py3-none-any.whl

django_jsonsson-0.1.2.dist-info/METADATA

@@ -0,0 +1,281 @@
+Metadata-Version: 2.5
+Name: django-jsonsson
+Version: 0.1.2
+Summary: Django form widgets that turn JSONField values into plain, editable inputs.
+Author: Pavlo K.
+License-Expression: MIT
+License-File: LICENSE
+Classifier: Framework :: Django
+Classifier: Framework :: Django :: 4.2
+Classifier: Framework :: Django :: 5.2
+Classifier: Framework :: Django :: 6.0
+Classifier: Programming Language :: Python :: 3
+Requires-Python: >=3.10
+Requires-Dist: django>=4.2
+Provides-Extra: dev
+Requires-Dist: black; extra == 'dev'
+Requires-Dist: pytest; extra == 'dev'
+Requires-Dist: pytest-django; extra == 'dev'
+Description-Content-Type: text/markdown
+
+# Jsonsson
+
+Django form widgets that show a `JSONField` value as plain, editable inputs instead of a raw JSON textarea.
+
+Nobody likes typing `["80", "443"]` by hand into a textarea. With Jsonsson the user gets one input per value, a button to add more and a cross to remove one. The form still submits normal JSON, so your model, form field and validation don't change.
+
+## How it works
+
+The real form field is still there, rendered as a hidden `<textarea>` with the JSON value inside. A small script reads that JSON, builds the inputs from it, and writes the JSON back into the textarea on every change. Django never sees the generated inputs, only the textarea.
+
+This means:
+
+- Works with Django's own `forms.JSONField` and `models.JSONField`, no custom field needed.
+- Validation and type conversion stay on the backend, in your form's `clean_<field>()`.
+- No build step and no frontend dependencies. Plain JS and CSS.
+
+## Widgets
+
+| Widget | JSON shape | Example value |
+|--------|------------|---------------|
+| `ListWidget` | Flat list of scalar values | `["80", "443"]` |
+
+More JSON shapes (objects, single values) are planned.
+
+## Requirements
+
+- Python 3.10+
+- Django 4.2+
+- `django.contrib.admin` is optional, but the bundled CSS uses its add icon and colors (see [Styling](#styling)).
+
+## Install
+
+```bash
+pip install django-jsonsson
+# or
+uv add django-jsonsson
+```
+
+Add the app to `INSTALLED_APPS`, so Django can find its templates and static files:
+
+```python
+INSTALLED_APPS = [
+    # ...
+    "jsonsson",
+]
+```
+
+The widget's JS and CSS are declared in its `Media`. The Django admin includes them automatically. In your own templates, render `{{ form.media }}` like for any other widget with assets.
+
+## ListWidget
+
+### Quick start
+
+A model with a list field:
+
+```python
+from django.db import models
+
+
+class Service(models.Model):
+    name = models.CharField(max_length=100)
+    tags = models.JSONField(default=list, blank=True)
+```
+
+Use the widget in a form:
+
+```python
+from django import forms
+from jsonsson import ListWidget
+
+
+class ServiceForm(forms.ModelForm):
+    class Meta:
+        model = Service
+        fields = "__all__"
+        widgets = {"tags": ListWidget()}
+```
+
+Use that form in the admin:
+
+```python
+from django.contrib import admin
+
+
+@admin.register(Service)
+class ServiceAdmin(admin.ModelAdmin):
+    form = ServiceForm
+```
+
+Or use the widget for every `JSONField` in a model admin:
+
+```python
+from django.db import models
+
+
+class ServiceAdmin(admin.ModelAdmin):
+    formfield_overrides = {models.JSONField: {"widget": ListWidget}}
+```
+
+Each value gets its own `<input type="text">` with a remove button, and there's an "Add item" button at the end.
+
+### Options
+
+Set them as constructor kwargs, or as class attributes on a subclass. Kwargs win over class attributes.
+
+| Option | Default | What it does |
+|--------|---------|--------------|
+| `mode` | `"text"` | Shortcut for `value_type`. Built in: `"text"` (string) and `"digits"` (number). |
+| `value_type` | from `mode` | `"string"` or `"number"`. A hint for your backend code only, read it as `widget.value_type`. It doesn't change rendering or what the browser submits. |
+| `input_attrs` | `{}` | Extra attributes set on every value input, e.g. `{"maxLength": 5, "placeholder": "Port"}`. |
+| `min_items` | `0` | How many inputs are always on screen. Remove buttons hide when this count is reached. |
+| `layout` | `"block"` | `"block"`: one item per row. `"inline"`: items wrap left to right, good for a table cell. |
+| `add_label` | `"Add item"` | Accessible name (`title` and `aria-label`) of the add button. |
+| `add_text` | `"Add item"` | Visible text of the add button. `""` shows only the icon. |
+| `remove_label` | `"Remove item"` | Accessible name of each remove button. |
+
+Standard widget `attrs` work too. A `class` or `style` you pass is added to the hidden textarea next to the widget's own.
+
+`input_attrs` keys are set as DOM properties, not HTML attributes. Use the JS names: `maxLength`, `readOnly`, `inputMode`, not `maxlength`, `readonly`, `inputmode`.
+
+### Reusable subclasses
+
+When the same setup is used in several places, put it in a subclass:
+
+```python
+class PortsWidget(ListWidget):
+    mode = "digits"
+    layout = "inline"
+    min_items = 1
+    input_attrs = {"maxLength": 5}
+    add_label = "Add port"
+    add_text = ""
+    remove_label = "Remove port"
+```
+
+### Values are always strings
+
+Whatever the mode, the browser submits a JSON array of strings. Each value is trimmed and empty inputs are dropped. So `[" 80", "", "443 "]` on screen becomes `["80", "443"]`.
+
+Converting and checking values is your form's job. `mode` and `value_type` only tell your code what to expect:
+
+```python
+class ServiceForm(forms.ModelForm):
+    class Meta:
+        model = Service
+        fields = "__all__"
+        widgets = {"ports": PortsWidget()}
+
+    def clean_ports(self):
+        cleaned = []
+        for item in self.cleaned_data.get("ports") or []:
+            try:
+                port = int(item)
+            except (TypeError, ValueError):
+                raise forms.ValidationError(f"'{item}' is not a valid port number.")
+            if not 1 <= port <= 65535:
+                raise forms.ValidationError(f"Port {port} must be between 1 and 65535.")
+            cleaned.append(port)
+        return cleaned
+```
+
+The inputs never limit what the user can type. If you want a limit in the browser, add it yourself through `input_attrs`.
+
+### Custom modes
+
+Add a mode with a `MODES` dict on a subclass:
+
+```python
+class MyListWidget(ListWidget):
+    MODES = {
+        **ListWidget.MODES,
+        "decimal": {"value_type": "decimal"},
+    }
+
+
+MyListWidget(mode="decimal").value_type  # "decimal"
+```
+
+An unknown mode falls back to `value_type="string"`.
+
+### Inline formsets
+
+Widgets in rows added with the admin's "Add another" button work too. The script listens for Django's `formset:added` event and skips the hidden `__prefix__` template row.
+
+If you add rows with your own JS, dispatch the same event from the new row, so the widget gets set up:
+
+```js
+row.dispatchEvent(new CustomEvent("formset:added", { bubbles: true }));
+```
+
+## Styling
+
+The bundled CSS (`jsonsson/css/list.css`) only does layout: spacing, the remove cross inside the input, hiding remove buttons at `min_items`. It looks native in the Django admin because it uses the admin's `admin/img/icon-addlink.svg` icon and `--border-color` variable. Outside the admin it still works. The add button just has no icon, and the hover color falls back to `#ccc`.
+
+Sizing is up to you. Add your own CSS through the widget's `Media`:
+
+```python
+class PortsWidget(ListWidget):
+    class Media:
+        css = {"all": ("myapp/css/ports.css",)}
+```
+
+```css
+.jsonsson-list .jsonsson-list-value {
+    width: 5ch;
+    box-sizing: content-box;
+}
+```
+
+Django merges a subclass's `Media` with its parent's, so the bundled JS and CSS are still included.
+
+### CSS classes
+
+| Class | Element |
+|-------|---------|
+| `jsonsson-list` | Outer container |
+| `jsonsson-list--block` | Outer container, when `layout="block"` |
+| `jsonsson-list-source` | The hidden textarea with the real value |
+| `jsonsson-list-items` | Wrapper around items and the add button |
+| `jsonsson-list-items--at-min` | Same wrapper, when the item count is at `min_items` |
+| `jsonsson-list-item` | One item (input plus remove button) |
+| `jsonsson-list-value` | The input of one item |
+| `jsonsson-list-remove` | Remove button of one item |
+| `jsonsson-list-add` | Add button |
+| `jsonsson-list-add--icon-only` | Add button, when `add_text=""` |
+
+### Custom markup
+
+The HTML comes from the `jsonsson/widgets/list.html` template. Override it in your project's templates to change it. Keep the CSS classes and `data-*` attributes, the script depends on them.
+
+With Django's default form renderer, templates are looked up in installed apps, so put the override in an app listed before `jsonsson` in `INSTALLED_APPS`. To use project-level `TEMPLATES` dirs, set `FORM_RENDERER = "django.forms.renderers.TemplatesSetting"`.
+
+The template gets the usual widget context, plus `widget.jsonsson`:
+
+| Key | Value |
+|-----|-------|
+| `block` | `True` when `layout="block"` |
+| `min_items` | `min_items` as an int |
+| `input_attrs` | `input_attrs` as a JSON string |
+| `add_label`, `add_text`, `remove_label` | The labels |
+
+## Limitations
+
+- The field value must be a JSON array. `null` or an object breaks the script. For a model field, use `default=list`, and avoid `null=True` or make sure the value is never `None`.
+- Only flat lists of scalar values. Nested lists and objects aren't supported yet.
+- Values come back as strings (see above).
+- Needs JavaScript. Without it the user sees nothing, since the textarea is hidden.
+
+## Development
+
+Uses [uv](https://docs.astral.sh/uv/).
+
+```bash
+make install-dev   # install all dependencies
+make test          # run tests
+make fmt           # format with black
+make lint          # check formatting (CI)
+make build         # build sdist and wheel into dist/
+```
+
+CI runs `black --check` and the tests on Python 3.10 / Django 4.2, Python 3.12 / Django 5.2 and Python 3.14 / Django 6.0.

django_jsonsson-0.1.2.dist-info/RECORD

@@ -0,0 +1,10 @@
+jsonsson/__init__.py,sha256=LN7mD4ONoa0_k-xAIU5KaDwBHLI0edMq1QNPnwjJwQ0,147
+jsonsson/apps.py,sha256=k9tLwpcJ9hX84sB5PlW45x2-as2S_8W9GQtSek32LeM,121
+jsonsson/widgets.py,sha256=Bgneu-gEb2YQykMHFu5Z-PAy0oDCekBUDLEqO3ua7Yo,5364
+jsonsson/static/jsonsson/css/list.css,sha256=B1qLuVkOeErX6uV3pKNAQJ3Q_nkFANgZ-P0pOiCFhBY,1586
+jsonsson/static/jsonsson/js/list.js,sha256=zxh3nS597BWVc9H1BNXwNpOwN4tlq8yu-3hpJiyPegI,3530
+jsonsson/templates/jsonsson/widgets/list.html,sha256=Pwr3B3IKyZ_nGCJGXglfVhfLLDFtkodmZ2a1EifgLsg,576
+django_jsonsson-0.1.2.dist-info/METADATA,sha256=0ALPrW_3vcNMI0qd8T76eVKDa9P0SqmONgcsNuye5rI,9786
+django_jsonsson-0.1.2.dist-info/WHEEL,sha256=W3fkpkm7-wf9vBI5Z-7s0eWkeM-spu78I8Neb98DeEg,87
+django_jsonsson-0.1.2.dist-info/licenses/LICENSE,sha256=RdOWX56y2PtVAYbo8MHn5yzZMWjEDb3DowUxFIjKOr4,1065
+django_jsonsson-0.1.2.dist-info/RECORD,,

django_jsonsson-0.1.2.dist-info/WHEEL

@@ -0,0 +1,4 @@
+Wheel-Version: 1.0
+Generator: hatchling 1.32.4
+Root-Is-Purelib: true
+Tag: py3-none-any

django_jsonsson-0.1.2.dist-info/licenses/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pavlo K.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

jsonsson/__init__.py

@@ -0,0 +1,6 @@
+from importlib.metadata import version
+
+from jsonsson.widgets import ListWidget
+
+__all__ = ["ListWidget"]
+__version__ = version("django-jsonsson")

jsonsson/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class JsonssonConfig(AppConfig):
+    name = "jsonsson"
+    verbose_name = "Jsonsson"

jsonsson/static/jsonsson/css/list.css

@@ -0,0 +1,70 @@
+.jsonsson-list .jsonsson-list-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.jsonsson-list--block .jsonsson-list-items {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.jsonsson-list .jsonsson-list-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
+.jsonsson-list .jsonsson-list-value {
+    padding-right: 20px;
+}
+
+.jsonsson-list .jsonsson-list-remove {
+    position: absolute;
+    top: 45%;
+    right: 4px;
+    transform: translateY(-45%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    line-height: 1;
+    opacity: 0.6;
+    text-decoration: none !important;
+}
+
+.jsonsson-list .jsonsson-list-remove:hover,
+.jsonsson-list .jsonsson-list-remove:focus {
+    opacity: 1;
+    text-decoration: none !important;
+}
+
+.jsonsson-list .jsonsson-list-items--at-min .jsonsson-list-remove {
+    display: none;
+}
+
+.jsonsson-list .jsonsson-list-add {
+    display: inline-flex;
+    align-items: center;
+    height: 27px;
+    padding: 0 10px 0 22px;
+    border-radius: 3px;
+    background: url(../../admin/img/icon-addlink.svg) no-repeat 6px center / 13px 13px;
+    text-decoration: none !important;
+    white-space: nowrap;
+}
+
+.jsonsson-list .jsonsson-list-add--icon-only {
+    justify-content: center;
+    width: 20px;
+    min-width: 20px;
+    padding: 0;
+    background-position: center;
+}
+
+.jsonsson-list .jsonsson-list-add:hover,
+.jsonsson-list .jsonsson-list-add:focus {
+    text-decoration: none !important;
+    background-color: var(--border-color, #ccc);
+}

jsonsson/static/jsonsson/js/list.js

@@ -0,0 +1,117 @@
+(function () {
+  function getMinItems(editor) {
+    var n = parseInt(editor.dataset.minItems, 10);
+    return isNaN(n) ? 1 : Math.max(0, n);
+  }
+
+  function getInputAttrs(editor) {
+    return JSON.parse(editor.dataset.inputAttrs || "{}");
+  }
+
+  function syncToSource(editor) {
+    // Always plain trimmed strings — type coercion (e.g. to numbers) and
+    // validation are the backend's job, not this widget's.
+    var source = editor.querySelector(".jsonsson-list-source");
+    var values = Array.prototype.map
+      .call(editor.querySelectorAll(".jsonsson-list-value"), function (input) {
+        return input.value.trim();
+      })
+      .filter(function (v) {
+        return v !== "";
+      });
+    source.value = JSON.stringify(values);
+  }
+
+  function updateRemoveVisibility(editor) {
+    var items = editor.querySelector(".jsonsson-list-items");
+    var count = items.querySelectorAll(".jsonsson-list-item").length;
+    items.classList.toggle(
+      "jsonsson-list-items--at-min",
+      count <= getMinItems(editor)
+    );
+  }
+
+  function makeItem(editor, value) {
+    var item = document.createElement("span");
+    item.className = "jsonsson-list-item";
+
+    var input = document.createElement("input");
+    input.type = "text";
+    input.className = "jsonsson-list-value";
+    var inputAttrs = getInputAttrs(editor);
+    Object.keys(inputAttrs).forEach(function (key) {
+      input[key] = inputAttrs[key];
+    });
+    input.value = value === undefined || value === null ? "" : value;
+
+    input.addEventListener("input", function () {
+      syncToSource(editor);
+    });
+
+    var removeLabel = editor.dataset.removeLabel || "Remove item";
+    var remove = document.createElement("a");
+    remove.href = "#";
+    remove.className = "jsonsson-list-remove";
+    remove.textContent = "×";
+    remove.title = removeLabel;
+    remove.setAttribute("aria-label", removeLabel);
+    remove.addEventListener("click", function (e) {
+      e.preventDefault();
+      if (
+        editor.querySelectorAll(".jsonsson-list-item").length <=
+        getMinItems(editor)
+      )
+        return;
+      item.remove();
+      updateRemoveVisibility(editor);
+      syncToSource(editor);
+    });
+
+    item.appendChild(input);
+    item.appendChild(remove);
+    return item;
+  }
+
+  function initEditor(editor) {
+    if (editor.dataset.jsonssonInit) return;
+    var src = editor.querySelector(".jsonsson-list-source");
+    if (!src || src.name.indexOf("__prefix__") !== -1) return;
+    editor.dataset.jsonssonInit = "1";
+
+    var items = editor.querySelector(".jsonsson-list-items");
+    var add = editor.querySelector(".jsonsson-list-add");
+    var minItems = getMinItems(editor);
+
+    var values = JSON.parse(src.value || "[]");
+    while (values.length < minItems) {
+      values.push("");
+    }
+    values.forEach(function (value) {
+      items.insertBefore(makeItem(editor, value), add);
+    });
+
+    add.addEventListener("click", function (e) {
+      e.preventDefault();
+      var item = makeItem(editor, "");
+      items.insertBefore(item, add);
+      item.querySelector(".jsonsson-list-value").focus();
+      updateRemoveVisibility(editor);
+      syncToSource(editor);
+    });
+
+    updateRemoveVisibility(editor);
+    syncToSource(editor);
+  }
+
+  function initAll(root) {
+    root.querySelectorAll(".jsonsson-list").forEach(initEditor);
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    initAll(document);
+  });
+
+  document.addEventListener("formset:added", function (event) {
+    initAll(event.target);
+  });
+})();

jsonsson/templates/jsonsson/widgets/list.html

@@ -0,0 +1 @@
+<div class="jsonsson-list{% if widget.jsonsson.block %} jsonsson-list--block{% endif %}" data-min-items="{{ widget.jsonsson.min_items }}" data-remove-label="{{ widget.jsonsson.remove_label }}" data-input-attrs="{{ widget.jsonsson.input_attrs }}">{% include "django/forms/widgets/textarea.html" %}<div class="jsonsson-list-items"><a href="#" class="jsonsson-list-add{% if not widget.jsonsson.add_text %} jsonsson-list-add--icon-only{% endif %}" title="{{ widget.jsonsson.add_label }}" aria-label="{{ widget.jsonsson.add_label }}">{{ widget.jsonsson.add_text }}</a></div></div>

jsonsson/widgets.py

@@ -0,0 +1,138 @@
+import json
+
+from django import forms
+
+
+class ListWidget(forms.Textarea):
+    """Compact editor for a JSONField holding a flat list of scalar values.
+
+    Renders the real field as a hidden <textarea> kept in sync (as a JSON
+    array) with small add/remove inputs - see jsonsson/js/list.js and
+    jsonsson/css/list.css. This widget only ships layout-neutral CSS needed
+    to look native in the Django admin. Sizing and other visual polish
+    belong in the caller's own stylesheet, loaded alongside a subclass or
+    form.
+
+    Every generated value input is always a plain, unrestricted
+    <input type="text">. Nothing here ever changes what a user can type,
+    on-screen appearance, or keyboard. Configure per-use behaviour by
+    subclassing or passing constructor kwargs:
+
+    - mode / value_type: purely a backend concern, with zero effect on
+      rendering. "string" (default) or "number" - describes what a
+      caller's own clean_<field>() should coerce/validate each submitted
+      entry into (e.g. int() plus a range check). Read it back via
+      `widget.value_type`. The widget doesn't use it itself, and the
+      submitted JSON array is always plain strings regardless of mode -
+      type coercion and validation are entirely the backend's job. `mode`
+      is just a named shortcut for `value_type`. Built in: "text"
+      (value_type="string") and "digits" (value_type="number"). Add more
+      via a `MODES` dict on a subclass, or skip mode entirely and pass
+      value_type directly.
+    - input_attrs: extra HTML attributes applied to every generated value
+      <input> (e.g. {"maxLength": 5}), entirely independent of mode. Keys
+      are set as DOM properties, so use their JS names (maxLength, not
+      maxlength).
+    - min_items: lowest number of inputs kept on screen, 0 or more
+      (default 0).
+    - layout: "block" (default, one item per row) or "inline" (items wrap
+      left-to-right, handy for a compact table cell).
+    - add_label / remove_label: the accessible name (title/aria-label) for
+      the add/remove controls. Always present for screen readers,
+      regardless of add_text below.
+    - add_text: the visible text shown next to the add button's icon,
+      defaulting to "Add item". Pass "" to show just the icon (e.g. for a
+      cramped inline cell). add_label still provides the accessible name
+      either way.
+    """
+
+    template_name = "jsonsson/widgets/list.html"
+
+    MODES = {
+        "text": {"value_type": "string"},
+        "digits": {"value_type": "number"},
+    }
+
+    mode = "text"
+    min_items = 0
+    layout = "block"
+    add_label = "Add item"
+    add_text = "Add item"
+    remove_label = "Remove item"
+
+    # Left unset (None) so __init__ can fall back to the active mode's
+    # preset. Set explicitly on a subclass, or pass as a kwarg, to
+    # override without picking a whole different mode.
+    value_type = None
+    input_attrs = None
+
+    class Media:
+        js = ("jsonsson/js/list.js",)
+        css = {"all": ("jsonsson/css/list.css",)}
+
+    def __init__(
+        self,
+        *args,
+        mode=None,
+        min_items=None,
+        layout=None,
+        value_type=None,
+        input_attrs=None,
+        add_label=None,
+        add_text=None,
+        remove_label=None,
+        **kwargs,
+    ):
+        super().__init__(*args, **kwargs)
+        if mode is not None:
+            self.mode = mode
+        if min_items is not None:
+            self.min_items = min_items
+        if layout is not None:
+            self.layout = layout
+        if add_label is not None:
+            self.add_label = add_label
+        if add_text is not None:
+            self.add_text = add_text
+        if remove_label is not None:
+            self.remove_label = remove_label
+
+        preset = self.MODES.get(self.mode, {})
+        self.value_type = (
+            value_type
+            if value_type is not None
+            else (
+                self.value_type
+                if self.value_type is not None
+                else preset.get("value_type", "string")
+            )
+        )
+        # Copied so instances never share one dict, even when it comes from
+        # a class attribute on a subclass.
+        self.input_attrs = dict(
+            input_attrs if input_attrs is not None else (self.input_attrs or {})
+        )
+
+    def __deepcopy__(self, memo):
+        # Django deep-copies widgets for each form, but Widget.__deepcopy__
+        # only copies `attrs`.
+        obj = super().__deepcopy__(memo)
+        obj.input_attrs = self.input_attrs.copy()
+        return obj
+
+    def get_context(self, name, value, attrs):
+        # Merge the widget's own attrs first, so a class/style given to the
+        # constructor is combined with ours instead of replaced by it.
+        attrs = {**self.attrs, **(attrs or {})}
+        attrs["class"] = (attrs.get("class", "") + " jsonsson-list-source").strip()
+        attrs["style"] = "display:none;" + attrs.get("style", "")
+        context = super().get_context(name, value, attrs)
+        context["widget"]["jsonsson"] = {
+            "block": self.layout == "block",
+            "min_items": int(self.min_items),
+            "input_attrs": json.dumps(self.input_attrs),
+            "add_label": self.add_label,
+            "add_text": self.add_text,
+            "remove_label": self.remove_label,
+        }
+        return context