{"id":327410,"date":"2022-04-02T14:51:46","date_gmt":"2022-04-02T14:51:46","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=327410"},"modified":"2026-03-27T10:32:28","modified_gmt":"2026-03-27T10:32:28","slug":"alpinejs-in-hyva-themes","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/","title":{"rendered":"Working with AlpineJs in Hyv\u00e4 Themes"},"content":{"rendered":"\n<p>We\u2019ll explore AlpineJS in Hyv\u00e4 Themes: Enhancing Magento Frontend with Lightweight JavaScript, focusing on how it enables fast, reactive UI without bulky frameworks.<\/p>\n\n\n\n<p>An alpinejs is a lightweight javascript framework that contains same kind of data binding that we love in other js frameworks. <\/p>\n\n\n\n<p><a href=\"https:\/\/store.webkul.com\/Magento-2\/hyva-theme-extensions.html\">Hyv\u00e4 Themes<\/a> uses only alpine js as its single js dependency as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"635\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1200x635.png\" alt=\"alpinejsloadpic-1\" class=\"wp-image-327413\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1200x635.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-300x159.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-250x132.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-768x406.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1536x812.png 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1.png 1838w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>Benefits of Alpine Js<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>lightweight js framework<\/li>\n\n\n\n<li>easy to learn and understand<\/li>\n\n\n\n<li>low file size having 8.77KB<\/li>\n\n\n\n<li>alpinejs Syntax is very much inspired by Vue<\/li>\n<\/ul>\n\n\n\n<p><strong>Following common attributes of alpine used by Hyv\u00e4 Themes with explanation and exampl<\/strong>e:-<\/p>\n\n\n\n<p><strong>x-data <\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">It declares the new Alpine Component  and its data for the HTML block<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div x-data=&quot;{open : false}&quot;&gt;&lt;\/div&gt;<\/pre>\n\n\n\n<p>declares a new component scope. It tells the framework to initialize a new component with the following data object<\/p>\n\n\n\n<p><strong>x-bind<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Dynamically set HTML attributes on an element<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div x-bind:class=&quot;! open ? &#039;hidden&#039; : &#039;&#039;&quot;&gt;\n  ...\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>we can bind the value of a class or any other HTML attribute dynamically and also we conditionally set the value as shown in the example that if the value open is false then it will bind &#8216;hidden&#8217; value to class or else it will not <\/p>\n\n\n\n<p><strong>x-on<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">It listens for browser events on an element like click, keydown, keyup and many more<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;button x-on:click=&quot;open = ! open&quot;&gt;\n  Toggle\n&lt;\/button&gt;<\/pre>\n\n\n\n<p>we can run any JS expression or call the function by adding x-on attribute<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-text<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Set the text content of an element<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div&gt;\n  Copyright \u00a9\n  &lt;span x-text=&quot;new Date().getFullYear()&quot;&gt;&lt;\/span&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>Here we can set the dynamic text with JS expression to the any HTML element<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-html<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Set the inner HTML of an element<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div x-html=&quot;(await axios.get(&#039;\/some\/html\/partial&#039;)).data&quot;&gt;\n  ...\n&lt;\/div&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-model<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Synchronize a piece of data with an input element<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div x-data=&quot;{ search: &#039;&#039; }&quot;&gt;\n  &lt;input type=&quot;text&quot; x-model=&quot;search&quot;&gt;\n \n  Searching for: &lt;span x-text=&quot;search&quot;&gt;&lt;\/span&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>Here search will play the role of variable when we type any thing in the Input text then that value will be stored in search and that stored value will be shown in span tag using x-text attribute.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-show<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Toggle the visibility of an element<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div x-show=&quot;open&quot;&gt;\n  ...\n&lt;\/div&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-for<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Repeat a block of HTML based on a data set<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;template x-for=&quot;post in posts&quot;&gt;\n  &lt;h2 x-text=&quot;post.title&quot;&gt;&lt;\/h2&gt;\n&lt;\/template&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-if<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Conditionally add\/remove a block of HTML from the page entirely.<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;template x-if=&quot;open&quot;&gt;\n  &lt;div&gt;...&lt;\/div&gt;\n&lt;\/template&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-init<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Run code when an element is initialized by alpine<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div x-init=&quot;date = new Date()&quot;&gt;&lt;\/div&gt;<\/pre>\n\n\n\n<p>It works like a constructor in PHP<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-ref<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Reference elements directly by their specified keys using the&nbsp;<code>$refs<\/code>&nbsp;magic property<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;input type=&quot;text&quot; x-ref=&quot;content&quot;&gt;\n \n&lt;button x-on:click=&quot;console.log($refs.content.value)&quot;&gt;\n  Copy\n&lt;\/button&gt;<\/pre>\n\n\n\n<p>As we type in the input field and on click of  a button it will console log the refer elements value using $refs  by using name declare in x-ref attribute<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-cloak<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Hide a block of HTML until after alpine is finished initializing its contents<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div x-cloak&gt;\n  ...\n&lt;\/div&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>x-ignore<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Prevent a block of HTML from being initialized by alpine<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div x-ignore&gt;\n  ...\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>Hyv\u00e4 1.1.x is currently using Alpine.js version 2. Hopefully, an update to version 3 will be available for a future update. <\/p>\n\n\n\n<p>If you check the documentation of alpine js it will come up with version 3. So please refer to the documentation for version 2 <a href=\"https:\/\/github.com\/alpinejs\/alpine\/tree\/v2.8.2#readme\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/alpinejs\/alpine\/tree\/v2.8.2#readme<\/a><\/p>\n\n\n\n<p><strong>Debugging tools as per browser<\/strong><\/p>\n\n\n\n<p>Alpine Debugger for Chrome &#8211;&nbsp;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/alpinejs-devtools\/fopaemeedckajflibkpifppcankfmbhk\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/chrome.google.com\/webstore\/detail\/alpinejs-devtools\/fopaemeedckajflibkpifppcankfmbhk<\/a>&nbsp;<\/p>\n\n\n\n<p>Alpine Debugger for Firefox &#8211;&nbsp;<a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/alpinejs-devtools\/?src=recommended\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/alpinejs-devtools\/?src=recommended<\/a><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Note: &#8211; As per Hyv\u00e4 &#8216;s good practice, Scripts related to the particular .phtml file should be written in that .phtml file only to avoid render-blocking and if a large amount of JavaScript is needed, it of course can be moved to an external file.<\/p>\n<\/blockquote>\n\n\n\n<p>In this blog, we learned the basics of the Alpine js, and this concept we will use at the time of module compatibility with Hyv\u00e4 Themes.<\/p>\n\n\n\n<p>As a trusted Webkul <a href=\"https:\/\/www.hyva.io\/find-an-agency\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Hyv\u00e4 Partner Agency<\/a>, Webkul delivers optimized Hyv\u00e4-based solutions, helping businesses build faster, scalable, and high-performance Magento stores.<\/p>\n\n\n\n<p>Previous  blog <a href=\"https:\/\/webkul.com\/blog\/installation-of-hyva-themes-in-magento-2-4-x\/\" target=\"_blank\" rel=\"noreferrer noopener\">Installation of Hyv\u00e4 Themes in Magento 2.4.x<\/a><\/p>\n\n\n\n<p>Next blog <a href=\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">Working with TailwindCSS in Hyv\u00e4&nbsp; Theme<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ll explore AlpineJS in Hyv\u00e4 Themes: Enhancing Magento Frontend with Lightweight JavaScript, focusing on how it enables fast, reactive UI without bulky frameworks. An alpinejs is a lightweight javascript framework that contains same kind of data binding that we love in other js frameworks. Hyv\u00e4 Themes uses only alpine js as its single js dependency <a href=\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":422,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[],"class_list":["post-327410","post","type-post","status-publish","format-standard","hentry","category-magento-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Working with AlpineJs in Hyv\u00e4 Themes - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Why Hyv\u00e4 theme uses Alpine JS instead of using magento 2 js libraries and what is the benefits of alpineJs\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working with AlpineJs in Hyv\u00e4 Themes - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Why Hyv\u00e4 theme uses Alpine JS instead of using magento 2 js libraries and what is the benefits of alpineJs\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-02T14:51:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-27T10:32:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1200x635.png\" \/>\n<meta name=\"author\" content=\"Shreyas Vispute\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shreyas Vispute\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\"},\"author\":{\"name\":\"Shreyas Vispute\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\"},\"headline\":\"Working with AlpineJs in Hyv\u00e4 Themes\",\"datePublished\":\"2022-04-02T14:51:46+00:00\",\"dateModified\":\"2026-03-27T10:32:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\"},\"wordCount\":616,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1200x635.png\",\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\",\"url\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\",\"name\":\"Working with AlpineJs in Hyv\u00e4 Themes - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1200x635.png\",\"datePublished\":\"2022-04-02T14:51:46+00:00\",\"dateModified\":\"2026-03-27T10:32:28+00:00\",\"description\":\"Why Hyv\u00e4 theme uses Alpine JS instead of using magento 2 js libraries and what is the benefits of alpineJs\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1.png\",\"width\":1838,\"height\":972,\"caption\":\"alpinejsloadpic-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working with AlpineJs in Hyv\u00e4 Themes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\",\"name\":\"Shreyas Vispute\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Shreyas Vispute\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/shreyas-vilas522\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Working with AlpineJs in Hyv\u00e4 Themes - Webkul Blog","description":"Why Hyv\u00e4 theme uses Alpine JS instead of using magento 2 js libraries and what is the benefits of alpineJs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/","og_locale":"en_US","og_type":"article","og_title":"Working with AlpineJs in Hyv\u00e4 Themes - Webkul Blog","og_description":"Why Hyv\u00e4 theme uses Alpine JS instead of using magento 2 js libraries and what is the benefits of alpineJs","og_url":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-04-02T14:51:46+00:00","article_modified_time":"2026-03-27T10:32:28+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1200x635.png","type":"","width":"","height":""}],"author":"Shreyas Vispute","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Shreyas Vispute","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/"},"author":{"name":"Shreyas Vispute","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033"},"headline":"Working with AlpineJs in Hyv\u00e4 Themes","datePublished":"2022-04-02T14:51:46+00:00","dateModified":"2026-03-27T10:32:28+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/"},"wordCount":616,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1200x635.png","articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/","url":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/","name":"Working with AlpineJs in Hyv\u00e4 Themes - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1-1200x635.png","datePublished":"2022-04-02T14:51:46+00:00","dateModified":"2026-03-27T10:32:28+00:00","description":"Why Hyv\u00e4 theme uses Alpine JS instead of using magento 2 js libraries and what is the benefits of alpineJs","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/alpinejsloadpic-1.png","width":1838,"height":972,"caption":"alpinejsloadpic-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Working with AlpineJs in Hyv\u00e4 Themes"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033","name":"Shreyas Vispute","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Shreyas Vispute"},"url":"https:\/\/webkul.com\/blog\/author\/shreyas-vilas522\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/327410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/422"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=327410"}],"version-history":[{"count":10,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/327410\/revisions"}],"predecessor-version":[{"id":533022,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/327410\/revisions\/533022"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=327410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=327410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=327410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}