lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-05-29 21:01:27 +00:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Add UI playground examples and update docs
Docker Image CI / build-and-push-image (push) Has been cancelled
Details
Maintain Release Merge PR / update-release-pr (push) Has been cancelled
Details
Notify HeyPuter / notify (push) Has been cancelled
Details
release-please / release-please (push) Has been cancelled
Details
test / test-backend (24.x) (push) Has been cancelled
Details
test / API tests (node env, api-test) (24.x) (push) Has been cancelled
Details
test / puterjs (node env, vitest) (24.x) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
jelveh
2026-04-26 19:23:12 -07:00
parent 5e9a0f0a70
commit d55c3c1637
18 changed files with 269 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/docs/src/UI/alert.md
+2 -2
View File
@@ -1,7 +1,7 @@
---
title: puter.ui.alert()
description: Displays an alert dialog by Puter.
platforms: [apps]
platforms: [ websites, apps]
---
Displays an alert dialog by Puter. Puter improves upon the traditional browser alerts by providing more flexibility. For example, you can customize the buttons displayed.
@@ -27,7 +27,7 @@ An array of objects that define the buttons to be displayed in the alert dialog.
A `Promise` that resolves to the value of the button pressed. If the `value` property of button is set it is returned, otherwise `label` property will be returned.
## Examples
```html
```html;ui-alert
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
src/docs/src/UI/contextMenu.md
+3 -3
View File
@@ -1,7 +1,7 @@
---
title: puter.ui.contextMenu()
description: Displays a context menu at the current cursor position.
platforms: [apps]
platforms: [ websites, apps]
---
Displays a context menu at the current cursor position. Context menus provide a convenient way to show contextual actions that users can perform.
@@ -31,11 +31,11 @@ This method does not return a value. The context menu is displayed immediately a
## Examples
```html
```html;ui-context-menu
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<div id="right-click-area" style="width: 200px; height: 200px; border: 1px solid #ccc; padding: 20px;">
Right-click me to show context menu
</div>
src/docs/src/UI/hideSpinner.md
+2 -2
View File
@@ -1,7 +1,7 @@
---
title: puter.ui.hideSpinner()
description: Hides the active spinner instance.
platforms: [apps]
platforms: [ websites, apps]
---
Hides the active spinner instance.
@@ -13,7 +13,7 @@ puter.ui.hideSpinner()
## Examples
```html
```html;ui-spinner
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
src/docs/src/UI/notify.md
+3 -3
View File
@@ -1,10 +1,10 @@
---
title: puter.ui.notify()
description: Displays a desktop notification in Puter.
platforms: [apps]
platforms: [ websites, apps]
---
Displays a desktop notification in Puter. Use this to surface app events without interrupting the user.
Displays a notification. Use this to surface events without interrupting the user.
## Syntax
```js
@@ -27,7 +27,7 @@ An object that configures the notification.
A `Promise` that resolves to the notification UID.
## Examples
```html
```html;ui-notify
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ui.notify({
src/docs/src/UI/prompt.md
+2 -2
View File
@@ -1,7 +1,7 @@
---
title: puter.ui.prompt()
description: Displays a prompt dialog by Puter.
platforms: [apps]
platforms: [ websites, apps]
---
Displays a prompt dialog by Puter. This will block the parent window until the user responds by pressing a button.
@@ -26,7 +26,7 @@ A string to be displayed as a placeholder in the input field. If not set, the in
A `Promise` that resolves to the value of the input field when the user presses the OK button. If the user presses the Cancel button, the promise will resolve to `null`.
## Examples
```html
```html;ui-prompt
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
src/docs/src/UI/setMenubar.md
+2 -2
View File
@@ -1,7 +1,7 @@
---
title: puter.ui.setMenubar()
description: Creates a menubar in the UI.
platforms: [apps]
platforms: [ websites, apps]
---
Creates a menubar in the UI. The menubar is a horizontal bar at the top of the window that contains menus.
@@ -32,7 +32,7 @@ An array of submenu items.
## Examples
```html
```html;ui-set-menubar
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
src/docs/src/UI/showColorPicker.md
+2 -2
View File
@@ -1,7 +1,7 @@
---
title: puter.ui.showColorPicker()
description: Presents a color picker dialog for selecting a color.
platforms: [apps]
platforms: [ websites, apps]
---
Presents the user with a color picker dialog allowing them to select a color.
@@ -15,7 +15,7 @@ puter.ui.showColorPicker(options)
## Examples
```html
```html;ui-show-color-picker
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
src/docs/src/UI/showFontPicker.md
+2 -2
View File
@@ -1,7 +1,7 @@
---
title: puter.ui.showFontPicker()
description: Presents a list of fonts for previewing and selecting.
platforms: [apps]
platforms: [ websites, apps]
---
Presents the user with a list of fonts allowing them to preview and select a font.
@@ -20,7 +20,7 @@ The default font to select when the font picker is opened.
## Examples
```html
```html;ui-show-font-picker
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
src/docs/src/UI/showSpinner.md
+2 -2
View File
@@ -1,7 +1,7 @@
---
title: puter.ui.showSpinner()
description: Shows an overlay with a spinner in the center of the screen.
platforms: [apps]
platforms: [websites, apps]
---
Shows an overlay with a spinner in the center of the screen. If multiple instances of `puter.ui.showSpinner()` are called, only one spinner will be shown until all instances are hidden.
@@ -12,7 +12,7 @@ puter.ui.showSpinner()
```
## Examples
```html
```html;ui-spinner
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
src/docs/src/examples.js
+53
View File
@@ -632,6 +632,59 @@ const examples = [
},
],
},
{
title: 'UI',
children: [
{
title: 'Alert Dialog',
description: 'Display customizable alert dialogs with Puter.js UI API. Run and experiment with this example directly in the playground.',
slug: 'ui-alert',
source: '/playground/examples/ui-alert.html',
},
{
title: 'Prompt Dialog',
description: 'Display prompt dialogs to collect user input with Puter.js UI API. Run and experiment with this example directly in the playground.',
slug: 'ui-prompt',
source: '/playground/examples/ui-prompt.html',
},
{
title: 'Notification',
description: 'Display desktop notifications with Puter.js UI API. Run and experiment with this example directly in the playground.',
slug: 'ui-notify',
source: '/playground/examples/ui-notify.html',
},
{
title: 'Context Menu',
description: 'Display context menus with submenus and separators using Puter.js UI API. Run and experiment with this example directly in the playground.',
slug: 'ui-context-menu',
source: '/playground/examples/ui-context-menu.html',
},
{
title: 'Color Picker',
description: 'Present a color picker dialog with Puter.js UI API. Run and experiment with this example directly in the playground.',
slug: 'ui-show-color-picker',
source: '/playground/examples/ui-show-color-picker.html',
},
{
title: 'Font Picker',
description: 'Present a font picker dialog with Puter.js UI API. Run and experiment with this example directly in the playground.',
slug: 'ui-show-font-picker',
source: '/playground/examples/ui-show-font-picker.html',
},
{
title: 'Spinner (Show/Hide)',
description: 'Show and hide a loading spinner overlay with Puter.js UI API. Run and experiment with this example directly in the playground.',
slug: 'ui-spinner',
source: '/playground/examples/ui-spinner.html',
},
{
title: 'Menubar',
description: 'Create a menubar with nested menus using Puter.js UI API. Run and experiment with this example directly in the playground.',
slug: 'ui-set-menubar',
source: '/playground/examples/ui-set-menubar.html',
},
],
},
{
title: 'Workers',
children: [
src/docs/src/playground/examples/ui-alert.html
+24
View File
@@ -0,0 +1,24 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
// display an alert with a message and three different types of buttons
puter.ui.alert('Please press a button!', [
{
label: 'Hello :)',
value: 'hello',
type: 'primary',
},
{
label: 'Bye :(',
type: 'danger',
},
{
label: 'Cancel',
},
]).then((resp) => {
puter.print('You pressed: ' + resp);
});
</script>
</body>
</html>
src/docs/src/playground/examples/ui-context-menu.html
+47
View File
@@ -0,0 +1,47 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<div id="right-click-area" style="width: 300px; height: 200px; border: 2px dashed #ccc; padding: 20px; display: flex; align-items: center; justify-content: center; font-family: sans-serif; color: #666;">
Right-click me to show context menu
</div>
<script>
document.getElementById('right-click-area').addEventListener('contextmenu', (e) => {
e.preventDefault();
puter.ui.contextMenu({
items: [
{
label: 'Edit Item',
action: () => puter.print('Edit action triggered'),
},
{
label: 'Copy Item',
action: () => puter.print('Copy action triggered'),
},
'-',
{
label: 'Export',
items: [
{
label: 'Export as PDF',
action: () => puter.print('Exporting as PDF'),
},
{
label: 'Export as JSON',
action: () => puter.print('Exporting as JSON'),
},
],
},
'-',
{
label: 'Delete Item',
action: () => puter.print('Delete action triggered'),
},
],
});
});
</script>
</body>
</html>
src/docs/src/playground/examples/ui-notify.html
+14
View File
@@ -0,0 +1,14 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ui.notify({
title: 'Build finished',
text: 'Your export is ready.',
icon: 'bell.svg',
}).then((uid) => {
puter.print('Notification UID: ' + uid);
});
</script>
</body>
</html>
src/docs/src/playground/examples/ui-prompt.html
+14
View File
@@ -0,0 +1,14 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ui.prompt('Please enter your name:', 'John Doe').then((resp) => {
if (resp === null) {
puter.print('You cancelled the prompt.');
} else {
puter.print('Hello, ' + resp + '!');
}
});
</script>
</body>
</html>
src/docs/src/playground/examples/ui-set-menubar.html
+51
View File
@@ -0,0 +1,51 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<p style="font-family: sans-serif; margin: 20px;">A menubar has been added to the top of this window. Try clicking the menu items.</p>
<script>
puter.ui.setMenubar({
items: [
{
label: 'File',
items: [
{
label: 'New',
action: () => puter.print('New file created'),
},
{
label: 'Open',
action: () => puter.print('Open dialog shown'),
},
{
label: 'Save',
action: () => puter.print('File saved'),
},
],
},
{
label: 'Edit',
items: [
{
label: 'Undo',
action: () => puter.print('Undo'),
},
{
label: 'Redo',
action: () => puter.print('Redo'),
},
],
},
{
label: 'Help',
items: [
{
label: 'About',
action: () => puter.print('Puter.js Playground'),
},
],
},
],
});
</script>
</body>
</html>
src/docs/src/playground/examples/ui-show-color-picker.html
+15
View File
@@ -0,0 +1,15 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<p style="font-family: sans-serif; margin: 20px;">Click the button to pick a color. The background will change to the selected color.</p>
<button id="pick-color" style="padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 20px;">Pick a Color</button>
<script>
document.getElementById('pick-color').addEventListener('click', () => {
puter.ui.showColorPicker().then((color) => {
document.body.style.backgroundColor = color;
puter.print('Selected color: ' + color);
});
});
</script>
</body>
</html>
src/docs/src/playground/examples/ui-show-font-picker.html
+15
View File
@@ -0,0 +1,15 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<h1 id="preview" style="margin: 20px;">A cool Font Picker demo!</h1>
<button id="pick-font" style="padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 20px;">Pick a Font</button>
<script>
document.getElementById('pick-font').addEventListener('click', () => {
puter.ui.showFontPicker().then((font) => {
document.getElementById('preview').style.fontFamily = font.fontFamily;
puter.print('Selected font: ' + font.fontFamily);
});
});
</script>
</body>
</html>
src/docs/src/playground/examples/ui-spinner.html
+16
View File
@@ -0,0 +1,16 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
// show the spinner
puter.ui.showSpinner();
puter.print('Spinner shown. It will hide after 3 seconds...');
// hide the spinner after 3 seconds
setTimeout(() => {
puter.ui.hideSpinner();
puter.print('Spinner hidden!');
}, 3000);
</script>
</body>
</html>