feat(gnoweb): consolidate built-in playground UI by jeronimoalbi · Pull Request #5565 · gnolang/gno

jeronimoalbi · 2026-04-21T16:05:48Z

Addresses milestone 0 (M0) from #5549

Also add a bit of padding to the tab bar so it looks better.

Gno2D2 · 2026-04-21T16:06:19Z

🛠 PR Checks Summary

All Automated Checks passed. ✅

Manual Checks (for Reviewers):

IGNORE the bot requirements for this PR (force green CI check)

✅ Automated Checks (for Contributors):

No automated checks match this pull request.

☑️ Contributor Actions:

Fix any issues flagged by automated checks.
Follow the Contributor Checklist to ensure your PR is ready for review.
- Add new tests, or document why they are unnecessary.
- Provide clear examples/screenshots, if necessary.
- Update documentation, if required.
- Ensure no breaking changes, or include BREAKING CHANGE notes.
- Link related issues/PRs, where applicable.

☑️ Reviewer Actions:

Complete manual checks for the PR, including the guidelines and additional checks if applicable.

📚 Resources:

Debug

Manual Checks
**IGNORE** the bot requirements for this PR (force green CI check)
If
🟢 Condition met
└── 🟢 On every pull request
Can be checked by

Any user with comment edit permission

jeronimoalbi · 2026-04-21T16:34:36Z

View	Light	Dark
Playground
Fork
Eval
Run

It's making CI fail

alexiscolin · 2026-04-21T18:23:29Z

@jeronimoalbi Thank you for taking care of this. When you finish, can I jump into your PR to make some adjustments?

jeronimoalbi · 2026-04-22T07:46:14Z

@jeronimoalbi Thank you for taking care of this. When you finish, can I jump into your PR to make some adjustments?

@alexiscolin of course 👍

If the ned file name already exists switch to the tab for that file.

Uses the same package path used in `gnokey` addpkg output example.

A ToC could be added here to easily jump to the different sections.

jeronimoalbi · 2026-04-22T17:40:03Z

@jeronimoalbi Thank you for taking care of this. When you finish, can I jump into your PR to make some adjustments?

@alexiscolin let me know if you think this PR should cover other aspects. The focus was on making the code in playground2 branch consistent and better integrated with Gnoweb. There is room for improvements, but I wanted to keep it simple in case we can address non key improvements in the future.

Feel free to push and improve on this PR 👍

jeronimoalbi · 2026-04-22T17:44:50Z

Something that is not quite clear so far is how to deal with the top menu, specially when the Playground is displayed. Right now Playground has no menu because the items didn't make sense within that context.

Also we should add a link to the Playground view somewhere.

alexiscolin · 2026-04-23T03:48:44Z

Something that is not quite clear so far is how to deal with the top menu, specially when the Playground is displayed. Right now Playground has no menu because the items didn't make sense within that context.

Also we should add a link to the Playground view somewhere.

That's where I would like to make some improvements. This view is not optimal right now in term of UX 👍 I'm also gonna merge some views to it easier to manipulate.

alexiscolin

Thanks for pushing this forward Jerónimo. The visual direction is right: dark mode, the header unification across views, the tab typography all land better.

A few inline notes below on small regressions I spotted in the diff. Nothing unfixable.

Three things that aren't in this diff but feel worth raising before we call M0 done, per #5549. Happy to split them as separate PRs on playground2 if you prefer, just want them on the radar:

Nav. The default dev links case in layout_header.go still returns 6 tabs (Content / Source / Actions / Eval / Fork / Run). I know that came from #5421 not from this PR, but since M0 lists nav as a dimension and M1/M2 will absorb Fork and Eval into Source and Actions, does it make sense to drop them from the header already? URLs stay reachable for deep links, we just don't train users on a 6-tab topology we'll undo. We can keep it in mind for the following PRs.
Controllers alignment. controller-playground.ts, controller-eval.ts, and controller-run.ts are factory functions, while every other controller in the codebase extends BaseController. M0 lists this as controller alignment, and M1 will need cross-controller dispatch (Source → Playground) which the factory pattern doesn't expose. You're already editing these files here, so the delta would be small. Do in this PR or next one on playground2?
Dead code after the renderRunContent collapse? Not in the diff but view_run.go:27 still wraps data in runViewParams.Article pointing to renderRunContent, a template that no longer exists right? Harmless today (never rendered), but a trap if anyone re-adds layout/article to realign with the other views.

