{"id":33294,"date":"2025-06-10T17:36:07","date_gmt":"2025-06-10T15:36:07","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=33294"},"modified":"2025-06-10T17:36:09","modified_gmt":"2025-06-10T15:36:09","slug":"vanillacreamjs-superpowers-for-native-javascript","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/","title":{"rendered":"VanillaCreamJS: Superpowers for Native JavaScript"},"content":{"rendered":"\n<p><strong>VanillaCreamJS<\/strong> is a JavaScript library that literally gives &#8220;<strong>superpowers<\/strong>&#8221; to native JavaScript, enabling powerful and modern capabilities like <strong>reactivity without the need for build tools or compilation steps<\/strong>.<\/p>\n\n\n\n<p>It\u2019s a one-of-a-kind technology because it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Brings reactivity to plain JavaScript<\/li>\n\n\n\n<li>Works with outstanding performance thanks to the absence of diffing or recalculation algorithms<\/li>\n\n\n\n<li>Offers powerful tools with a minimal, intuitive API<\/li>\n\n\n\n<li>Helps improve your understanding of vanilla JavaScript<\/li>\n\n\n\n<li>Can integrate with any backend stack with zero friction<\/li>\n\n\n\n<li>Increases developer productivity in small to mid-size projects<\/li>\n\n\n\n<li>Combines the best of tools like HTMX, Vue, and Alpine<\/li>\n\n\n\n<li>Its name reflects its goal: refine vanilla JavaScript and elevate it, without ever straying too far from its roots.<\/li>\n<\/ul>\n\n\n\n<p>VanillaCreamJS is created and maintained by Riccardo Degni, a senior Italian web developer. \ud83d\udc49 <a href=\"https:\/\/www.riccardodegni.com\/projects\/vanillacreamjs\">https:\/\/www.riccardodegni.com\/projects\/vanillacreamjs<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>\ud83d\udce6<\/strong><strong> Installation<\/strong><\/p>\n\n\n\n<p>Simply include VanillaCreamJS via CDN:<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/vanillacream\/dist\/vanillacream.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or, install it via NPM:<\/p>\n\n\n\n<p>Bash<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install vanillacreamjs<\/code><\/span><\/pre>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>\ud83d\udca5<\/strong><strong> Superpowers for DOM Elements<\/strong><\/p>\n\n\n\n<p>At the core of VanillaCream lies the $ function. At first glance it might remind you of jQuery, but it&#8217;s an entirely different \u2014 and much more modern \u2014 universe of functionality.<\/p>\n\n\n\n<p>This function returns an element (or a set of elements) with superpowers, including reactive state binding:<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">const<\/span> &#91;el, s] = $(<span class=\"hljs-string\">'#el'<\/span>, { <span class=\"hljs-attr\">counter<\/span>: <span class=\"hljs-number\">10<\/span> })\n\n  el.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> s.counter\n  el.onClick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> s.counter++)\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here, the $ function returns a DOM element (in this case el) and a reactive state object s. Every element enhanced by $ exposes powerful properties:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>text: set text content<\/li>\n\n\n\n<li>html: set inner HTML<\/li>\n\n\n\n<li>class: dynamically toggle CSS classes<\/li>\n\n\n\n<li>on: add event listeners (like onClick, onInput, etc.)<\/li>\n\n\n\n<li>attr: set HTML attributes<\/li>\n\n\n\n<li>data: set data attributes<\/li>\n<\/ul>\n\n\n\n<p>When you assign a function to one of these properties, it becomes <strong>reactive<\/strong> \u2014 automatically updating the DOM when the state changes.<\/p>\n\n\n\n<p><strong>Example: toggling a CSS class<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span>box<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">const<\/span> &#91;el, s] = $(<span class=\"hljs-string\">'#el'<\/span>, { <span class=\"hljs-attr\">hl<\/span>: <span class=\"hljs-literal\">true<\/span> })\n\n  el.class.highlighted = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> s.hl\n  el.on.click(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> s.hl = !s.hl)\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n  <span class=\"hljs-selector-class\">.highlighted<\/span> { <span class=\"hljs-attribute\">background-color<\/span>: lightgreen; <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>; }\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Clicking the element toggles the value of s.hl, which in turn dynamically adds or removes the highlighted class \u2014 with no need for manual DOM manipulation.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>\u2699\ufe0f<\/strong><strong> Bulk Reactivity with <\/strong><strong>.set<\/strong><\/p>\n\n\n\n<p>You can also apply multiple reactive properties at once using .set:<\/p>\n\n\n\n<p>JavaScript<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">el<\/span><span class=\"hljs-selector-class\">.css<\/span><span class=\"hljs-selector-class\">.set<\/span>({\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-string\">'blue'<\/span>,\n  backgroundColor: () =&gt; state.bg,\n  width: () =&gt; state.x + <span class=\"hljs-string\">'px'<\/span>\n})\n\n<span class=\"hljs-selector-tag\">el<\/span><span class=\"hljs-selector-class\">.class<\/span><span class=\"hljs-selector-class\">.set<\/span>({\n  <span class=\"hljs-attribute\">active<\/span>: () =&gt; state.active,\n  box: () =&gt; state.counter &gt;= <span class=\"hljs-number\">10<\/span>,\n  otherClass: () =&gt; state.active &amp;&amp; state.counter &gt;= <span class=\"hljs-number\">10<\/span>\n})\n\n<span class=\"hljs-selector-tag\">el<\/span><span class=\"hljs-selector-class\">.attr<\/span><span class=\"hljs-selector-class\">.set<\/span>({\n  <span class=\"hljs-attribute\">title<\/span>: () =&gt; `Title: ${state.title}`\n})\n\n<span class=\"hljs-selector-tag\">el<\/span><span class=\"hljs-selector-class\">.data<\/span><span class=\"hljs-selector-class\">.set<\/span>({\n  <span class=\"hljs-attribute\">x<\/span>: () =&gt; state.x * <span class=\"hljs-number\">10<\/span>\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Refs: Powerful Destructuring<\/strong><\/p>\n\n\n\n<p>The $.refs function accepts a root element and returns auto-bound variables for every ref in the template, plus a shared reactive state object.<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>Update state<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">const<\/span> { el, btn, state } = $.refs(<span class=\"hljs-string\">'#app'<\/span>, { <span class=\"hljs-attr\">counter<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">bg<\/span>: <span class=\"hljs-string\">'lightblue'<\/span>, <span class=\"hljs-attr\">boxClass<\/span>: <span class=\"hljs-literal\">false<\/span> })\n\n  el.html = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">`Counter: <span class=\"hljs-subst\">${state.counter}<\/span>`<\/span>\n  el.css.backgroundColor = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> state.bg\n  el.class.box = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> state.boxClass\n\n  btn.onClick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    state.counter++\n    <span class=\"hljs-keyword\">if<\/span> (state.bg !== <span class=\"hljs-string\">'lightgreen'<\/span>) state.bg = <span class=\"hljs-string\">'lightgreen'<\/span>\n    state.boxClass = !state.boxClass\n  })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can even namespace your refs for more organized destructuring:<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn.AZ\"<\/span>&gt;<\/span>Sort A-Z<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn.ZA\"<\/span>&gt;<\/span>Sort Z-A<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn.Random\"<\/span>&gt;<\/span>Randomize<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"el\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">const<\/span> { el, btn, state } = $.refs(<span class=\"hljs-string\">'#app'<\/span>, { <span class=\"hljs-comment\">\/* ... *\/<\/span> })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>\ud83e\udde0 Deep Reactivity<\/strong><\/p>\n\n\n\n<p>VanillaCream\u2019s reactive engine supports both primitive and reference types like arrays, objects, and matrices. You can trigger reactivity simply by mutating array elements or object properties \u2014 even using methods like push, pop, or splice.<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  Insert fruit: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"fruit\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>Add Fruit<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">const<\/span> { box, fruit, btn, state } = $.refs(<span class=\"hljs-string\">'#app'<\/span>, { <span class=\"hljs-attr\">fruits<\/span>: &#91;<span class=\"hljs-string\">'apple'<\/span>, <span class=\"hljs-string\">'pear'<\/span>, <span class=\"hljs-string\">'kiwi'<\/span>] })\n\n  box.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">'Fruits: '<\/span> + state.fruits.join(<span class=\"hljs-string\">', '<\/span>)\n\n  btn.onClick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    state.fruits.push(fruit.attr.value)\n    fruit.attr.value = <span class=\"hljs-string\">''<\/span>\n  })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here, updating the array automatically updates the DOM. No need for complex hooks or rendering logic \u2014 just plain JavaScript.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Reactive HTML Templates<\/strong><\/p>\n\n\n\n<p>VanillaCream supports reactive expressions directly in your HTML using x- attributes:<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">x-text<\/span>=<span class=\"hljs-string\">\"`Counter: ${state.counter}`\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">x-on.click<\/span>=<span class=\"hljs-string\">\"() =&gt; state.counter++\"<\/span>&gt;<\/span>Increase counter<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">x-if<\/span>=<span class=\"hljs-string\">\"state.counter === 10\"<\/span>&gt;<\/span>Counter is 10!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">const<\/span> { state } = $.refs(<span class=\"hljs-string\">'#app'<\/span>, { <span class=\"hljs-attr\">counter<\/span>: <span class=\"hljs-number\">0<\/span> })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>AJAX Requests Made Easy<\/strong><\/p>\n\n\n\n<p>VanillaCream gives you total control over AJAX with a very simple syntax.<\/p>\n\n\n\n<p>JavaScript<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\">\/\/ Generic example (not explicitly detailed in the original text but implied by context)<\/span>\n<span class=\"hljs-comment\">\/\/ Assumed 'el' is a reactive DOM element.<\/span>\nel.post(<span class=\"hljs-string\">'https:\/\/jsonplaceholder.typicode.com\/posts\/'<\/span>, {\n  data: {\n    title: <span class=\"hljs-string\">'VanillaCream.js'<\/span>,\n    body: <span class=\"hljs-string\">'Best Vanilla JS framework'<\/span>,\n    userId: <span class=\"hljs-number\">1<\/span>\n  }\n})\n\n<span class=\"hljs-comment\">\/\/ The original text mentions 'el.html = result' immediately after the request,<\/span>\n<span class=\"hljs-comment\">\/\/ suggesting 'result' is the response from the request.<\/span>\n<span class=\"hljs-comment\">\/\/ A more complete example of how this might work is shown here.<\/span>\n<span class=\"hljs-comment\">\/\/ Note that there's an inconsistency in the original text where the 'data: { ... }' line<\/span>\n<span class=\"hljs-comment\">\/\/ appears to be floating rather than inside a method call.<\/span>\n<span class=\"hljs-comment\">\/\/ It's assumed it was intended to be part of a POST call.<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>\ud83e\udde9 Creating Reusable Components with VanillaCream<\/strong><\/p>\n\n\n\n<p>One of the most powerful features of VanillaCream.js is the ability to build reusable, reactive components in pure JavaScript \u2014 without the need for custom render functions, hooks, or any virtual DOM.<\/p>\n\n\n\n<p>Here\u2019s how you can define a minimal, yet fully reactive component:<\/p>\n\n\n\n<p>JavaScript<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> Counter = {\n  <span class=\"hljs-attr\">state<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> ({ <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">0<\/span> }),\n\n  <span class=\"hljs-attr\">template<\/span>: <span class=\"hljs-string\">`\n    &lt;p ref=\"p\"&gt;&lt;\/p&gt;\n    &lt;button ref=\"btn\"&gt;+&lt;\/button&gt;\n  `<\/span>,\n\n  setup({ refs, state }) {\n    <span class=\"hljs-keyword\">const<\/span> {p, btn} = refs\n    p.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">`Count: <span class=\"hljs-subst\">${state.count}<\/span>`<\/span>\n    btn.onClick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> state.count++)\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To render this component in one or more places, just use:<\/p>\n\n\n\n<p>JavaScript<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">$(<span class=\"hljs-string\">'#counter1, #counter2'<\/span>).component(Counter)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Components in VanillaCream are ultra-light, reactive by default, and can be created with just a simple object structure: state, template, and setup.<\/p>\n\n\n\n<p><strong>Bonus Tip: Components with Parameters<\/strong><\/p>\n\n\n\n<p>VanillaCream components can also receive custom input data. Just pass it as a second parameter:<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"counter1\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"counter2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">const<\/span> Counter = {\n    <span class=\"hljs-attr\">data<\/span>: {<span class=\"hljs-attr\">start<\/span>: <span class=\"hljs-number\">0<\/span>},\n    <span class=\"hljs-attr\">state<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> ({ <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">0<\/span> }),\n    <span class=\"hljs-attr\">template<\/span>: <span class=\"hljs-string\">`&lt;p ref=\"p\"&gt;&lt;\/p&gt;&lt;button ref=\"btn\"&gt;+&lt;\/button&gt;`<\/span>,\n    setup({ refs, state, data }) {\n      state.count = data.start\n      refs.p.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">`Count: <span class=\"hljs-subst\">${state.count}<\/span>`<\/span>\n      refs.btn.onClick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> state.count++)\n    }\n  }\n\n  <span class=\"hljs-keyword\">const<\/span> {counter1, counter2} = $.refs(<span class=\"hljs-string\">'#app'<\/span>)\n  counter1.component(Counter, { <span class=\"hljs-attr\">data<\/span>: {<span class=\"hljs-attr\">start<\/span>: <span class=\"hljs-number\">5<\/span>} })\n  counter2.component(Counter, { <span class=\"hljs-attr\">data<\/span>: {<span class=\"hljs-attr\">start<\/span>: <span class=\"hljs-number\">100<\/span>} })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Using Computed Properties<\/strong><\/p>\n\n\n\n<p>In VanillaCream, computed properties allow you to derive values based on other reactive state \u2014 similar to what you\u2019d find in Vue or SolidJS \u2014 but in a cleaner, lighter syntax.<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">HTML\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"input\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">const<\/span> { box, input, state } = $.refs(<span class=\"hljs-string\">'#app'<\/span>, {\n  <span class=\"hljs-attr\">firstName<\/span>: <span class=\"hljs-string\">'John'<\/span>,\n  <span class=\"hljs-attr\">lastName<\/span>: <span class=\"hljs-string\">'Doe'<\/span>\n})\n\n<span class=\"hljs-keyword\">const<\/span> fullName = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">`<span class=\"hljs-subst\">${state.firstName}<\/span> <span class=\"hljs-subst\">${state.lastName}<\/span>`<\/span>\n\nbox.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">`Hello, <span class=\"hljs-subst\">${fullName()}<\/span>!`<\/span>\n\ninput.onInput(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  <span class=\"hljs-keyword\">const<\/span> &#91;fn, ln] = input.attr.value.split(<span class=\"hljs-string\">' '<\/span>)\n  state.firstName = fn\n  state.lastName = ln ?? <span class=\"hljs-string\">''<\/span>\n})\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Works with Any Backend<\/strong><\/p>\n\n\n\n<p>Although VanillaCream supports components, you can also delegate component rendering to your backend. It integrates seamlessly with any backend stack.<\/p>\n\n\n\n<p>For example, in Laravel you could have a Blade view providing data from the DB:<\/p>\n\n\n\n<p>PHP<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  Insert fruit: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"fruit\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>Add Fruit<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">const<\/span> { box, fruit, btn, state } = $.refs(<span class=\"hljs-string\">'#app'<\/span>, {\n    <span class=\"hljs-attr\">fruits<\/span>: @json($fruits)\n  })\n\n  box.text = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">'Fruits: '<\/span> + state.fruits.join(<span class=\"hljs-string\">', '<\/span>)\n\n  btn.onClick(<span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> v = fruit.attr.value\n\n    <span class=\"hljs-keyword\">await<\/span> $.<span class=\"hljs-keyword\">get<\/span>('\/my-backend\/add-fruit', {\n      <span class=\"hljs-attr\">data<\/span>: { <span class=\"hljs-attr\">fruit<\/span>: v }\n    })\n\n    state.fruits.push(v)\n    fruit.attr.value = <span class=\"hljs-string\">''<\/span>\n  })\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>\ud83d\ude80<\/strong><strong> Ready to Try VanillaCream?<\/strong><\/p>\n\n\n\n<p>Whether you\u2019re building a quick prototype, enhancing an existing app, or simply want to rediscover the joy of writing clean reactive JavaScript \u2014 VanillaCream.js offers a lightweight, elegant solution with zero build steps.<\/p>\n\n\n\n<p>\ud83d\udc49 <a href=\"https:\/\/www.riccardodegni.com\/projects\/vanillacreamjs\/docs\/quick-introduction\">Documentation<\/a><\/p>\n\n\n\n<p>\ud83e\uddea <a href=\"https:\/\/www.riccardodegni.com\/projects\/vanillacreamjs\/demo\/demo-intro\">Live Demos<\/a><\/p>\n\n\n\n<p>\ud83d\udee0\ufe0f <a href=\"https:\/\/codepen.io\/riccardodegni\/pen\/OPPRVPe\">Playground<\/a><\/p>\n\n\n\n<p>Try it out, and experience the power of reactivity \u2014 the vanilla way.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>You can now copy and paste this text directly into your Word document! Let me know if there&#8217;s anything else I can help you with.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>VanillaCreamJS is a JavaScript library that literally gives &#8220;superpowers&#8221; to native JavaScript, enabling powerful and modern capabilities like reactivity without the need for build tools or compilation steps. It\u2019s a one-of-a-kind technology because it: VanillaCreamJS is created and maintained by Riccardo Degni, a senior Italian web developer. \ud83d\udc49 https:\/\/www.riccardodegni.com\/projects\/vanillacreamjs \ud83d\udce6 Installation Simply include VanillaCreamJS via&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/\">Read more<\/a><\/p>\n","protected":false},"author":94,"featured_media":33075,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[36],"tags":[9907,9961],"collections":[11387],"class_list":{"0":"post-33294","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-backend","8":"tag-frameworks","9":"tag-javascript","10":"collections-top-of-the-week","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>VanillaCreamJS: Superpowers for Native JavaScript<\/title>\n<meta name=\"description\" content=\"VanillaCreamJS is a JavaScript library that adds &quot;superpowers&quot; to vanilla JavaScript, enabling modern operations like reactivity without the need for build tools.RiprovaClaude pu\u00f2 commettere errori. Verifica sempre le risposte con attenzione.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"VanillaCreamJS: Superpowers for Native JavaScript\" \/>\n<meta property=\"og:description\" content=\"VanillaCreamJS is a JavaScript library that adds &quot;superpowers&quot; to vanilla JavaScript, enabling modern operations like reactivity without the need for build tools.RiprovaClaude pu\u00f2 commettere errori. Verifica sempre le risposte con attenzione.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-10T15:36:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-10T15:36:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Riccardo Degni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Riccardo Degni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/\"},\"author\":{\"name\":\"Riccardo Degni\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb\"},\"headline\":\"VanillaCreamJS: Superpowers for Native JavaScript\",\"datePublished\":\"2025-06-10T15:36:07+00:00\",\"dateModified\":\"2025-06-10T15:36:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/\"},\"wordCount\":708,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\",\"keywords\":[\"Frameworks\",\"JavaScript\"],\"articleSection\":[\"Backend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/\",\"name\":\"VanillaCreamJS: Superpowers for Native JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\",\"datePublished\":\"2025-06-10T15:36:07+00:00\",\"dateModified\":\"2025-06-10T15:36:09+00:00\",\"description\":\"VanillaCreamJS is a JavaScript library that adds \\\"superpowers\\\" to vanilla JavaScript, enabling modern operations like reactivity without the need for build tools.RiprovaClaude pu\u00f2 commettere errori. Verifica sempre le risposte con attenzione.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp\",\"width\":1792,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Backend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/backend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"VanillaCreamJS: Superpowers for Native JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb\",\"name\":\"Riccardo Degni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"caption\":\"Riccardo Degni\"},\"description\":\"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.\",\"sameAs\":[\"http:\/\/www.riccardodegni.com\/\",\"https:\/\/www.linkedin.com\/in\/riccardodegni\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"VanillaCreamJS: Superpowers for Native JavaScript","description":"VanillaCreamJS is a JavaScript library that adds \"superpowers\" to vanilla JavaScript, enabling modern operations like reactivity without the need for build tools.RiprovaClaude pu\u00f2 commettere errori. Verifica sempre le risposte con attenzione.","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:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/","og_locale":"en_US","og_type":"article","og_title":"VanillaCreamJS: Superpowers for Native JavaScript","og_description":"VanillaCreamJS is a JavaScript library that adds \"superpowers\" to vanilla JavaScript, enabling modern operations like reactivity without the need for build tools.RiprovaClaude pu\u00f2 commettere errori. Verifica sempre le risposte con attenzione.","og_url":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-06-10T15:36:07+00:00","article_modified_time":"2025-06-10T15:36:09+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","type":"image\/webp"}],"author":"Riccardo Degni","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Riccardo Degni","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/"},"author":{"name":"Riccardo Degni","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb"},"headline":"VanillaCreamJS: Superpowers for Native JavaScript","datePublished":"2025-06-10T15:36:07+00:00","dateModified":"2025-06-10T15:36:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/"},"wordCount":708,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","keywords":["Frameworks","JavaScript"],"articleSection":["Backend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/","url":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/","name":"VanillaCreamJS: Superpowers for Native JavaScript","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","datePublished":"2025-06-10T15:36:07+00:00","dateModified":"2025-06-10T15:36:09+00:00","description":"VanillaCreamJS is a JavaScript library that adds \"superpowers\" to vanilla JavaScript, enabling modern operations like reactivity without the need for build tools.RiprovaClaude pu\u00f2 commettere errori. Verifica sempre le risposte con attenzione.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp","width":1792,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/vanillacreamjs-superpowers-for-native-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Backend","item":"https:\/\/www.codemotion.com\/magazine\/backend\/"},{"@type":"ListItem","position":3,"name":"VanillaCreamJS: Superpowers for Native JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb","name":"Riccardo Degni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","caption":"Riccardo Degni"},"description":"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.","sameAs":["http:\/\/www.riccardodegni.com\/","https:\/\/www.linkedin.com\/in\/riccardodegni\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-600x600.webp","author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-22-11.53.51-A-horizontal-digital-illustration-of-a-modern-programmer-working-at-a-desk-in-a-tech-office.-The-programmer-is-focused-sitting-in-front-of-multiple-c-600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_comment_info":0,"uagb_excerpt":"VanillaCreamJS is a JavaScript library that literally gives &#8220;superpowers&#8221; to native JavaScript, enabling powerful and modern capabilities like reactivity without the need for build tools or compilation steps. It\u2019s a one-of-a-kind technology because it: VanillaCreamJS is created and maintained by Riccardo Degni, a senior Italian web developer. \ud83d\udc49 https:\/\/www.riccardodegni.com\/projects\/vanillacreamjs \ud83d\udce6 Installation Simply include VanillaCreamJS via&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=33294"}],"version-history":[{"count":1,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33294\/revisions"}],"predecessor-version":[{"id":33295,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/33294\/revisions\/33295"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/33075"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=33294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=33294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=33294"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=33294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}