From 7ec429ac6e4a4c572a5918b2ca578b1bbe948843 Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Thu, 28 May 2026 13:12:34 +0200
Subject: [PATCH 1/6] feat: add Try It button to CLI code examples

Adds a 'Try it' button to code examples that opens redis.io/cli
with pre-populated commands and autorun enabled.

- Extracts CLI commands from shortcode inner content (lines with '> ' or 'redis> ' prefix)
- Renders a red 'Try it' button in the codetabs header
- Button only visible when the Redis CLI tab is selected
- Clicking opens https://redis.io/cli?commands=[...]&autorun=true in a new tab
---
 layouts/partials/tabbed-clients-example.html | 17 ++++++
 layouts/partials/tabs/wrapper.html           | 56 +++++++++++++++++++-
 2 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/tabbed-clients-example.html b/layouts/partials/tabbed-clients-example.html
index 1c7a00d8b2..a49bccac80 100644
--- a/layouts/partials/tabbed-clients-example.html
+++ b/layouts/partials/tabbed-clients-example.html
@@ -39,6 +39,20 @@
     {{ warnf "[tabbed-clients-example] Example not found %q for %q" $id $.Page }}
 {{ end }}
 
+{{/* Extract executable CLI commands (lines starting with "> " or "redis> ") for Try It button */}}
+{{ $tryItCommands := slice }}
+{{ if (ne (trim $redisCommands "\n") "") }}
+    {{ range $line := split (trim $redisCommands "\n") "\n" }}
+        {{ $trimmedLine := trim $line " " }}
+        {{ if hasPrefix $trimmedLine "redis> " }}
+            {{ $tryItCommands = $tryItCommands | append (strings.TrimPrefix "redis> " $trimmedLine) }}
+        {{ else if hasPrefix $trimmedLine "> " }}
+            {{ $tryItCommands = $tryItCommands | append (strings.TrimPrefix "> " $trimmedLine) }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+
 {{ $tabs := slice }}
 {{/* Render redis-cli example from inner content if any */}}
 {{ if (ne (trim $redisCommands "\n") "") }}
@@ -131,4 +145,7 @@
 {{ if gt (len $buildsUpon) 0 }}
   {{ $params = merge $params (dict "buildsUpon" $buildsUpon) }}
 {{ end }}
+{{ if gt (len $tryItCommands) 0 }}
+  {{ $params = merge $params (dict "tryItCommands" $tryItCommands) }}
+{{ end }}
 {{ partial "tabs/wrapper.html" $params }}
diff --git a/layouts/partials/tabs/wrapper.html b/layouts/partials/tabs/wrapper.html
index fd9553d09d..0cb7ff5d52 100644
--- a/layouts/partials/tabs/wrapper.html
+++ b/layouts/partials/tabs/wrapper.html
@@ -9,6 +9,7 @@
 {{ $description := .description }}
 {{ $difficulty := .difficulty }}
 {{ $buildsUpon := .buildsUpon }}
+{{ $tryItCommands := .tryItCommands }}
 
 {{- /* Build metadata map for each language/client combination */ -}}
 {{- $codetabsMeta := dict -}}
@@ -73,7 +74,7 @@
 {{- if $exampleId -}}
 <a id="{{ $exampleId }}" class="relative"{{ if $description }} data-description="{{ $description | htmlEscape }}"{{ end }}{{ if $difficulty }} data-difficulty="{{ $difficulty | htmlEscape }}"{{ end }}{{ if $buildsUpon }} data-builds-upon="{{ delimit $buildsUpon "," }}"{{ end }} data-codetabs-id="{{ $id }}"></a>
 {{- end -}}
-<div class="codetabs cli group box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}" data-codetabs-meta="{{ $codetabsMetaJson | htmlEscape }}">
+<div class="codetabs cli group box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}" data-codetabs-meta="{{ $codetabsMetaJson | htmlEscape }}"{{ if $tryItCommands }} data-tryit-commands="{{ $tryItCommands | jsonify | htmlEscape }}"{{ end }}>
     <!-- Language selector dropdown with controls -->
     <div class="codetabs-header flex flex-col px-4 py-2 bg-slate-900 rounded-t-lg">
         <div class="flex items-start justify-between">
@@ -101,6 +102,21 @@
             </div>
 
             <div class="flex items-center gap-2">
+            {{/* "Try it" button - opens redis.io/cli with pre-populated commands */}}
+            {{ if $tryItCommands }}
+            <button tabindex="1"
+                    type="button"
+                    class="tryit-button flex items-center gap-1 text-slate-300 hover:text-white bg-red-700 hover:bg-red-600 h-7 px-3 rounded text-xs font-medium transition duration-150 ease-in-out"
+                    title="Run these commands in the Redis CLI"
+                    data-codetabs-id="{{ $id }}"
+                    onclick="openTryItCli(this)"
+                    aria-label="Try these Redis commands in an interactive CLI">
+                <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M8 5v14l11-7z"/>
+                </svg>
+                <span>Try it</span>
+            </button>
+            {{ end }}
             {{/* BinderHub "Run in browser" link - shown conditionally based on current tab's binderId */}}
             <div id="binder-link-container-{{ $id }}" class="flex items-center">
                 {{/* Link will be shown/hidden by JavaScript based on selected tab */}}
@@ -251,6 +267,20 @@
 <!-- spellchecker-enable -->
 
 <script>
+// Global function to open Try It CLI with pre-populated commands
+window.openTryItCli = window.openTryItCli || function(button) {
+    const codetabsId = button.getAttribute('data-codetabs-id');
+    const container = document.getElementById(codetabsId);
+    if (!container) return;
+
+    const commandsJson = container.getAttribute('data-tryit-commands');
+    if (!commandsJson) return;
+
+    const commands = JSON.parse(commandsJson);
+    const url = 'https://redis.io/cli?commands=' + encodeURIComponent(JSON.stringify(commands)) + '&autorun=true';
+    window.open(url, '_blank', 'noopener,noreferrer');
+};
+
 // Global function to toggle commands foldout
 window.toggleCommandsFoldout = window.toggleCommandsFoldout || function(button) {
     const details = button.nextElementSibling;
@@ -299,6 +329,28 @@
     }
 };
 