alexiscolin · 2026-04-23T13:02:19Z

-    <div class="c-stack" data-eval-target="history-list">
-    </div>
+    <h2 class="b-content-h2">History</h2>
+    <div class="b-eval-history-list" data-eval-target="history-list" />


Nit: <div ... /> self-closing syntax isn't valid HTML5 for non-void elements (the / is ignored by the parser). It renders fine here because the </div> on the next line balances it, but the syntax is confusing for readers used to JSX/XHTML.

Done 7d65338

alexiscolin · 2026-04-23T13:08:15Z

  <div class="b-eval-result">
    <div class="b-eval-result-header">
-      <span>Result</span>
+      <h3 class="b-eval-result-title">Result</h3>


NIT: "Result" went from <span> to <h3>, so DOM order now reads h1 → h3 Result → h2 Quick Call → h2 History, which is backwards for screen readers.
WDYT about keeping it as a span (or a panel-title class if we factor the shared panel primitive later)?

Done 7d65338

alexiscolin · 2026-04-23T13:08:33Z

  <div class="b-playground-output">
    <div class="b-playground-output-header">
-      <span class="b-playground-output-title">Output</span>
+      <h3 class="b-playground-output-title">Output</h3>


Same thought as on eval: "Output" feels more like a pane label than a section heading. Span rather than <h3>?

Done 7d65338

alexiscolin · 2026-04-23T13:13:13Z

 	padding: var(--g-space-1-5);
-	border: 1px solid var(--s-color-border-default);
-	border-radius: var(--g-radius-1);
+	border: 1px solid var(--s-color-border-defaul);


Suggested change

border: 1px solid var(--s-color-border-defaul);

border: 1px solid var(--s-color-border-default);

Done 7d65338

Co-authored-by: Alexis Colin <alexis@jaunebleu.co>

jeronimoalbi · 2026-04-23T14:10:36Z

Thanks for pushing this forward Jerónimo. The visual direction is right: dark mode, the header unification across views, the tab typography all land better.

A few inline notes below on small regressions I spotted in the diff. Nothing unfixable.

Three things that aren't in this diff but feel worth raising before we call M0 done, per #5549. Happy to split them as separate PRs on playground2 if you prefer, just want them on the radar:

Nav. The default dev links case in layout_header.go still returns 6 tabs (Content / Source / Actions / Eval / Fork / Run). I know that came from feat(gnoweb): built-in playground(2) #5421 not from this PR, but since M0 lists nav as a dimension and M1/M2 will absorb Fork and Eval into Source and Actions, does it make sense to drop them from the header already? URLs stay reachable for deep links, we just don't train users on a 6-tab topology we'll undo. We can keep it in mind for the following PRs.

Controllers alignment. controller-playground.ts, controller-eval.ts, and controller-run.ts are factory functions, while every other controller in the codebase extends BaseController. M0 lists this as controller alignment, and M1 will need cross-controller dispatch (Source → Playground) which the factory pattern doesn't expose. You're already editing these files here, so the delta would be small. Do in this PR or next one on playground2?

Dead code after the renderRunContent collapse? Not in the diff but view_run.go:27 still wraps data in runViewParams.Article pointing to renderRunContent, a template that no longer exists right? Harmless today (never rendered), but a trap if anyone re-adds layout/article to realign with the other views.

I would address these in follow-up PRs if you agree, to make it easier to review. We could link back to your comment from the PRs.

jeronimoalbi added 3 commits April 21, 2026 12:26

