{"id":2478,"library":"django-js-asset","title":"Django JS Asset","description":"django-js-asset (current version 3.1.2) provides a `JS` object to insert script tags with additional HTML attributes into Django's `forms.Media` definitions, addressing a limitation in older Django versions. It also extends `forms.Media` to support `CSS` and `JSON` objects, allowing for more flexible asset management. The library is actively maintained and releases align with Django's compatibility requirements, supporting Django 4.2 and newer versions.","status":"active","version":"3.1.2","language":"en","source_language":"en","source_url":"https://github.com/matthiask/django-js-asset/","tags":["django","forms","javascript","css","media","frontend","assets","html-attributes"],"install":[{"cmd":"pip install django-js-asset","lang":"bash","label":"Install stable version"}],"dependencies":[],"imports":[{"symbol":"JS","correct":"from js_asset import JS"},{"symbol":"CSS","correct":"from js_asset import CSS"},{"symbol":"JSON","correct":"from js_asset import JSON"}],"quickstart":{"code":"from django import forms\nfrom js_asset import JS, CSS, JSON\n\n# Example form demonstrating usage of JS, CSS, and JSON objects in Media\nclass MyWidget(forms.TextInput):\n    class Media:\n        js = [\n            # Embed JSON data directly into a script tag\n            JSON({\"setting\": \"value\", \"number\": 123}, id=\"my-widget-config\"),\n            # Include a JavaScript module with custom attributes\n            JS(\"my_app/js/script.js\", {\"type\": \"module\", \"data-priority\": \"high\"}),\n        ]\n        css = {\n            \"all\": [\n                # Include an external stylesheet\n                CSS(\"my_app/css/style.css\"),\n                # Include inline CSS directly\n                CSS(\"p { color: blue; }\", inline=True),\n            ]\n        }\n\nclass MyForm(forms.Form):\n    my_field = forms.CharField(widget=MyWidget)\n\n# In a Django template, you would render the media like this:\n# {{ form.media }}","lang":"python","description":"Define a custom widget or form and declare your JavaScript, CSS, or JSON assets within its inner `Media` class using `JS`, `CSS`, and `JSON` objects. This allows for passing additional HTML attributes to script/style tags or embedding JSON data directly. The `forms.Media` is then rendered in your template using `{{ form.media }}`."},"warnings":[{"fix":"Review Django 5.2 documentation for `forms.Media`'s native `Script` object. Decide whether to migrate to Django's native implementation or continue using `django-js-asset` for its extended features like CSS/JSON/Importmap handling and broader Django version support.","message":"Django 5.2+ introduces its own `Script` object for `forms.Media` with similar functionality. While `django-js-asset` offers a 'slightly different API' and extended features (like CSS/JSON objects and importmap support), users upgrading to Django 5.2 should be aware of the native option and choose the library that best fits their needs.","severity":"gotcha","affected_versions":"Django >=5.2"},{"fix":"Use the importmap feature with caution, particularly in production environments. Monitor browser compatibility and web standards for importmaps. Consider alternative asset bundling or management strategies for critical applications.","message":"The importmap support provided by `django-js-asset` is explicitly labeled as 'extremely experimental' and browser support for multiple importmaps is not generally available or standardized. Relying heavily on this feature in production is cautioned.","severity":"deprecated","affected_versions":"All versions"},{"fix":"To avoid duplication, either ensure that `{{ importmap }}` is only rendered if not already included via `form.media`, or implement different widget classes for admin vs. public site if the importmap setup differs.","message":"When using the experimental importmap feature, if you add `importmap` to `forms.Media(js=[...])` and also include `{{ importmap }}` directly in your base templates (e.g., for Django admin), the importmap definition might be duplicated in the rendered HTML.","severity":"gotcha","affected_versions":"All versions (with importmap feature)"},{"fix":"Always use `js_asset.static` when defining paths if you require compatibility across a wide range of Django versions or encounter issues with standard `django.contrib.staticfiles.static` resolving paths.","message":"The `static()` function's implementation can vary between Django versions, especially concerning `django.contrib.staticfiles`. `django-js-asset` provides its own `js_asset.static` helper to ensure correct static file URL resolution across supported Django versions.","severity":"gotcha","affected_versions":"All versions, especially older Django versions"}],"env_vars":null,"last_verified":"2026-04-10T00:00:00.000Z","next_check":"2026-07-09T00:00:00.000Z"}