+// Global function to show/hide Try It buttons based on selected language
+// The button should only be visible when the Redis CLI tab is active
+window.updateAllTryItButtons = window.updateAllTryItButtons || function() {
+    const buttons = document.querySelectorAll('.tryit-button');
+    buttons.forEach((button) => {
+        const codetabsId = button.getAttribute('data-codetabs-id');
+        const langSelect = document.getElementById('lang-select-' + codetabsId);
+        if (!langSelect) return;
+
+        const selectedOption = langSelect.options[langSelect.selectedIndex];
+        const selectedLang = selectedOption ? selectedOption.value : '';
+
+        if (selectedLang === 'redis-cli') {
+            button.classList.remove('hidden');
+            button.classList.add('flex');
+        } else {
+            button.classList.add('hidden');
+            button.classList.remove('flex');
+        }
+    });
+};
+
 // Global function to update all binder links on the page
 // This is called whenever the language selection changes
 window.updateAllBinderLinks = window.updateAllBinderLinks || function() {
@@ -432,6 +484,7 @@
     setTimeout(() => {
         window.updateAllBinderLinks();
         window.updateAllCliOutputToggles();
+        window.updateAllTryItButtons();
     }, 100);
 
     // Update all binder links when language changes
@@ -441,6 +494,7 @@
             setTimeout(() => {
                 window.updateAllBinderLinks();
                 window.updateAllCliOutputToggles();
+                window.updateAllTryItButtons();
             }, 10);
         });
     }

From 629daa4f258ff50b63405980de8a6b245a5335c2 Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Thu, 28 May 2026 13:35:06 +0200
Subject: [PATCH 2/6] fix: remove double HTML-escaping on tryit-commands data
 attribute

