feat: update playground layout and add console output (#3787)
There isn't an issue for this one, but discussed in Discord.
## Changes
This PR overhauls the playground to:
* Have a stronger webapp look and feel, similar to codepen, etc
* Display logs within the playground
* Introduce a framework to minimise subtle state bugs
## Tech choice
As discussed in Discord, Erik mentioned using what makes me "happy and productive" - which is React. Even for non-React devs, I hope it is relatively easy to trace the data flow - there is no over the top state management like redux, etc.
## UI
The look and feel is heavily inspired by @jyoung4242 IDE work.
The zinc and purple color scales are from Tailwind v4
## General layout
### Editor
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 38 28@2x" src="https://github.com/user-attachments/assets/16e581da-fd9f-41c8-bfbb-6c73f4236ccd" />
### Assets
I'm not 100% on this; it's better than current (which is non-existent) but I will do another pass on this later.
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 38 59@2x" src="https://github.com/user-attachments/assets/786a906a-1b31-4953-ac3a-7650b26924d8" />
### Console
Supports 3x colors via `console.log`, `console.info`, and `console.warn`.
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 40 01@2x" src="https://github.com/user-attachments/assets/be6ec2f5-cfc3-4f76-976f-a253904887c3" />
## Embedded
The same embedded search params are applied. It will look like the following when embedded in the docs:
<img width="3160" height="2538" alt="CleanShot 2026-06-17 at 23 08 27@2x" src="https://github.com/user-attachments/assets/40bd49da-cfcd-49bb-af57-23556e34ef1e" />
---
## Deployments
The following `.env` will need to part of the deployment of the playground:
```properties
VITE_PLAYGROUND_PATH='./playground'
VITE_HIJACK_LOGS=true
```
**Note:** I couldn't find the actual deployment steps in `.github` for the playground. And I don't think its built during a PR?
---
## Basic accessibility
The monaco editor traps focus (possibly a future fix?), but all other elements have focus state and the template modal has proper focus trap (thanks to baseui)
### Toolbar button focus
<img width="926" height="136" alt="CleanShot 2026-06-19 at 21 48 28@2x" src="https://github.com/user-attachments/assets/2a84d539-a8d2-44fb-9602-904a7cfeaf75" />
### Toolbar switch focus
<img width="926" height="136" alt="CleanShot 2026-06-19 at 21 48 38@2x" src="https://github.com/user-attachments/assets/9be08073-4807-462a-9c98-e85c27822941" />
### Modal button focus (3rd button)
<img width="1036" height="1058" alt="CleanShot 2026-06-19 at 21 48 53@2x" src="https://github.com/user-attachments/assets/5441ad26-7302-4b4c-875a-3c586ec6957d" />
---
## Misc
* I've kept light mode, but it's not great - if anyone has a good light theme we could slot in that matches the overall feel let me know
* The dark theme is based on mookie's ide editor
* There are more `useEffect`'s then I would normally want, however, a lot of this is imperative in nature
---
## Disclaimer
No AI clankers used for this PR _except_ for converting the dark mode json to the light mode json.
feat: update playground layout and add console output (#3787)
There isn't an issue for this one, but discussed in Discord.
## Changes
This PR overhauls the playground to:
* Have a stronger webapp look and feel, similar to codepen, etc
* Display logs within the playground
* Introduce a framework to minimise subtle state bugs
## Tech choice
As discussed in Discord, Erik mentioned using what makes me "happy and productive" - which is React. Even for non-React devs, I hope it is relatively easy to trace the data flow - there is no over the top state management like redux, etc.
## UI
The look and feel is heavily inspired by @jyoung4242 IDE work.
The zinc and purple color scales are from Tailwind v4
## General layout
### Editor
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 38 28@2x" src="https://github.com/user-attachments/assets/16e581da-fd9f-41c8-bfbb-6c73f4236ccd" />
### Assets
I'm not 100% on this; it's better than current (which is non-existent) but I will do another pass on this later.
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 38 59@2x" src="https://github.com/user-attachments/assets/786a906a-1b31-4953-ac3a-7650b26924d8" />
### Console
Supports 3x colors via `console.log`, `console.info`, and `console.warn`.
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 40 01@2x" src="https://github.com/user-attachments/assets/be6ec2f5-cfc3-4f76-976f-a253904887c3" />
## Embedded
The same embedded search params are applied. It will look like the following when embedded in the docs:
<img width="3160" height="2538" alt="CleanShot 2026-06-17 at 23 08 27@2x" src="https://github.com/user-attachments/assets/40bd49da-cfcd-49bb-af57-23556e34ef1e" />
---
## Deployments
The following `.env` will need to part of the deployment of the playground:
```properties
VITE_PLAYGROUND_PATH='./playground'
VITE_HIJACK_LOGS=true
```
**Note:** I couldn't find the actual deployment steps in `.github` for the playground. And I don't think its built during a PR?
---
## Basic accessibility
The monaco editor traps focus (possibly a future fix?), but all other elements have focus state and the template modal has proper focus trap (thanks to baseui)
### Toolbar button focus
<img width="926" height="136" alt="CleanShot 2026-06-19 at 21 48 28@2x" src="https://github.com/user-attachments/assets/2a84d539-a8d2-44fb-9602-904a7cfeaf75" />
### Toolbar switch focus
<img width="926" height="136" alt="CleanShot 2026-06-19 at 21 48 38@2x" src="https://github.com/user-attachments/assets/9be08073-4807-462a-9c98-e85c27822941" />
### Modal button focus (3rd button)
<img width="1036" height="1058" alt="CleanShot 2026-06-19 at 21 48 53@2x" src="https://github.com/user-attachments/assets/5441ad26-7302-4b4c-875a-3c586ec6957d" />
---
## Misc
* I've kept light mode, but it's not great - if anyone has a good light theme we could slot in that matches the overall feel let me know
* The dark theme is based on mookie's ide editor
* There are more `useEffect`'s then I would normally want, however, a lot of this is imperative in nature
---
## Disclaimer
No AI clankers used for this PR _except_ for converting the dark mode json to the light mode json.
feat: update playground layout and add console output (#3787)
There isn't an issue for this one, but discussed in Discord.
## Changes
This PR overhauls the playground to:
* Have a stronger webapp look and feel, similar to codepen, etc
* Display logs within the playground
* Introduce a framework to minimise subtle state bugs
## Tech choice
As discussed in Discord, Erik mentioned using what makes me "happy and productive" - which is React. Even for non-React devs, I hope it is relatively easy to trace the data flow - there is no over the top state management like redux, etc.
## UI
The look and feel is heavily inspired by @jyoung4242 IDE work.
The zinc and purple color scales are from Tailwind v4
## General layout
### Editor
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 38 28@2x" src="https://github.com/user-attachments/assets/16e581da-fd9f-41c8-bfbb-6c73f4236ccd" />
### Assets
I'm not 100% on this; it's better than current (which is non-existent) but I will do another pass on this later.
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 38 59@2x" src="https://github.com/user-attachments/assets/786a906a-1b31-4953-ac3a-7650b26924d8" />
### Console
Supports 3x colors via `console.log`, `console.info`, and `console.warn`.
<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 40 01@2x" src="https://github.com/user-attachments/assets/be6ec2f5-cfc3-4f76-976f-a253904887c3" />
## Embedded
The same embedded search params are applied. It will look like the following when embedded in the docs:
<img width="3160" height="2538" alt="CleanShot 2026-06-17 at 23 08 27@2x" src="https://github.com/user-attachments/assets/40bd49da-cfcd-49bb-af57-23556e34ef1e" />
---
## Deployments
The following `.env` will need to part of the deployment of the playground:
```properties
VITE_PLAYGROUND_PATH='./playground'
VITE_HIJACK_LOGS=true
```
**Note:** I couldn't find the actual deployment steps in `.github` for the playground. And I don't think its built during a PR?
---
## Basic accessibility
The monaco editor traps focus (possibly a future fix?), but all other elements have focus state and the template modal has proper focus trap (thanks to baseui)
### Toolbar button focus
<img width="926" height="136" alt="CleanShot 2026-06-19 at 21 48 28@2x" src="https://github.com/user-attachments/assets/2a84d539-a8d2-44fb-9602-904a7cfeaf75" />
### Toolbar switch focus
<img width="926" height="136" alt="CleanShot 2026-06-19 at 21 48 38@2x" src="https://github.com/user-attachments/assets/9be08073-4807-462a-9c98-e85c27822941" />
### Modal button focus (3rd button)
<img width="1036" height="1058" alt="CleanShot 2026-06-19 at 21 48 53@2x" src="https://github.com/user-attachments/assets/5441ad26-7302-4b4c-875a-3c586ec6957d" />
---
## Misc
* I've kept light mode, but it's not great - if anyone has a good light theme we could slot in that matches the overall feel let me know
* The dark theme is based on mookie's ide editor
* There are more `useEffect`'s then I would normally want, however, a lot of this is imperative in nature
---
## Disclaimer
No AI clankers used for this PR _except_ for converting the dark mode json to the light mode json.