How to create custom knockout js component in Magento 2

03 Jul, 2021

Knockout js is javascript library. Magento use knockout js most of pages. Magento 2.x checkout all section developed using knockout js.

Today we create a simple knockout js module in Magento 2. We display a simple message using the custom knockout js component.

Let's start by creating a simple knockout module.

Step1. Create module directory

Go to Magento app/code directory and create a directory with your vendor name. My vendor name is "RS".

After creating the vendor directory, need to create a directory for the module. My module name is "Knockout".

My custom module directory path is like "MAGENTO_ROOT/app/code/RS/Knockout"

Step2. Create module registration file

            //file path: MAGENTO_ROOT/app/code/RS/Knockout/registration.php


Step3. Create module config file

    <?xml version="1.0"?>
    <!-- file path: MAGENTO_ROOT/app/code/RS/Knockout/etx/module.xml -->

    <config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
        <module name="RS_Knockout" setup_version="1.0.0" />

Step4. Create layout file for render our custom section

    <?xml version="1.0"?>
    <!-- file path: MAGENTO_ROOT/app/code/RS/Knockout/view/frontend/layout/default.xml -->

    <page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	        <referenceContainer name="content">
	            <block class="Magento\Framework\View\Element\Template" name="knockoutex" template="RS_Knockout::hello.phtml" after="-" />

Step5. Create template file

        //file path: MAGENTO_ROOT/app/code/RS/Knockout/view/frontend/templates/hello.phtml
        <h2><?= __("Knockout Section"); ?></h2>
		<div class="knockout-section" data-bind="scope: 'rs_koex'">
			<!-- ko template: getTemplate() --><!-- /ko -->

		<script type="text/x-magento-init">
		            "*": {
		                "Magento_Ui/js/core/app": {
		                    "components": {
		                        "rs_koex": {
		                            "component": "RS_Knockout/js/hello"

Step6. Create knockout component file

    //file path: MAGENTO_ROOT/app/code/RS/Knockout/view/frontend/web/js/hello.js

    define(['uiComponent'], function(Component) {

	    return Component.extend({
	        defaults: {
	            template: 'RS_Knockout/hello',

	        initialize: function () {
		        this.message = "This message comming from knockout js component";

Step7. Create knockout template file

        <!-- file path: MAGENTO_ROOT/app/code/RS/Knockout/view/frontend/web/template/hello.html --> 

        <p class="message" data-bind="text: message"></p>

Step8. Install your module to magento

        php bin/magento module:enable RS_Knockout
        php bin/magento setup:di:compile
        php bin/magento setup:upgrade
        php bin/magento setup:static-content:deploy

Our knockout message is display all magento pages.