The htmlEscape filter was applied on top of Hugo's automatic attribute
escaping, causing double-encoding (e.g. &amp;#34; instead of &#34;).
This broke JSON.parse in the browser when clicking the Try It button.
---
 layouts/partials/tabs/wrapper.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/tabs/wrapper.html b/layouts/partials/tabs/wrapper.html
index 0cb7ff5d52..f7c6645c69 100644
--- a/layouts/partials/tabs/wrapper.html
+++ b/layouts/partials/tabs/wrapper.html
@@ -74,7 +74,7 @@
 {{- if $exampleId -}}
 <a id="{{ $exampleId }}" class="relative"{{ if $description }} data-description="{{ $description | htmlEscape }}"{{ end }}{{ if $difficulty }} data-difficulty="{{ $difficulty | htmlEscape }}"{{ end }}{{ if $buildsUpon }} data-builds-upon="{{ delimit $buildsUpon "," }}"{{ end }} data-codetabs-id="{{ $id }}"></a>
 {{- end -}}
-<div class="codetabs cli group box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}" data-codetabs-meta="{{ $codetabsMetaJson | htmlEscape }}"{{ if $tryItCommands }} data-tryit-commands="{{ $tryItCommands | jsonify | htmlEscape }}"{{ end }}>
+<div class="codetabs cli group box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}" data-codetabs-meta="{{ $codetabsMetaJson | htmlEscape }}"{{ if $tryItCommands }} data-tryit-commands="{{ $tryItCommands | jsonify }}"{{ end }}>
     <!-- Language selector dropdown with controls -->
     <div class="codetabs-header flex flex-col px-4 py-2 bg-slate-900 rounded-t-lg">
         <div class="flex items-start justify-between">

From 9549911e1e0bdfd0ad7a45893f2964abe4a1494f Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Thu, 28 May 2026 14:24:29 +0200
Subject: [PATCH 3/6] fix: store Try It commands in JS object instead of HTML
 data attribute

HTML data attributes with JSON values suffer from double-escaping issues
in Hugo (jsonify returns template.HTML, htmlEscape returns string which
Hugo then re-escapes). Moving the commands to a JavaScript object
(window._tryItCommands) populated via safeJS avoids all escaping issues.
---
 layouts/partials/tabs/wrapper.html | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/layouts/partials/tabs/wrapper.html b/layouts/partials/tabs/wrapper.html
index f7c6645c69..15a6fb6223 100644
--- a/layouts/partials/tabs/wrapper.html
+++ b/layouts/partials/tabs/wrapper.html
@@ -74,7 +74,7 @@
 {{- if $exampleId -}}
 <a id="{{ $exampleId }}" class="relative"{{ if $description }} data-description="{{ $description | htmlEscape }}"{{ end }}{{ if $difficulty }} data-difficulty="{{ $difficulty | htmlEscape }}"{{ end }}{{ if $buildsUpon }} data-builds-upon="{{ delimit $buildsUpon "," }}"{{ end }} data-codetabs-id="{{ $id }}"></a>
 {{- end -}}
-<div class="codetabs cli group box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}" data-codetabs-meta="{{ $codetabsMetaJson | htmlEscape }}"{{ if $tryItCommands }} data-tryit-commands="{{ $tryItCommands | jsonify }}"{{ end }}>
+<div class="codetabs cli group box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}" data-codetabs-meta="{{ $codetabsMetaJson | htmlEscape }}">
     <!-- Language selector dropdown with controls -->
     <div class="codetabs-header flex flex-col px-4 py-2 bg-slate-900 rounded-t-lg">
         <div class="flex items-start justify-between">
@@ -267,16 +267,15 @@
 <!-- spellchecker-enable -->
 
 <script>
+// Registry for Try It CLI commands (populated per codetabs instance)
+window._tryItCommands = window._tryItCommands || {};
+
 // Global function to open Try It CLI with pre-populated commands
 window.openTryItCli = window.openTryItCli || function(button) {
     const codetabsId = button.getAttribute('data-codetabs-id');
-    const container = document.getElementById(codetabsId);
-    if (!container) return;
-
-    const commandsJson = container.getAttribute('data-tryit-commands');
-    if (!commandsJson) return;
+    const commands = window._tryItCommands[codetabsId];
+    if (!commands || !commands.length) return;
 
-    const commands = JSON.parse(commandsJson);
     const url = 'https://redis.io/cli?commands=' + encodeURIComponent(JSON.stringify(commands)) + '&autorun=true';
     window.open(url, '_blank', 'noopener,noreferrer');
 };
@@ -475,8 +474,11 @@
 };
 
 (function() {
-    // Initialize BinderHub link for this codetabs instance
+    // Register Try It commands for this codetabs instance
     const codetabsId = '{{ $id }}';
+    {{ if $tryItCommands }}
+    window._tryItCommands[codetabsId] = {{ $tryItCommands | jsonify | safeJS }};
+    {{ end }}
     const langSelect = document.getElementById('lang-select-' + codetabsId);
 
     // Initialize on page load - use a delay to allow codetabs.js to restore localStorage selection

From aac21ddb5e2b1208df417724c12691f421a99d96 Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Thu, 28 May 2026 14:28:07 +0200
Subject: [PATCH 4/6] fix: properly HTML-escape tryit-commands data attribute

Use printf with safeHTMLAttr to produce the complete attribute
key-value pair, preventing Hugo's contextual auto-escaping from
double-encoding the htmlEscape output. This matches the correct
Hugo pattern for embedding JSON in HTML attributes.
---
 layouts/partials/tabs/wrapper.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/tabs/wrapper.html b/layouts/partials/tabs/wrapper.html
index 15a6fb6223..6100ce83b0 100644
--- a/layouts/partials/tabs/wrapper.html
+++ b/layouts/partials/tabs/wrapper.html
@@ -74,7 +74,7 @@
 {{- if $exampleId -}}
 <a id="{{ $exampleId }}" class="relative"{{ if $description }} data-description="{{ $description | htmlEscape }}"{{ end }}{{ if $difficulty }} data-difficulty="{{ $difficulty | htmlEscape }}"{{ end }}{{ if $buildsUpon }} data-builds-upon="{{ delimit $buildsUpon "," }}"{{ end }} data-codetabs-id="{{ $id }}"></a>
 {{- end -}}
-<div class="codetabs cli group box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}" data-codetabs-meta="{{ $codetabsMetaJson | htmlEscape }}">
+<div class="codetabs cli group box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}" data-codetabs-meta="{{ $codetabsMetaJson | htmlEscape }}"{{ if $tryItCommands }} {{ printf "data-tryit-commands=\"%s\"" ($tryItCommands | jsonify | htmlEscape) | safeHTMLAttr }}{{ end }}>
     <!-- Language selector dropdown with controls -->
     <div class="codetabs-header flex flex-col px-4 py-2 bg-slate-900 rounded-t-lg">
         <div class="flex items-start justify-between">

From b1580b34ab28814237b7da7e91e02c2e000ae182 Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Thu, 28 May 2026 15:15:59 +0200
Subject: [PATCH 5/6] fix: base64-encode Try It commands to avoid Cloudflare
 WAF block

JSON-stringified commands produced repeated %5C%22 sequences in the URL after encodeURIComponent, which Cloudflare's managed SQLi/XSS-bypass rules flagged, returning a 'you have been blocked' page instead of the CLI.

Encode the JSON payload as URL-safe base64 (no padding) before placing it in the commands query parameter, and add a getCommandsFromUrl helper in cli.js that decodes the payload when autorun=true is set.
---
 layouts/partials/tabs/wrapper.html |  8 +++++++-
 static/js/cli.js                   | 23 +++++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/tabs/wrapper.html b/layouts/partials/tabs/wrapper.html
index 6100ce83b0..87e0782559 100644
--- a/layouts/partials/tabs/wrapper.html
+++ b/layouts/partials/tabs/wrapper.html
@@ -276,7 +276,13 @@
     const commands = window._tryItCommands[codetabsId];
     if (!commands || !commands.length) return;
 
-    const url = 'https://redis.io/cli?commands=' + encodeURIComponent(JSON.stringify(commands)) + '&autorun=true';
+    // URL-safe base64 of the JSON payload, no padding. Avoids the %5C%22
+    // patterns produced by raw JSON+encodeURIComponent, which trigger
+    // Cloudflare WAF SQLi/XSS-bypass rules.
+    const json = JSON.stringify(commands);
+    const b64 = btoa(unescape(encodeURIComponent(json)))
+        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    const url = 'https://redis.io/cli?commands=' + b64 + '&autorun=true';
     window.open(url, '_blank', 'noopener,noreferrer');
 };
 
diff --git a/static/js/cli.js b/static/js/cli.js
index 9725db791c..ec577aed8b 100644
--- a/static/js/cli.js
+++ b/static/js/cli.js
@@ -81,12 +81,35 @@ function shouldAnimate(cli) {
 }
 
 function getCommandsToExecute(cli) {
+  const fromUrl = getCommandsFromUrl();
+  if (fromUrl) return fromUrl;
+
   const textContent = cli.textContent.trim();
   if (!textContent) return;
 
   return textContent.split('\n').map(x => x.trim());
 }
 
+function getCommandsFromUrl() {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const raw = params.get('commands');
+    if (!raw) return;
+    if (params.get('autorun') !== 'true') return;
+
+    const b64 = raw.replace(/-/g, '+').replace(/_/g, '/');
+    const padded = b64 + '==='.slice((b64.length + 3) % 4);
+    const json = decodeURIComponent(escape(atob(padded)));
+    const commands = JSON.parse(json);
+    if (!Array.isArray(commands)) return;
+
+    const cleaned = commands.map(c => String(c).trim()).filter(Boolean);
+    return cleaned.length ? cleaned : undefined;
+  } catch (err) {
+    console.warn('cli: failed to parse commands from URL', err);
+  }
+}
+
 function createPre(cli) {
   const pre = document.createElement('pre');
   pre.setAttribute('tabindex', '0');

From d69cbd1170c8ca4fc97d654a1680747b7ea8656a Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Fri, 29 May 2026 12:00:14 +0200
Subject: [PATCH 6/6] Make redis-cli code examples interactive with Try It
 button

- Render the redis-cli tab in clients-example blocks as an interactive
  form.redis-cli terminal instead of a static highlighted code block
- Load cli.js on develop single pages so the terminals initialize
- Guard codetabs copy button against interactive cli panels (no <code>),
  copying commands from data-cli-source instead
- Add Try It button to the redis-cli shortcode header bar
---
 layouts/develop/single.html                  |  1 +
 layouts/partials/tabbed-clients-example.html | 17 +++++++++-
 layouts/shortcodes/redis-cli.html            | 34 ++++++++++++++++++--
 static/js/codetabs.js                        | 15 +++++++++
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/layouts/develop/single.html b/layouts/develop/single.html
index 77511c978f..52e6fa0fb5 100644
--- a/layouts/develop/single.html
+++ b/layouts/develop/single.html
@@ -1,5 +1,6 @@
 {{ define "head" }}
   <script src='{{ relURL "js/codetabs.js" }}' defer></script>
+  <script src='{{ relURL "js/cli.js" }}' defer></script>
 {{ end }}
 
 {{ define "main" }}
diff --git a/layouts/partials/tabbed-clients-example.html b/layouts/partials/tabbed-clients-example.html
index a49bccac80..7218ee5453 100644
--- a/layouts/partials/tabbed-clients-example.html
+++ b/layouts/partials/tabbed-clients-example.html
@@ -80,7 +80,22 @@
     {{ if and (gt $redisCommandsLineLimitInt 0) (gt $estimatedVisualLineCount $redisCommandsLineLimitInt) }}
         {{ $hasCliTrim = true }}
     {{ end }}
-    {{ $redisCliContent := highlight $trimmedRedisCommands "plaintext" "linenos=false" }}
+    {{/* Render the redis-cli tab as an interactive terminal (form.redis-cli is
+         picked up by cli.js and executed inline). Only redis-cli is interactive;
+         other language tabs stay as static highlighted code. */}}
+    {{ $cliCommandLines := $tryItCommands }}
+    {{ if eq (len $cliCommandLines) 0 }}
+        {{ range $line := $redisCommandLines }}
+            {{ $trimmedCliLine := trim $line " \t\r" }}
+            {{ if $trimmedCliLine }}{{ $cliCommandLines = $cliCommandLines | append $trimmedCliLine }}{{ end }}
+        {{ end }}
+    {{ end }}
+    {{ $cliJoined := delimit $cliCommandLines "\n" }}
+    {{ $cliFormInner := htmlEscape $cliJoined }}
+    {{ $cliSourceAttr := replace (htmlEscape $cliJoined) "\n" "&#10;" }}
+    {{ $redisCliContent := printf "<form class=\"redis-cli overflow-y-auto max-h-80\" data-cli-source=\"%s\">\n%s\n</form>" $cliSourceAttr $cliFormInner | safeHTML }}
+    {{/* Trimming applies to static code blocks; the interactive terminal manages its own height. */}}
+    {{ $hasCliTrim = false }}
     {{ $cliTab := dict "title" "redis-cli" "displayName" $cliTabName "content" $redisCliContent "limit" $redisCommandsLineLimit "limitInt" $redisCommandsLineLimitInt "lineCount" $redisCommandLineCount "visualLineCount" $estimatedVisualLineCount "hasCliTrim" $hasCliTrim "customFooterLinkText" $cliFooterLinkText "customFooterLinkUrl" $cliFooterLinkUrl }}
     {{ if gt (len $commands) 0 }}
         {{ $cliTab = merge $cliTab (dict "commands" $commands) }}
diff --git a/layouts/shortcodes/redis-cli.html b/layouts/shortcodes/redis-cli.html
index 9786349d44..7a53878954 100644
--- a/layouts/shortcodes/redis-cli.html
+++ b/layouts/shortcodes/redis-cli.html
@@ -1,8 +1,36 @@
-<div class="bg-slate-900 border-b border-slate-700 rounded-t-xl px-4 py-3 w-full flex">
+{{- $commands := slice -}}
+{{- range split (trim .Inner " \n\t\r") "\n" -}}
+  {{- $line := trim . " \t\r" -}}
+  {{- if $line -}}
+    {{- $commands = $commands | append $line -}}
+  {{- end -}}
+{{- end -}}
+{{- $id := printf "redis-cli-%s" (substr (.Inner | md5) 0 8) -}}
+
+<div class="bg-slate-900 border-b border-slate-700 rounded-t-xl px-4 py-3 w-full flex items-center">
   {{ partial "icons/cli-circle" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
   {{ partial "icons/cli-triangle" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
   {{ partial "icons/cli-star" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
-</div>  
+  {{- if $commands -}}
+  <button tabindex="1" type="button" class="tryit-button ml-auto flex items-center gap-1 text-slate-300 hover:text-white bg-red-700 hover:bg-red-600 h-7 px-3 rounded text-xs font-medium transition duration-150 ease-in-out" title="Run these commands in the Redis CLI" data-codetabs-id="{{ $id }}" onclick="openTryItCli(this)" aria-label="Try these Redis commands in an interactive CLI"><svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg><span>Try it</span></button>
+  {{- end -}}
+</div>
 <form class="redis-cli overflow-y-auto max-h-80">
   {{- .Inner -}}
-</form>
\ No newline at end of file
+</form>
+{{- if $commands -}}
+<script>
+  window._tryItCommands = window._tryItCommands || {};
+  window._tryItCommands['{{ $id }}'] = {{ $commands | jsonify | safeJS }};
+  window.openTryItCli = window.openTryItCli || function(button) {
+    const codetabsId = button.getAttribute('data-codetabs-id');
+    const commands = window._tryItCommands[codetabsId];
+    if (!commands || !commands.length) return;
+    const json = JSON.stringify(commands);
+    const b64 = btoa(unescape(encodeURIComponent(json)))
+      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    const url = 'https://redis.io/cli?commands=' + b64 + '&autorun=true';
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+</script>
+{{- end -}}
\ No newline at end of file
diff --git a/static/js/codetabs.js b/static/js/codetabs.js
index cd213e76d7..edbb9dedf4 100644
--- a/static/js/codetabs.js
+++ b/static/js/codetabs.js
@@ -21,6 +21,21 @@ function copyCodeToClipboardForCodetabs(button) {
   const visiblePanel = codetabsContainer.querySelector('.panel:not(.panel-hidden)');
   if (!visiblePanel) return;
 
+  // The redis-cli panel is an interactive terminal (form.redis-cli) with no
+  // <code> element, so copy the registered commands instead of reading the DOM.
+  const cliForm = visiblePanel.querySelector('form.redis-cli');
+  if (cliForm) {
+    const cliCode = cliForm.getAttribute('data-cli-source') || cliForm.textContent;
+    navigator.clipboard.writeText(cliCode.trim());
+
+    const cliTooltip = button.querySelector('.tooltiptext');
+    if (cliTooltip) {
+      cliTooltip.style.display = 'block';
+      setTimeout(() => cliTooltip.style.display = 'none', 1000);
+    }
+    return;
+  }
+
   let code;
   const isCliTrimmed = visiblePanel.getAttribute('data-cli-trimmable') === 'true';
   const cliPreviewLines = parseInt(visiblePanel.getAttribute('data-cli-preview-lines') || '0', 10);