Add title and description to each playground example pages

[reynaldichernando]

right now each playground example page only have the sidebar, and the 2 window pane, it's unclear as to which page a user is currently at.
https://docs.puter.com/playground/

plus it's hard to tell what this page is about, adding both title and desc, could help solve this

[reynaldichernando]

throwing out ideas for the UI:

although this would mean we have to turn the window panes into vertical
since i'm not sure how to make it look decent with side by side window panes (like where to put the title and desc

if anyone have ideas, it would be greatly appreciated

[arakhitasabata635]

Hi, I’d like to work on this issue if it’s still open.

My idea is to:

• visually highlight the active playground item in the sidebar
• add a title and short description at the top of the page
• add small headings like “Example” and “Output” above the panes

This would keep the current side-by-side layout while improving clarity.
Happy to adjust based on feedback.

[reynaldichernando]

hi @arakhitasabata635 , thank you for your interest
i'll handle this one at the moment, but no worries you can find other open issues to contribute to, or keep a look out for new issues!

[philip-ifeanyi]

Hello, has this been worked on? I'd love to pick this up

[reynaldichernando]

hi @philip-ifeanyi , thank you for the interest
there is a lo fi sketch above of the UI, it's not final yet, but open for input if you have any suggestions

[philip-ifeanyi]

Hello @reynaldichernando,

I took a look at this and I think your proposed layout works well for laptops and smaller screens. However, on larger displays, switching to a vertical pane layout may feel a bit unusual and could reduce the effectiveness of the current side-by-side experience.

An alternative approach could be to keep the existing layout and add the page title directly beneath the Puter.js Playground header. We could also include a brief description as comments within each code example. This would give users enough context about the example they are viewing without requiring significant UI changes.

This is especially useful on smaller devices (1024px laptops, tablets, and mobiles), where users do not have constant visibility of the sidebar and may need to open the hamburger menu to navigate.

With this approach, we preserve the current look and feel of the playground while still improving discoverability and the overall user experience.

[reynaldichernando]

hi @philip-ifeanyi , sounds good, let's go with your idea

[philip-ifeanyi]

Awesome @reynaldichernando, i will create a fork, pull, work on it and open a PR

[reynaldichernando]

thank you, let me know if you need any help