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. Broad touch on command markdown is mechanical deduplication.

Overview
Adds a Try it flow so readers can run doc examples on redis.io/cli with commands pre-filled and autorun=true, and consolidates command docs onto a single clients-example block instead of duplicate inline redis-cli snippets.

Docs site behavior: The redis-cli tab in clients-example is now an interactive form.redis-cli (wired by cli.js on develop pages) rather than static highlighted text. Codetabs extract executable lines (> / redis> ) for a header Try it button (visible only when the Redis CLI language is selected). openTryItCli URL-encodes commands as URL-safe base64 to avoid WAF issues; multi-step tutorials can use prereq / needs_prereq (or legacy buildsUpon) to chain setup commands. Standalone redis-cli shortcodes get the same Try it button. cli.js shares one session id and serializes API calls across widgets; copy-to-clipboard handles interactive CLI forms.

Content: Many command pages and the JSON path tutorial drop separate “interactive console” redis-cli sections and fold examples into clients-example inner content (with prereq/needs_prereq on JSON tutorial steps).

^{Reviewed by Cursor Bugbot for commit 5e7126f. 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.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ 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 5e7126f. Configure here.}

cursor · 2026-06-11T13:44:10Z

+    {{ $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 }}


All tabbed CLIs auto-run

High Severity

Turning each redis-cli codetab into a form.redis-cli makes cli.js initialize every example on DOMContentLoaded, not only the visible one. Pages with many clients-example blocks (e.g. the JSON path tutorial) fire a long chained sequence against one shared session as soon as the page loads.

Additional Locations (1)

static/js/cli.js#L391-L395

^{Reviewed by Cursor Bugbot for commit 5e7126f. 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

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!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jun 11, 2026

Choose a reason for hiding this comment

All tabbed CLIs auto-run

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