I am new to Magento2 and our organisation has just get the EE licence. I have installed it on my local machine and the default template spits out the following mixed in with HMTL:

<script type="text/x-magento-init">
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer"

And calls like

<script type="text/x-magento-init">
"*": {
    "Magento_Ui/js/core/app": {
        "components": {
                "messages": {
                    "component": "Magento_Theme/js/view/messages"

Is this to do with KnockoutJS or RequireJS? What are these calls and what is this new script tag <script type="text/x-magento-init">


2 Answers 2


General usage of "script type"

When using <script type="...."> the browser interprets only what it knows (like text/javascript for example).
Anything else is ignored.
Basically using a custom type you are adding information to the page without displaying it and without the browser interpreting it and you can later use that information as you want.

How Magento uses this

Magento uses these sections after the page loads.
The code that uses them is located in lib/web/mage/apply/scripts.js.
I don't understand completely what the file mentioned above does, but there is a comment inside the file that states this:

 * Parses 'script' tags with a custom type attribute and moves it's data
 * to a 'data-mage-init' attribute of an element found by provided selector.
 * Note: All found script nodes will be removed from DOM.
 * @returns {Array} An array of components not assigned to the specific element.
 * @example Sample declaration.
 *      <script type="text/x-magento-init">
 *          {
 *              "body": {
 *                  "path/to/component": {"foo": "bar"}
 *              }
 *          }
 *      </script>
 * @example Providing data without selector.
 *      {
 *          "*": {
 *              "path/to/component": {"bar": "baz"}
 *          }
 *      }

Conclusion / Speculation

I speculate that this is a way to set different js behaviour to different elements in the page without the need to rewrite the template that contains the elements.
You only need to add a <script type="text/x-magento-init"> in one of your templates, include your template in the page and magento "auto-magically" moves the behavior to the right element.

  • I tried removing this script in app/design/frontend/package/template/Magento_Catalog/templates/product/view/gallery.phtml but no luck. Any advice on removing default behaviors such as product magnifier and/or product gallery (fotorama to be precise)? Commented Mar 23, 2016 at 10:24
  • i got a warning Missing JS component initialization. Use \"x-magento-init\" or \"x-magento-template\". when i am use <script>tag in phtml file how to solve it. Commented Sep 7, 2017 at 7:20
  • 1
    guys, is there any real time example for how can i use this passing parameter in data-mage-init? and how it will return result ? Commented Nov 15, 2018 at 16:43
  • I can't find any useful examples. Why should we use this?
    – Black
    Commented Feb 18, 2020 at 11:53
  • what do you consider an useful example? There are 2 examples in the question. You can also look in the source of any frontend page. But if you want a real life example, here goes: Let's say you want to make the upsells list a carousel. You can do that just by adding a template file to the page that contains only the text/x-magento-init script that makes the element containing the upsells a carousel. You don't need to modify the upsells template to do that.
    – Marius
    Commented Feb 18, 2020 at 12:46

In Addition,


var scriptSelector = 'script[type="text/x-magento-init"]',
        dataAttr = 'data-mage-init',
        virtuals = [];

By using below guides


Standard Syntax Is

<script type="text/x-magento-init">
    // components initialized on the element defined by selector
    "<element_selector>": {
        "<js_component1>": ...,
        "<js_component2>": ...
    // components initialized without binding to an element
    "*": {
        "<js_component3>": ...

By referring



Magento itself often uses the x-magento-init method to invoke a RequireJS module as a program. However, the real power of x-magento-init is the ability to create a Magento Javascript Component.

Magento Javascript Components are RequireJS modules that return a function.

Magento encounters a text/x-magento-init script tag with an * attribute, it will

1] Initialize the specified RequireJS module (Magento_Ui/js/core/app)

2] Call the function returned by that module, passing in the data object

Hope it helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.