https://github.com/chuanqisun/vibe-html
A keyboard first mock up editor
https://github.com/chuanqisun/vibe-html
Last synced: 6 months ago
JSON representation
A keyboard first mock up editor
- Host: GitHub
- URL: https://github.com/chuanqisun/vibe-html
- Owner: chuanqisun
- Created: 2025-03-14T23:02:51.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-18T16:50:30.000Z (7 months ago)
- Last Synced: 2025-03-18T17:50:09.804Z (7 months ago)
- Language: JavaScript
- Homepage: https://chuanqisun.github.io/vibe-html/
- Size: 61.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Templates
- [empty.html](./empty.html): A blank template with no elements.
- [vibe.html](./vibe.html): A basic app layout
## Keyboard Shortcuts
| Shortcut | Description |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| ? | Open help |
| Ctrl/Cmd + Z | Undo |
| Ctrl/Cmd + Shift + Z | Redo |
| S | Split selected element |
| Shift + Enter | Select parent element |
| Enter | Select first child element |
| C | Convert `
` or `` to `` |
| R | Convert `` or `` to `` |
| Ctrl/Cmd + D | Duplicate selected element (paste clone before selection) |
| Alt + Shift + ArrowDown | Duplicate selected element (paste clone before selection) |
| Alt + Shift + ArrowUp | Duplicate selected element (paste clone after selection) |
| H | Toggle `hug` attribute on selected element |
| F | Toggle `fill` attribute on selected element |
| W | Toggle `wrap` attribute on selected element (convert to `` if needed) |
| M | Toggle `max` attribute on selected element |
| A | Add child `` element |
| L | Toggle `scroll` attribute on selected element |
| 0 | Unset `fill` attribute |
| 1–4 | Set `fill` attribute to corresponding number |
| G | Group selected elements into a new `` or `` |
| ArrowLeft/ArrowUp | Select previous sibling element |
| ArrowRight/ArrowDown | Select next sibling element |
| Alt + ArrowLeft/ArrowUp | Move selected element up/left |
| Alt + ArrowRight/ArrowDown | Move selected element down/right |
| Tab | Select next element (pre-order traversal) |
| Shift + Tab | Select previous element (reverse pre-order traversal) |
| X | Cut (remove) selected elements |
| I | Toggle `contenteditable="plaintext-only"` (edit mode) |
| Escape | Exit edit mode (remove `contenteditable`) |
## Open Source
Vist [GitHub](https://github.com/chuanqisun/vibe-html)