feat: add Try It button to CLI code examples by paoloredis · Pull Request #3380 · redis/docs

paoloredis · 2026-05-28T11:14:58Z

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

Note

Low Risk
Documentation and front-end UX only; no server or auth changes, with moderate surface area in Hugo partials and client JS.

Overview
Adds a Try it control on tabbed and standalone CLI examples that opens redis.io/cli with URL-safe base64-encoded command lists and autorun=true, shown only when the redis-cli language tab is active. Try it seeding uses an explicit prereq / needs_prereq model per example set (not buildsUpon).

Command docs drop duplicate redis-cli shortcode blocks in favor of clients-example inner content with > / redis> lines; GET/SET move CLI output into those blocks. The redis-cli codetab becomes an inline interactive terminal (form.redis-cli + deferred cli.js on develop pages), with copy handling for that form. cli.js uses one queued shared session across widgets; JSONPath tutorial steps wire prereq="true" on setup and needs_prereq="true" on dependent steps.

^{Reviewed by Cursor Bugbot for commit 0f3112e. Bugbot is set up for automated code reviews on this repo. Configure here.}

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

github-actions · 2026-05-28T11:15:16Z

DOC-6675

jit-ci · 2026-05-28T11:17:24Z

🛡️ Jit Security Scan Results

✅ No security findings were detected in this PR

^{Security scan by Jit}

The htmlEscape filter was applied on top of Hugo's automatic attribute escaping, causing double-encoding (e.g. &#34; instead of "). This broke JSON.parse in the browser when clicking the Try It button.

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.

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.

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.

paoloredis · 2026-05-28T13:29:38Z

This change adds a Try it button for redis-cli commands, which when clicked launches redis.io/cli with the commands specific to the code block. What do you think?

https://redis.io/docs/staging/DOC-6675/develop/data-types/strings/#set_get?lang=redis-cli

andy-stark-redis · 2026-05-28T13:39:50Z

@paoloredis It would definitely be useful to have a feature to run CLI examples like this. However, the commands don't seem to appear in the CLI page when you go to it (you get a working prompt, but it just doesn't seem to receive the commands in the example).

Also, we've already got those interactive CLIs that work within the page (eg, https://redis.io/docs/latest/commands/set/#examples). Is there a way we could incorporate those into the CLI tab so that the CLI example just works the same as the client lib examples?

dwdougherty · 2026-05-28T13:50:30Z

@paoloredis It would definitely be useful to have a feature to run CLI examples like this. However, the commands don't seem to appear in the CLI page when you go to it (you get a working prompt, but it just doesn't seem to receive the commands in the example).

I tried this example, https://redis.io/docs/staging/DOC-6675/commands/hset/#hset?lang=redis-cli, and I see the following output:

1:C 2026-05-28T13:45:04.464Z # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
1:C 2026-05-28T13:45:04.464Z # Configuration loaded
                  _._
            _.-``__ ''-._
      _.-``    `.  `_.  ''-._            Redis 8.8.0 (00000000/1) 64 bit
    .-`` .-```.  ```/    _.,_ ''-._
  (    '      ,       .-`  | `,    )     Running in standalone mode
  |`-._`-...-` __...-.``-._|'` _.-'|     Port: 6379
  |    `-._   `._    /     _.-'    |     PID: 1
  `-._    `-._  `-./  _.-'    _.-'
  |`-._`-._    `-.__.-'    _.-'_.-'|
  |    `-._`-._        _.-'_.-'    |           https://redis.io
  `-._    `-._`-.__.-'_.-'    _.-'
  |`-._`-._    `-.__.-'    _.-'_.-'|
  |    `-._`-._        _.-'_.-'    |
  `-._    `-._`-.__.-'_.-'    _.-'
      `-._    `-.__.-'    _.-'
          `-._        _.-'
              `-.__.-'

1:M 2026-05-28T13:45:04.464Z # Server initialized
1:M 2026-05-28T13:45:04.464Z * Ready to accept connections
redis:6379> HSET myhash field1 "Hello"
(integer) 1
redis:6379> HGET myhash field1
"Hello"
redis:6379> HSET myhash field2 "Hi" field3 "World"
(integer) 2
redis:6379> HGET myhash field2
"Hi"
redis:6379> HGET myhash field3
"World"
redis:6379> HGETALL myhash
1) "field1"
2) "Hello"
3) "field2"
4) "Hi"
5) "field3"
6) "World"
redis:6379>

Also, we've already got those interactive CLIs that work within the page (eg, https://redis.io/docs/latest/commands/set/#examples). Is there a way we could incorporate those into the CLI tab so that the CLI example just works the same as the client lib examples?

We have both the TCE and CLI widget on some command pages, though we could certainly change that.

One other thought... a lot of examples aren't complete (for example, they rely on a dataset that might not be present in the fenced code block), so this can't really be global.

andy-stark-redis · 2026-05-28T13:59:01Z

@dwdougherty Did you try that in a local build? Maybe it's just the staging that doesn't show the command correctly.

Also, regarding the missing dataset issue, maybe we could have hidden sections in the CLI text to set the data up? They wouldn't be shown in the page but still get run during an interactive session.

dwdougherty · 2026-05-28T14:18:10Z

@andy-stark-redis I forget to include the URL (I just added it to my comment). I used a staging link that @paoloredis gave to me in Slack.

Er... okay, it's there now. 🫠

paoloredis · 2026-05-29T08:14:10Z

@andy-stark-redis is it working for you now? so are you suggesting we make the redis cli examples in the tabbed code examples interactive, without the external button taking you to redis.io/cli ?

andy-stark-redis · 2026-05-29T08:57:58Z

@andy-stark-redis is it working for you now?

Yes, the staging link works fine now, thanks.

so are you suggesting we make the redis cli examples in the tabbed code examples interactive, without the external button taking you to redis.io/cli ?

Yeah, I'm just thinking that the system we've got for the client examples where they can run in the page is really nice.
I guess the interactive CLIs we have on the command pages aren't exactly the same as this because they don't run the commands before your eyes (they just show results and let you type new stuff).

If the in-page client examples rely on a Jupyter kernel behind the scenes then I guess one (crazy) idea might be to implement our own Jupyter kernel for Redis CLI commands? Probably not all that far-fetched when we've got our AI friends to do the work :-)

Anyway, TBH, it's really good just to have the "Try it" button you've already implemented, so I'd certainly approve going ahead with that. I just thought I'd throw in a few ideas while we're thinking about it.

andy-stark-redis · 2026-05-29T09:41:52Z

@paoloredis @dwdougherty OK, I've had Claude look into this and it turns out you can add new "magic" commands to a notebook quite easily (you start off with Python and register Python handlers for the commands). So, we could have essentially a Python notebook with something like this in the first cell:

%load_ext redis_magic
%redis_connect redis://localhost:6379
>>>     Connected to redis://localhost:6379

Then, in subsequent cells we would have:

%%redis
     SET user:1 "alice"
     SET user:2 "bob"
     HSET profile:1 name alice age 30
     HGETALL profile:1
     ──────
 >>> OK
     OK
     (integer) 2
     1) "name"
     2) "alice"
     3) "age"
     4) "30"

I don't know if this is more trouble than it's worth, but possibly worth exploring if it enables in-page examples for CLI?

- 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

paoloredis · 2026-05-29T10:13:03Z

@andy-stark-redis @dwdougherty I've now modified the tabbed code examples so that redis-cli code is executable. What do you think? This means that some pages like redis.io/docs/commands/hget/ will need to be updated to only include the tabbed code example. With this feature should we keep the "Try it" button or maybe not?

andy-stark-redis · 2026-05-29T10:56:58Z

@andy-stark-redis @dwdougherty I've now modified the tabbed code examples so that redis-cli code is executable. What do you think?

That's basically what I was thinking of. I'd say that looks really neat now :-)

With this feature should we keep the "Try it" button or maybe not?

If we go ahead with the notebooks then maybe it could just say "Run in browser" like the others? I guess having links to redis.io/cli is a good idea though, since it's a nice feature. Maybe we could have a link in the footer? ("Try online or check out our other client tools...")

paoloredis · 2026-05-29T12:11:08Z

To be honest I'm not really sure I see the point in having a jupyter notebook for the redis cli commands.
What if we keep the "Try it" button for the redis-cli and we change the "Run in browser" jupyter links to use the same "Try it" button? To have some consistency

dwdougherty · 2026-05-29T15:42:02Z

@andy-stark-redis, @paoloredis: do you want me to go ahead and remove the CLI widget from pages that also have TCEs? It's only a handful of command pages:

AUTH,DEL,EXISTS,EXPIRE,FLUSHALL,GET,HDEL,HEXPIRE,HGET,HGETALL,HMGET,HSET,HVALS,INCR,INFO,KEYS,LLEN,LPOP,LPUSH,LRANGE,MGET,RPOP,RPUSH,SADD,SCAN,SET,SMEMBERS,TTL,XADD,ZADD,ZRANGE

andy-stark-redis · 2026-05-29T15:53:31Z

@andy-stark-redis, @paoloredis: do you want me to go ahead and remove the CLI widget from pages that also have TCEs? It's only a handful of command pages...

I think the CLI widgets sometimes have different commands from the ones used in the nearby TCEs (eg, here)? The TCEs don't have Redis CLI tabs in those cases, so you'd need to create a new CLI example corresponding to the client code. So, only a handful of pages but maybe a big-ish job. However, if you're up for it then I think it would tidy those pages up very nicely.

…ngs via JSON.stringify

… for GET

Deduplicate the standalone redis-cli widgets that repeated commands already present in the tabbed clients-example. For pages where the tabbed example lacked the CLI commands (get, set), merge them into the tabbed example. Add '>' prefixes on hexpire, hdel, info, and exists so their interactive CLI tab runs only commands.

github-actions · 2026-06-10T12:24:42Z

paoloredis · 2026-06-10T12:37:03Z

I think the CLI widgets sometimes have different commands from the ones used in the nearby TCEs (eg, here)? The TCEs don't have Redis CLI tabs in those cases, so you'd need to create a new CLI example corresponding to the client code. So, only a handful of pages but maybe a big-ish job. However, if you're up for it then I think it would tidy those pages up very nicely.

I've addressed this now @andy-stark-redis @dwdougherty

andy-stark-redis · 2026-06-10T12:43:42Z

@paoloredis Awesome - thanks for all your work on this :-)

The interactive redis-cli widgets previously shared a single module-level session id, but each widget's auto-run fired in parallel with an undefined id, so the backend forked them into separate sessions and the global id kept only the last responder. Typed commands then ran against the wrong session (e.g. INCREX mykey1 resetting to 1 on the multi-widget increx page). Serialize all requests through a queue so the first establishes the session id and every subsequent auto-run or typed command reuses it. All widgets on a page (tabbed examples and standalone snippets) now share one namespace: auto-run data accumulates into a single database and users can query or extend it from any widget.

Introduce two clients-example params: prereq="true" marks a block as its set's setup cell, and needs_prereq="true" makes that block's Try-it replay only the set's prerequisite commands (via window._tryItPrereqs[set]) before its own, instead of the full transitive buildsUpon chain. buildsUpon is retained for the markdown/LLM "Builds upon" exports and as the legacy fallback for blocks without needs_prereq. Apply to develop/data-types/json/path: mark set_bikes as prereq and flag every dependent example with needs_prereq.

Try-it now seeds the CLI session solely from the explicit prereq model (prereq / needs_prereq); data-builds-upon is treated as metadata only (AI/markdown export) and is no longer walked by openTryItCli. Also drop the spurious buildsUpon="set_get" from the strings incr and mset examples, which are self-contained and don't depend on bike:1.

Restore buildsUpon="set_get" on the strings incr and mset examples; keep them unchanged as metadata. Try-it behaviour is unaffected since openTryItCli no longer consults buildsUpon.

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 0f3112e. Configure here.}

cursor · 2026-06-12T09:46:41Z

 the regular expression pattern `"(?i)al"`:

-{{< clients-example set="json_tutorial" step="filter3" description="Regex filters: Use =~ operator with regular expressions in filter expressions to match patterns in string values when you need flexible pattern-based filtering" difficulty="advanced" buildsUpon="filter2" >}}
+{{< clients-example set="json_tutorial" step="filter3" description="Regex filters: Use =~ operator with regular expressions in filter expressions to match patterns in string values when you need flexible pattern-based filtering" difficulty="advanced" buildsUpon="filter2" needs_prereq="true" >}}


Try It hidden without prefixes

Low Severity

This PR adds needs_prereq="true" to the filter3 example, but its inner lines still lack > / redis> prefixes, so $tryItCommands stays empty, the Try it button is not rendered, and external Try it cannot prepend the set’s prerequisite commands despite the new attribute.

^{Reviewed by Cursor Bugbot for commit 0f3112e. Configure here.}

cursor · 2026-06-12T09:46:41Z

+      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    const url = 'https://redis.io/cli?commands=' + b64 + '&autorun=true';
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };


Duplicate openTryItCli definition

Low Severity

openTryItCli is defined in both tabs/wrapper.html (prerequisite-aware) and the redis-cli shortcode (commands only). Whichever inline script runs first wins via ||, so pages mixing both can lose prereq handling for Try it without an obvious link between the two copies.

Additional Locations (1)

layouts/partials/tabs/wrapper.html#L278-L307

^{Reviewed by Cursor Bugbot for commit 0f3112e. Configure here.}

fix: remove double HTML-escaping on tryit-commands data attribute

629daa4

The htmlEscape filter was applied on top of Hugo's automatic attribute escaping, causing double-encoding (e.g. &#34; instead of "). This broke JSON.parse in the browser when clicking the Try It button.

cursor Bot reviewed May 28, 2026

View reviewed changes

Comment thread layouts/partials/tabs/wrapper.html Outdated

paoloredis added 2 commits May 28, 2026 14:24

cursor Bot reviewed May 28, 2026

View reviewed changes

Comment thread layouts/partials/tabs/wrapper.html

cursor Bot reviewed May 28, 2026

View reviewed changes

Comment thread layouts/partials/tabs/wrapper.html Outdated

paoloredis requested review from andy-stark-redis and dwdougherty May 28, 2026 13:28

andy-stark-redis approved these changes May 29, 2026

View reviewed changes

cursor Bot reviewed May 29, 2026

View reviewed changes

Comment thread static/js/codetabs.js

Render Redis status replies (e.g. PONG, OK) without quotes in CLI widget

78eb4e6

cursor Bot reviewed Jun 4, 2026

View reviewed changes

Comment thread layouts/partials/tabbed-clients-example.html

Comment thread layouts/partials/tabbed-clients-example.html

Render large-integer string replies as (integer) and escape bulk stri…

b487eb7

…ngs via JSON.stringify

cursor Bot reviewed Jun 4, 2026

View reviewed changes

Comment thread static/js/cli.js Outdated

paoloredis and others added 2 commits June 4, 2026 15:24

Do not treat numeric bulk strings as integers; keep redis-cli quoting…

7533040

… for GET

Merge branch 'main' into DOC-6675

e519788

cursor Bot reviewed Jun 10, 2026

View reviewed changes

Comment thread layouts/partials/tabbed-clients-example.html

cursor Bot reviewed Jun 10, 2026

View reviewed changes

Comment thread layouts/partials/tabbed-clients-example.html

Comment thread layouts/shortcodes/redis-cli.html

cursor Bot reviewed Jun 10, 2026

View reviewed changes

Comment thread static/js/cli.js

cursor Bot reviewed Jun 11, 2026

View reviewed changes

Comment thread layouts/partials/tabbed-clients-example.html

paoloredis added 2 commits June 12, 2026 11:39

Revert buildsUpon removal on strings incr/mset examples

0f3112e

Restore buildsUpon="set_get" on the strings incr and mset examples; keep them unchanged as metadata. Try-it behaviour is unaffected since openTryItCli no longer consults buildsUpon.

cursor Bot reviewed Jun 12, 2026

View reviewed changes

Conversation

paoloredis commented May 28, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 28, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jit-ci Bot commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛡️ Jit Security Scan Results

Uh oh!

Uh oh!

Uh oh!

Uh oh!

paoloredis commented May 28, 2026

Uh oh!

andy-stark-redis commented May 28, 2026

Uh oh!

dwdougherty commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andy-stark-redis commented May 28, 2026

Uh oh!

dwdougherty commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

paoloredis commented May 29, 2026

Uh oh!

andy-stark-redis commented May 29, 2026

Uh oh!

andy-stark-redis commented May 29, 2026

Uh oh!

Uh oh!

paoloredis commented May 29, 2026

Uh oh!

andy-stark-redis commented May 29, 2026

Uh oh!

paoloredis commented May 29, 2026

Uh oh!

dwdougherty commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andy-stark-redis commented May 29, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

paoloredis commented Jun 10, 2026

Uh oh!

andy-stark-redis commented Jun 10, 2026

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jun 12, 2026

Choose a reason for hiding this comment

Try It hidden without prefixes

Uh oh!

cursor Bot Jun 12, 2026

Choose a reason for hiding this comment

Duplicate openTryItCli definition

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

paoloredis commented May 28, 2026 •

edited by cursor Bot

Loading

github-actions Bot commented May 28, 2026 •

edited by atlassian Bot

Loading

jit-ci Bot commented May 28, 2026 •

edited

Loading

dwdougherty commented May 28, 2026 •

edited

Loading

dwdougherty commented May 28, 2026 •

edited

Loading

dwdougherty commented May 29, 2026 •

edited

Loading

github-actions Bot commented Jun 10, 2026 •

edited

Loading