# Integrate \`importmap\`

**URL:** <https://forum.djangoproject.com/t/integrate-importmap/35243>\
**Category:** Django Internals\
**Created:** [September 30, 2024, 1:24pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243 "2024-09-30T13:24:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [September 30, 2024, 1:24pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/1 "2024-09-30T13:24:06Z")

</div>

So `<script type="importmap">` are a thing, now, providing a standard way to instruct JS’ `import` operator how resolve symbols.

I think Django should integrate that HTML feature in the form of a new `settings.IMPORTMAP` dictionary setting and a new `{% importmap %}` tag.

This would provide a Django way to generate import maps, as well as providing IDE’s like PyCharm a central reference to provide autocolpletion in JS files.

I’m still unsure, however, how to integrate with `{% static %}`. Maybe this settings could be parsed so that it can be used like in templates:

```python
# settings.py
IMPORTMAP = {
    "imports": {
        "my-module": "{% static 'js/my-module.js' %}"
    } 
}

```

---

<div class="post-metadata">

**Author:** ![adamchainz](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/adamchainz/32/26_2.png) [@adamchainz](https://forum.djangoproject.com/u/adamchainz)\
**Post date:** [September 30, 2024, 10:10pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/2 "2024-09-30T22:10:42Z")

</div>

There’s already a third-party package playing with import maps: [Implementing the strategy pattern in Django with JavaScript import maps](https://www.valentinog.com/blog/django-import-maps/) . That’s worth checking out.

It’s not clear to me that having some kind of import map integration in Django settings provides much value. I can also imagine projects may need more than one import map, if they have separate areas using different packages.

---

<div class="post-metadata">

**Author:** ![carltongibson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/carltongibson/32/267_2.png) [@carltongibson](https://forum.djangoproject.com/u/carltongibson)\
**Post date:** [October 1, 2024, 7:02am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/3 "2024-10-01T07:02:08Z")

</div>

That’s a great post! (I was going to link it too 🙂)

In general, with these kind of things, we need to do lots of experimenting — to settle on a best approach — before we can really think about a proposal for core. (Django’s long-release cycle, and API stability policy mean it’s not somewhere we can experiment.) I think we’re a way off anything close to settled in this area. I hope that makes sense.

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [October 1, 2024, 7:05am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/4 "2024-10-01T07:05:29Z")

</div>

Of course, I’m just opening the discussion here. To me, the main pro is less the feature itself rather than providing a standard mecanism for IDE’s to provide a performant autocompletion in JS files, similar to what a Webpack integration proposes. I agree it’s not a game-changing feature but it’s a nice quality of life improvement IMHO et it shouldn’t be difficult to implement.

---

<div class="post-metadata">

**Author:** ![emma](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/emma/32/21174_2.png) [@emma](https://forum.djangoproject.com/u/emma)\
**Post date:** [October 1, 2024, 10:01am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/5 "2024-10-01T10:01:44Z")

</div>

I’m not sure about settings…

I’ve always thought of importmap as something that could replace/complement (at least for JS) the current [Media class](https://docs.djangoproject.com/en/5.1/topics/forms/media/) approach and could hopefully make it something more general (AFAIK Media is only used for forms and the admin)

This is why I’m skeptic about having this as a setting, I would see this more as a system with a templatetag and a registry where views, forms, components or whatever could register assets needed for a page.  
I could see a “seed” provided in settings (ie: htmx and bootstrap or whatever else) though

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [October 1, 2024, 5:28pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/6 "2024-10-01T17:28:11Z")

</div>

Fair enough. How about a new per-app `importmap.py` exposing an `importmap` variable, like `urlpatterns` and `url.py`? This can then be exposed globally through a context processor, lile `request` is. This way, it is fully accessible and modifiable in views and templates.

I think I could write a simple POC demonstrating how this could work.

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [October 2, 2024, 8:07am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/7 "2024-10-02T08:07:13Z")

</div>

Ok, so [here’s my proposition](https://github.com/django/django/pull/18642). It’s still very rough and not tested at all, probably buggy. It’s just to show a glance at the solution I have in mind. WDYT?

> <https://github.com/django/django/pull/18642>
>
> \#### Trac ticket number
> 
> 
> ticket-XXXXX
> 
> \#### Branch description
> Provide a …concise overview of the issue or rationale behind the proposed changes.
> 
> \#### Checklist
> \- \[\] This PR targets the \`main\` branch. 
> \- \[\] The commit message is written in past tense, mentions the ticket number, and ends with a period.
> \- \[\] I have checked the "Has patch" ticket flag in the Trac system.
> \- \[\] I have added or updated relevant tests.
> \- \[\] I have added or updated relevant docs, including release notes if applicable.
> \- \[\] I have attached screenshots in both light and dark modes for any UI changes.

---

<div class="post-metadata">

**Author:** ![carltongibson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/carltongibson/32/267_2.png) [@carltongibson](https://forum.djangoproject.com/u/carltongibson)\
**Post date:** [October 2, 2024, 8:17am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/8 "2024-10-02T08:17:56Z")

</div>

@christophehenry This is precisely the sort of thing that should be done first in a third-party app.

Experiment, play around. See what works. See if folks like it. Let it mature. (Then propose it for core.)

You likely think that’s annoying but with Django’s slow release cycle and stability guarantees it really is the best way. It’s a big part of Django’s longevity and success.

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [October 2, 2024, 9:01am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/9 "2024-10-02T09:01:32Z")

</div>

I’m totally cool with a 3rd party app first. I just don’t want the discussion to slowly die. Is there anyone else interested in this feature willing to provide feedback and make it evolve?

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [October 3, 2024, 8:26pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/10 "2024-10-03T20:26:02Z")

</div>

So I started [dj-importmap](https://pypi.org/project/dj-importmap/0.0.1/) to develop this feature. It’s still very stimple but it’s working. Don’t hesitate to provide feedback if you’re interested.

---

<div class="post-metadata">

**Author:** ![carltongibson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/carltongibson/32/267_2.png) [@carltongibson](https://forum.djangoproject.com/u/carltongibson)\
**Post date:** [October 4, 2024, 7:19am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/11 "2024-10-04T07:19:30Z")

</div>

Cool. Nice one. I posted it to Mastodon too.

---

<div class="post-metadata">

**Author:** ![thibaudcolas](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/thibaudcolas/32/3956_2.png) [@thibaudcolas](https://forum.djangoproject.com/u/thibaudcolas)\
**Post date:** [October 25, 2024, 6:02am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/12 "2024-10-25T06:02:03Z")

</div>

I’d love to have importmap support in Django! In `Media` specifically, as I foresee any JS code with dependencies would be better off using an import map. We’re discussing this here: [Rejuvenating vs deprecating Form.Media](https://forum.djangoproject.com/t/rejuvenating-vs-deprecating-form-media/21285).

There’s a DEP in progress, currently moving slow because importmap browser support hasn’t been good enough for me to be able to use it on projects until a few weeks ago.

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [October 25, 2024, 8:47am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/13 "2024-10-25T08:47:07Z")

</div>

Yes, thank you! I saw that discussion you linked and I replied to it a few days ago. I’m ok moving that discussion about importmaps otver there as it fits that broader discussion and I’d love to see contributors experiment with my modest importmap package and extend its features.

I may submit a talk for next FOSDEM’s Python room to get the discussion going.

---

<div class="post-metadata">

**Author:** ![thibaudcolas](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/thibaudcolas/32/3956_2.png) [@thibaudcolas](https://forum.djangoproject.com/u/thibaudcolas)\
**Post date:** [October 25, 2024, 8:53am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/14 "2024-10-25T08:53:27Z")

</div>

Sounds great! I’ll be there

---

<div class="post-metadata">

**Author:** ![codingjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/codingjoe/32/215_2.png) [@codingjoe](https://forum.djangoproject.com/u/codingjoe)\
**Post date:** [October 30, 2024, 1:18pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/15 "2024-10-30T13:18:36Z")

</div>

Hi there,

I am excited to see that a growing people cares about ESM support in Django.

I have been steadily pushing my projects to switch to ESM and Web Components. I also created the [Django-ESM](https://pypi.org/project/django-esm/) package, which brings importmaps to Django.

If I can be of any assistance in progressing this topic, I’d love to contribute.  
Until this goes mainstream into Django, I’d also love to get more contributors on board for Django-ESM, so if you are curious to join, please don’t hesitate to ask.

Cheers!  
Johannes

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [October 30, 2024, 1:47pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/16 "2024-10-30T13:47:15Z")

</div>

Hi! It seems our projects have different goals. Unless I’m wrong, your project seems automatically generate importmaps from `node_modules` wheras mine mainly aim to propose a Python standard to explicitely declase them to allow IDEs to parse thems and propose autocompletion in JS files. I’m not saying they are mutually exclusive but my goal is to propose a standard that is independant of NodeJS.

---

<div class="post-metadata">

**Author:** ![codingjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/codingjoe/32/215_2.png) [@codingjoe](https://forum.djangoproject.com/u/codingjoe)\
**Post date:** [November 4, 2024, 6:02pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/17 "2024-11-04T18:02:25Z")

</div>

Hi, thanks for responding. Interesting, yes, that seems different. Might I ask why’d introduce a standard in Python/Django? It seemed handy that Node.js comes with a dependency resolver, cryptographic integrity and support for tools like Dependabot. I’d be curious to understand the motivation to use a tool detached from Node. Cheers! Joe

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [November 5, 2024, 8:37am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/18 "2024-11-05T08:37:18Z")

</div>

Because there are a lot of projects that don’t use Node and don’t wish to. Producing a standard for them would allow to enable autocompletion for static files based on what’s declared in `importmap.py`.

---

<div class="post-metadata">

**Author:** ![codingjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/codingjoe/32/215_2.png) [@codingjoe](https://forum.djangoproject.com/u/codingjoe)\
**Post date:** [November 12, 2024, 9:27pm UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/19 "2024-11-12T21:27:45Z")

</div>

Interesting, and how do you write tests for your JavaScript code without node?

---

<div class="post-metadata">

**Author:** ![christophehenry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/christophehenry/32/14888_2.png) [@christophehenry](https://forum.djangoproject.com/u/christophehenry)\
**Post date:** [November 13, 2024, 8:45am UTC](https://forum.djangoproject.com/t/integrate-importmap/35243/20 "2024-11-13T08:45:02Z")

</div>

My current client uses Selenium.

[Next page](https://forum.djangoproject.com/t/integrate-importmap/35243.md?page=2)