[PLAY-3123] Rails Playground POC by kangaree · Pull Request #6359 · powerhome/playbook

kangaree · 2026-07-06T18:39:00Z

What does this PR do?
https://runway.powerhrg.com/backlog_items/PLAY-3123

Adds a Rails Playground tab for select kit pages that reuses the existing props panel but renders previews through a server-side pb_rails endpoint. Includes ERB codegen, live preview wiring, and translation for JSX/ERB children so compound kits (card, flex, dialog) behave like their React playground counterparts.

Kits:

button
badge
caption
icon
title
card
flex
checkbox
text_input
dialog
dropdown

Screenshots: Screenshots to visualize your addition/change

How to test? Steps to confirm the desired behavior:

Go through kits and click playground in rails.

Checklist:

LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
DEPLOY I have added the milano label to show I'm ready for a review.
TESTS I have added test coverage to my code.
SEMVER I have added a minor, major, or patch label for release.
RC I have added an inactive RC label if not an active RC.

Adds a Rails Playground tab for select kit pages that reuses the existing props panel but renders previews through a server-side pb_rails endpoint. Includes ERB codegen, live preview wiring, and translation for JSX/ERB children so compound kits (card, flex, dialog) behave like their React playground counterparts.

nidaqg · 2026-07-07T15:32:31Z

