{"id":14972792,"url":"https://github.com/codingjoe/django-esm","last_synced_at":"2026-01-07T17:23:58.637Z","repository":{"id":213538155,"uuid":"734344594","full_name":"codingjoe/django-esm","owner":"codingjoe","description":"Lightweight JavaScript ESM module loader for Django.","archived":false,"fork":false,"pushed_at":"2025-05-18T14:46:15.000Z","size":759,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-18T15:28:11.458Z","etag":null,"topics":["assets","django","esm","esmodules","import","importmaps","javascript","python","rollup","staticfiles","webpack"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codingjoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"codingjoe","buy_me_a_coffee":"codingjoe","custom":"https://www.paypal.me/codingjoe"}},"created_at":"2023-12-21T12:59:50.000Z","updated_at":"2025-05-18T14:46:03.000Z","dependencies_parsed_at":"2024-01-12T23:58:27.209Z","dependency_job_id":"a11697a8-a1e6-49d9-96ce-c5b34e89ebe2","html_url":"https://github.com/codingjoe/django-esm","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":0.4736842105263158,"last_synced_commit":"f5c5a5c02e368f10fb5fcb141428dbd8095f7bab"},"previous_names":["codingjoe/django-esm"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/codingjoe/django-esm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingjoe%2Fdjango-esm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingjoe%2Fdjango-esm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingjoe%2Fdjango-esm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingjoe%2Fdjango-esm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codingjoe","download_url":"https://codeload.github.com/codingjoe/django-esm/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingjoe%2Fdjango-esm/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259912721,"owners_count":22931111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["assets","django","esm","esmodules","import","importmaps","javascript","python","rollup","staticfiles","webpack"],"created_at":"2024-09-24T13:47:32.968Z","updated_at":"2026-01-07T17:23:58.631Z","avatar_url":"https://github.com/codingjoe.png","language":"Python","funding_links":["https://github.com/sponsors/codingjoe","https://buymeacoffee.com/codingjoe","https://www.paypal.me/codingjoe"],"categories":[],"sub_categories":[],"readme":"# Django ESM\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/codingjoe/django-esm/raw/main/images/logo-dark.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://github.com/codingjoe/django-esm/raw/main/images/logo-light.svg\"\u003e\n    \u003cimg alt=\"Django ESM: NextGen JavaScript ESM module support for Django\" src=\"https://github.com/codingjoe/django-esm/raw/main/images/logo-light.svg\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\nNextGen JavaScript ESM module support for Django.\n\n[![PyPi Version](https://img.shields.io/pypi/v/django-esm.svg)](https://pypi.python.org/pypi/django-esm/)\n[![Test Coverage](https://codecov.io/gh/codingjoe/django-esm/branch/main/graph/badge.svg)](https://codecov.io/gh/codingjoe/django-esm)\n[![GitHub License](https://img.shields.io/github/license/codingjoe/django-esm)](https://raw.githubusercontent.com/codingjoe/django-esm/master/LICENSE)\n\n## Highlights\n\n- 😌 easy transition\n- ⚡️ smart cache busting\n- 📦 no more bundling\n- ☕️ native ESM support\n- 📍 local vendoring with npm\n\n## Setup\n\nInstall the package and add it to your `INSTALLED_APPS` setting:\n\n```bash\npip install django-esm[whitenoise]\n```\n\nFirst, add `django_esm` to your `INSTALLED_APPS` settings:\n\n```python\n# settings.py\nINSTALLED_APPS = [\n    # …\n    \"django_esm\",  # add django_esm before staticfiles\n    \"django.contrib.staticfiles\",\n]\n```\n\nOptionally: If you are using whitenoise you will need to modify your WSGI application.\n\n```python\nimport os\nimport pathlib\n\nfrom django.core.wsgi import get_wsgi_application\n\nfrom django_esm.wsgi import ESM\n\nBASE_DIR = pathlib.Path(__file__).parent.parent\n\nos.environ.setdefault(\"DJANGO_SETTINGS_MODULE\", \"myproject.settings\")\n\napplication = ESM(get_wsgi_application())\n```\n\nFinally, add the import map to your base template:\n\n```html\n\u003c!-- base.html --\u003e\n\u003c!DOCTYPE html\u003e\n{% load esm %}\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cscript type=\"importmap\"\u003e{% importmap %}\u003c/script\u003e\n  \u003ctitle\u003eDjango ESM is awesome!\u003c/title\u003e\n\u003c/head\u003e\n\u003c/html\u003e\n```\n\nThat's it!\nRemember to run `npm install` and `python manage.py esm --watch`.\n\n## Usage\n\nYou can now import JavaScript modules in your Django templates:\n\n```html\n\u003c!-- index.html --\u003e\n{% block content %}\n  \u003cscript type=\"module\"\u003e\n    import \"lit\"\n  \u003c/script\u003e\n{% endblock %}\n```\n\n### Form.media\n\nTo use your importmap in Django forms, you can use the `Form.media` attribute:\n\n```python\n# forms.py\nfrom django import forms\nfrom django_esm.forms import ImportESModule\n\n\nclass MyForm(forms.Form):\n    name = forms.CharField()\n\n    class Media:\n        js = [ImportESModule(\"@sentry/browser\")]\n```\n\nNow `{{ form.media.js }}` will render to like this:\n\n```html\n\u003cscript type=\"module\"\u003eimport '@sentry/browser'\u003c/script\u003e\n```\n\n### Private modules\n\nYou can also import private modules from your Django app:\n\n```html\n\u003c!-- index.html --\u003e\n{% block content %}\n  \u003cscript type=\"module\"\u003e\n    import \"#myapp/js/my-module.js\"\n  \u003c/script\u003e\n{% endblock %}\n```\n\nTo import a private module, prefix the module name with `#`.\nYou need to define your private modules in your `package.json` file:\n\n```json\n{\n  \"imports\": {\n    \"#myapp/script\": \"./myapp/static/js/script.js\",\n    // You may use trailing stars to import all files in a directory.\n    \"#myapp/*\": \"./myapp/static/js/*\"\n  }\n}\n```\n\n## How it works\n\nDjango ESM works via native JavaScript module support in modern browsers.\nIt uses the [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)\nto map module names to their location on the server.\n\nHere is an example import map:\n\n```json\n{\n  \"imports\": {\n    \"htmx.org\": \"/static/htmx.org/dist/htmx.min.js\"\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingjoe%2Fdjango-esm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingjoe%2Fdjango-esm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingjoe%2Fdjango-esm/lists"}