chore(gnoweb): make editor corners rounded

79bf488

Also add a bit of padding to the tab bar so it looks better.

chore: increase playground tab font size

726a72c

feat: change playground styles to be inline with gnoweb

c2529fd

jeronimoalbi self-assigned this Apr 21, 2026

github-project-automation Bot added this to 🧙‍♂️Gno.land development and 💪 Bounties & Worx Apr 21, 2026

github-project-automation Bot moved this to Triage in 🧙‍♂️Gno.land development Apr 21, 2026

github-actions Bot added 📦 ⛰️ gno.land Issues or PRs gno.land package related 🌍 gnoweb Issues & PRs related to gnoweb and render labels Apr 21, 2026

jeronimoalbi added 5 commits April 21, 2026 18:08

chore: remove deprecated controller file

6453e3f

ci: fix typescript issues (biome)

b6d19d0

ci: gnoweb generate

3c115b3

chore: update package lock

4f456ec

chore: remove redundant min() function

27c3281

ci: remove peer flag from package lock

fef4668

It's making CI fail

alexiscolin self-requested a review April 21, 2026 18:22

alexiscolin self-assigned this Apr 21, 2026

alexiscolin added the a/ux User experience, product, marketing community, developer experience team label Apr 21, 2026

jeronimoalbi added 8 commits April 22, 2026 10:52

feat: allow "gnomod.toml" file and disallow duplicated file names

d6a246b

If the ned file name already exists switch to the tab for that file.

feat: add function to set playground output and error

1647363

feat: add default "gnomod.toml" content when file is created

3a686a8

Uses the same package path used in `gnokey` addpkg output example.

ci: fix formatting

0c016d2

chore: make generate

48226c4

feat: change script run view styles to be inline with gnoweb

f7f97f0

feat: fix script run to use the whole space

85e58cc

A ToC could be added here to easily jump to the different sections.

chore: make generate

92de7db

jeronimoalbi added 3 commits April 22, 2026 18:33

feat: change eval view styles to be inline with gnoweb

e6ff4fd

chore: make generate

fec2e3e

ci: fix formatting

e8086af

jeronimoalbi marked this pull request as ready for review April 22, 2026 17:35

jeronimoalbi requested a review from moul April 22, 2026 17:40

nemanjantic moved this from Triage to In Review in 🧙‍♂️Gno.land development Apr 23, 2026

alexiscolin approved these changes Apr 23, 2026

View reviewed changes

github-project-automation Bot moved this to In Progress in 💪 Bounties & Worx Apr 23, 2026

chore: fix typo and improved view templates

7d65338

Co-authored-by: Alexis Colin <alexis@jaunebleu.co>

jeronimoalbi added 3 commits April 23, 2026 16:11

chore: regenerate main.css

c511d29

chore: remove unused variable

27085e5

Merge branch 'playground2' into playground2-m0

be76768

	border: 1px solid var(--s-color-border-defaul);
	border: 1px solid var(--s-color-border-default);

Conversation

jeronimoalbi commented Apr 21, 2026

Uh oh!

Gno2D2 commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠 PR Checks Summary

Manual Checks (for Reviewers):

✅ Automated Checks (for Contributors):

☑️ Contributor Actions:

☑️ Reviewer Actions:

📚 Resources:

If

Can be checked by

Uh oh!

jeronimoalbi commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexiscolin commented Apr 21, 2026

Uh oh!

jeronimoalbi commented Apr 22, 2026

Uh oh!

jeronimoalbi commented Apr 22, 2026

Uh oh!

jeronimoalbi commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexiscolin commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexiscolin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeronimoalbi commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Gno2D2 commented Apr 21, 2026 •

edited

Loading

jeronimoalbi commented Apr 21, 2026 •

edited

Loading

jeronimoalbi commented Apr 22, 2026 •

edited

Loading

alexiscolin commented Apr 23, 2026 •

edited

Loading

jeronimoalbi commented Apr 23, 2026 •

edited

Loading