+                                                                        title: "Header Title inside Dialog.Header",
+                                                                      }),
+                                                        @children.present? ? render_pb_kit("dialog/dialog_body") { @children.to_s.html_safe } : render_pb_kit("dialog/dialog_body", { text: "" }),
+                                                        render_pb_kit("dialog/dialog_footer", {


Can we avoid calling html_safe on playground-provided children unless the content came from a trusted renderer? The generic children fallback and dialog subcomponent body here look like they can return raw user-entered HTML. Since LiveExampleRails later executes inline scripts from the rendered HTML, this feels like a risky path for security issues, like we had for the previous playground.

Agreed. I updated this to escape the playground-provided children.

nidaqg · 2026-07-07T15:37:17Z

+        const data = await response.json();
+
+        if (!response.ok) {
+          setError(data.error || "Failed to render Rails preview");


Should we clear html here as well when a Rails preview request errors or when a new request starts? Right now a failed prop combo can show an error while still rendering the last successful preview

Updated when a new request starts!

Plain children from the props panel are escaped via TrustedHtml. Dialog body and other fallbacks use ChildrenRenderer instead of raw html_safe.

kangaree

Thanks so much for your review! I'm still working on your feedback, but wanted to provide some updates for now.

kangaree · 2026-07-07T16:43:37Z

+        const data = await response.json();
+
+        if (!response.ok) {
+          setError(data.error || "Failed to render Rails preview");


Updated when a new request starts!

kangaree · 2026-07-07T16:55:06Z

+                                                                        title: "Header Title inside Dialog.Header",
+                                                                      }),
+                                                        @children.present? ? render_pb_kit("dialog/dialog_body") { @children.to_s.html_safe } : render_pb_kit("dialog/dialog_body", { text: "" }),
+                                                        render_pb_kit("dialog/dialog_footer", {


Agreed. I updated this to escape the playground-provided children.

Run inline scripts first. Then one PbKitRegistry rescan and mountComponents call scoped to the preview container. Rescan again when scripts use deferred DOMContentLoaded/load callbacks.

ElisaShapiro

The only thing that pops out to me vs. React side is the code snippet not having its syntax highlighted (doc code snippets + react playground use react-syntax-highlighter) but that's small potatoes compared to the rest (and definitely not a blocker for this, can be explored at any time in the playground POC/beta life-cycle). Really awesome job!

Allowlist nested child kits, escape remaining text fallbacks, and disable inline script execution in the playground preview.

…Buffers are trusted

nitro-pr-review

Rails Playground POC looks sound overall: kit allowlisting, nested child-kit checks, HTML escaping, and disabling script re-execution on playground previews cover the main risk paths. No concrete correctness or security issues stood out in the diff under normal usage.

kangaree · 2026-07-16T13:53:44Z

Merging master to get the new Icon fixes - #6401.

github-actions · 2026-07-30T23:45:53Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 24 hours if no further activity occurs.
If this change is desirable, please accelerate completing it. If it is not, please close the PR. If you're blocked on something, please ensure there's a reference to this PR in a story on your team's board so the team will follow up, and consider closing the PR for now.
Please do not artificially extend the deadline with a dummy comment. If necessary, provide a status update, such as "this change is being actively tested".
Thank you for your contributions and your collaboration in reducing WIP and cycle time.

Cap request/children size and nesting depth, add a cache-based per-IP rate limit, and return generic client errors while logging detail.

Reject unknown keys and never forward html_options/data/aria/style. Apply the same PropFilter to nested JSX/ERB child props.

kangaree · 2026-08-10T18:46:53Z

I addressed feedback:

Cap preview input size and redact error details
Only allow schema props; block html_options / data / aria / style
Reject URL/path/.svg-like icon values so the playground can’t poke Icon’s file/URL paths
Tighten ERB children parsing (\A anchor) and only allow known child kit paths

kangaree added 3 commits July 6, 2026 14:20

Simplify Rails playground renderer and codegen

84bebdf

Fix missing block children in Rails playground preview

ea26f32

kangaree self-assigned this Jul 6, 2026

kangaree added milano 20 MAX - Deploy this PR to a review environment via Milano improvement This is used when your PR contains library upgrades or doc/site improvements. (USED IN CHANGELOG)) minor Semver Target Inactive RC Skip the release candidate process labels Jul 6, 2026

app-milano Bot temporarily deployed to pr6359 July 6, 2026 18:47 Inactive

Fix broken dialog playground

943a71d

app-milano Bot temporarily deployed to pr6359 July 6, 2026 21:18 Inactive

nidaqg reviewed Jul 7, 2026

View reviewed changes

Comment thread playbook-website/app/controllers/playground_controller.rb Outdated

nidaqg reviewed Jul 7, 2026

View reviewed changes

Comment thread ...k-website/app/javascript/components/Website/src/components/LiveExamples/LiveExampleRails.tsx Outdated

kangaree added 3 commits July 7, 2026 12:06

Remove skip csrf shortcut in rails and use react app csrf-token

eadbac7

Set HTML on new request so there aren't stale previews

a23adcb

Escape user-provided playground children to prevent XSS in preview

47fcf4f

Plain children from the props panel are escaped via TrustedHtml. Dialog body and other fallbacks use ChildrenRenderer instead of raw html_safe.

kangaree commented Jul 7, 2026

View reviewed changes

app-milano Bot temporarily deployed to pr6359 July 7, 2026 17:02 Inactive

Simplify Rails preview kit initialization to a single scoped path

6f5e4d3

Run inline scripts first. Then one PbKitRegistry rescan and mountComponents call scoped to the preview container. Rescan again when scripts use deferred DOMContentLoaded/load callbacks.

app-milano Bot temporarily deployed to pr6359 July 9, 2026 17:39 Inactive

ElisaShapiro previously approved these changes Jul 13, 2026

View reviewed changes

nidaqg reviewed Jul 13, 2026

View reviewed changes

Comment thread playbook-website/app/services/playground/trusted_html.rb

kangaree added 2 commits July 14, 2026 08:41

Harden Rails playground against HTML/script injection

786a486

Allowlist nested child kits, escape remaining text fallbacks, and disable inline script execution in the playground preview.

Assemble with 'safe_join' so user text is escaped while pb_rails Safe…

79c2cd4

…Buffers are trusted

kangaree dismissed ElisaShapiro’s stale review via 79c2cd4 July 14, 2026 13:08

app-milano Bot temporarily deployed to pr6359 July 14, 2026 13:21 Inactive

kangaree added the agentic-review label Jul 14, 2026

nitro-pr-review Bot reviewed Jul 14, 2026

View reviewed changes

Merge branch 'master' into PLAY-2326-rails-playground-poc

2193830

app-milano Bot temporarily deployed to pr6359 July 16, 2026 14:02 Inactive

github-actions Bot added the Stale label Jul 30, 2026

github-actions Bot closed this Aug 3, 2026

github-actions Bot deleted the PLAY-2326-rails-playground-poc branch August 3, 2026 23:49

kangaree added 5 commits August 4, 2026 15:38

Harden Rails playground preview with input caps and redacted errors

46c8b6f

Cap request/children size and nesting depth, add a cache-based per-IP rate limit, and return generic client errors while logging detail.

Filter playground props to schema-only and block dangerous option hashes

447e4b3

Reject unknown keys and never forward html_options/data/aria/style. Apply the same PropFilter to nested JSX/ERB child props.

Reject URL and path-like icon props in the Rails playground

9f6556d

Anchor ERB children pb_rails patterns to the start of the string

b231d3e

Allowlist full child kit paths in the Rails playground

0e3a182

kangaree reopened this Aug 5, 2026

kangaree removed the Stale label Aug 5, 2026

app-milano Bot temporarily deployed to pr6359 August 5, 2026 18:34 Inactive

kangaree changed the title ~~[PLAY-2326] Rails Playground POC~~ [PLAY-3123] Rails Playground POC Aug 6, 2026

Merge branch 'master' into PLAY-2326-rails-playground-poc

4cdba9f

app-milano Bot deployed to pr6359 August 7, 2026 17:37 View deployment

Merge branch 'master' into PLAY-2326-rails-playground-poc

5998fa7

app-milano Bot deployed to pr6359 August 17, 2026 12:13 View deployment

Merge branch 'master' into PLAY-2326-rails-playground-poc

8c7677b

app-milano Bot had a problem deploying to pr6359 August 24, 2026 18:29 Failure

kangaree added milano 20 MAX - Deploy this PR to a review environment via Milano and removed milano 20 MAX - Deploy this PR to a review environment via Milano labels Aug 24, 2026

app-milano Bot deployed to pr6359 August 24, 2026 18:35 View deployment

Uh oh!

Conversation

kangaree commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist:

Uh oh!

nidaqg Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

kangaree Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

nidaqg Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

kangaree Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kangaree left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kangaree Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

kangaree Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

ElisaShapiro left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nitro-pr-review Bot left a comment

Choose a reason for hiding this comment

Uh oh!

kangaree commented Jul 16, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

kangaree commented Aug 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kangaree commented Jul 6, 2026 •

edited

Loading