Data Maps

Each Stimulus controller has a data map which lets you access special data attributes on the controller’s element.

<div data-controller="content-loader"
// controllers/content_loader_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    fetch("url")).then(/* … */)

The data map object is exposed to each controller through its property.


Use the following methods in a controller to access data attributes by key:

Method Result Returns the string value of the mapped data attribute Returns true if the mapped data attribute exists, value) Sets the string value of the mapped data attribute Deletes the mapped data attribute

Naming Conventions

Keys map to attribute names using the format data-[identifier]-[key].

Write keys with multiple words as camelCase in JavaScript and kebab-case in HTML. For example, the following method call:"fileType")

will return the value "svg", given the following HTML:

<div data-controller="reference" data-reference-file-type="svg">

Values Are Strings

Attribute values are always represented as strings, so if you pass the number 1 to DataMap#set():"count", 1)

then you’ll get the string "1" back from DataMap#get():"count") // "1"