Last active
May 1, 2026 19:02
-
-
Save subtleGradient/882960a9541f9a0ca9aa7b7790e36d01 to your computer and use it in GitHub Desktop.
Portable App Document — list demo 0
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/env -S bunx --bun -p https://github.com/subtleGradient/pad/archive/refs/tags/list-v0.tar.gz pad | |
| <!-- PAD: list-v0 standalone onboarding list. Run only if you trust this file as local Bun code. --> | |
| <!doctype html> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="color-scheme" content="light dark" /> | |
| <title>list-v0.pad.htm</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/gh/subtleGradient/pad@refs/tags/list-v0/pad.css" | |
| /> | |
| <script | |
| type="module" | |
| src="https://cdn.jsdelivr.net/gh/subtleGradient/pad@refs/tags/list-v0/pad.browser.js" | |
| ></script> | |
| <pad-document> | |
| <pad-stack gap="loose"> | |
| <pad-stack gap="tight"> | |
| <pad-text kind="title" static="">PAD</pad-text> | |
| <pad-text static="">PAD means Portable App Documents: ordinary-looking files that carry a | |
| tiny local app with them. Open a PAD to read it. Run a PAD to use it. | |
| This one teaches the idea by turning itself into an editable autosaving | |
| list.</pad-text> | |
| </pad-stack> | |
| <pad-grid> | |
| <pad-panel> | |
| <pad-text kind="heading" static="">What A PAD Is</pad-text> | |
| <pad-list aria-label="Portable App Documents explanation" role="list"> | |
| <pad-list-item>Portable: you can hand someone this one file.</pad-list-item> | |
| <pad-list-item>App: when trusted and run, it starts a tiny localhost program for | |
| interaction.</pad-list-item> | |
| <pad-list-item>Document: when opened normally, it is still readable HTML.</pad-list-item> | |
| <pad-list-item>This PAD edits list blocks in the browser and saves the changed HTML | |
| back into itself.</pad-list-item> | |
| <pad-list-item></pad-list-item> | |
| </pad-list> | |
| </pad-panel> | |
| <pad-panel> | |
| <pad-text kind="heading" static="">If You Are Nervous</pad-text> | |
| <pad-list aria-label="Trust checklist" role="list"> | |
| <pad-list-item>Good instinct: do not run files from strangers. Read first, then | |
| decide.</pad-list-item> | |
| <pad-list-item>This exact runtime is pinned to the list-v0 Git tag: | |
| https://github.com/subtleGradient/pad/tree/list-v0</pad-list-item> | |
| <pad-list-item>The runner is plain Bun code in pad.shebang.tsx. It serves localhost | |
| only, uses a random URL token, and writes this file when the browser | |
| sends an autosave message.</pad-list-item> | |
| <pad-list-item>The browser behavior is in pad.browser.js. It makes PAD elements | |
| editable only while the local WebSocket is healthy.</pad-list-item> | |
| <pad-list-item>The visual rules are in pad.css. There is no hidden app shell, no | |
| account, and no cloud database.</pad-list-item> | |
| <pad-list-item></pad-list-item> | |
| </pad-list> | |
| </pad-panel> | |
| <pad-panel> | |
| <pad-text kind="heading" static="">How To Run It</pad-text> | |
| <pad-list aria-label="Run steps" role="list"> | |
| <pad-list-item>Save this file somewhere you are comfortable editing files.</pad-list-item> | |
| <pad-list-item>If needed, make it executable with: chmod +x list-v0.pad.htm</pad-list-item> | |
| <pad-list-item>Run it with: ./list-v0.pad.htm</pad-list-item> | |
| <pad-list-item>Your browser should open a localhost URL. The status pill should say | |
| the page is editable and autosaves to the source file.</pad-list-item> | |
| <pad-list-item>If you open the file directly in a browser instead, it stays read-only | |
| and tells you why.</pad-list-item> | |
| <pad-list-item></pad-list-item> | |
| </pad-list> | |
| </pad-panel> | |
| <pad-panel> | |
| <pad-text kind="heading" static="">Try The List</pad-text> | |
| <pad-list aria-label="Practice list" role="list"> | |
| <pad-list-item>Click this item and type over it.</pad-list-item> | |
| <pad-list-item>Press Tab to move to the blank item at the bottom.</pad-list-item> | |
| <pad-list-item>Type into the blank item. A fresh blank item appears below it.</pad-list-item> | |
| <pad-list-item>Clear a trailing item with Backspace. Focus moves back so you can | |
| keep deleting quickly.</pad-list-item> | |
| <pad-list-item></pad-list-item> | |
| </pad-list> | |
| </pad-panel> | |
| <pad-panel> | |
| <pad-text kind="heading" static="">What To Notice</pad-text> | |
| <pad-list aria-label="What to notice" role="list"> | |
| <pad-list-item>The empty item is not a button. It is just the next editable block | |
| waiting for text.</pad-list-item> | |
| <pad-list-item>There is always exactly one empty item at the bottom of each | |
| list.</pad-list-item> | |
| <pad-list-item>When the WebSocket disconnects, the page becomes read-only | |
| immediately and explains what happened.</pad-list-item> | |
| <pad-list-item>After a save, inspect this file again. Your edits are now part of the | |
| HTML source.</pad-list-item> | |
| <pad-list-item><br></pad-list-item> | |
| </pad-list> | |
| </pad-panel> | |
| </pad-grid> | |
| </pad-stack> | |
| </pad-document> |
Author
Author
What A PAD Is
- Portable: you can hand someone this one file.
- App: when trusted and run, it starts a tiny localhost program for interaction.
- Document: when opened normally, it is still readable HTML.
This PAD edits list blocks in the browser and saves the changed HTML back into itself.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Read the shebang program source code here: https://github.com/subtleGradient/pad/blob/list-v0/pad.shebang.tsx
How To Use
./list-v0.pad.htmin your terminal(it's both a document and a program!)