Last updated December 13, 2021

Whether you're trying to add your own JavaScript to a page, or make use of one of the many popular libraries provided by Drupal core, it's important to understand the asset library system when working with JavaScript in Drupal. By wrapping your JavaScript in an asset library it can be added to every page, selectively included when it's needed, or be easily modified by others.

In addition to the inclusion of third party libraries, Drupal core also contains numerous Drupal-specific JavaScript libraries that make it easier to do things like implement AJAX calls to a Drupal route, localize UI strings, and pass configuration stored in the database to the front-end. Drupal also contains several external projects in core like jQuery, Backbone, Underscore, and Modernizer.

Example tasks

  • Add custom JavaScript to a site
  • Utilize the JavaScript libraries that are included in Drupal core
  • Customize how JavaScript is loaded on a site to minimize the overall page size

Confidence

The addition of the asset library system in Drupal 8, while new, is quite well established and continues in Drupal 9. There may be emerging best practices regarding how to split up and structure your custom libraries, but the overall concepts are unlikely to change. JavaScript library dependencies in Drupal core are the most likely to change or be removed (either partially or wholly). For example, here is a list of changes related to jquery in Drupal core.

Drupalize.Me resources

Topic
Tutorial
Tutorial
Tutorial
Tutorial

Integrating JavaScript with Drupal

Tutorial
Tutorial
Tutorial
Tutorial
Tutorial
Tutorial
Tutorial

These high-level tutorials walk through some of the JavaScript features and libraries that are available in Drupal core:

Tutorial
Tutorial
Tutorial

More Guides

We have guides on many Drupal skills and topics.

Explore guides

External resources