| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
This repository is a small set of standalone HTML demos built for HTML to App.
HTML to App lets you turn an HTML file or folder into a native macOS app bundle. You can use it to package offline tools, media viewers, internal utilities, dashboards, launchers, and file-driven apps without rewriting them in AppKit or SwiftUI.
Generated apps can be configured with Open With settings so macOS sends matching files or folders into the app. In the page JavaScript, the launcher provides launch items through:
For file-backed apps, this makes it possible to build viewers, players, and editors that react to real Finder-opened content instead of only loading bundled assets.
HTML to App can also auto-detect recommended Open With settings and app permissions from your main HTML file. Add this in the document <head>:
<meta name="htmltoapp:open-with" content="role=viewer; files=jpg,jpeg,png; folders=true; permissions=camera">Supported keys:
When someone browses that HTML source in HTML to App, the app can automatically enable Open With, prefill the role, file extensions, and files/folders options, and preselect requested app permissions in Advanced Settings.
window.HTMLtoApp.runtime reports whether the exported app is configured as a viewer or editor, and whether write-back is available:
window.HTMLtoApp.fs accepts either a launch item object, a folder entry object, or an opened-item id string. Read methods work in both viewer and editor mode. Mutating methods only work when Open With is enabled and the role is editor.
<script>
const launchItems = (window.HTMLtoApp && window.HTMLtoApp.launchItems) || [];
const runtime = (window.HTMLtoApp && window.HTMLtoApp.runtime) || {};
async function openFirstTextFile() {
const fileItem = launchItems.find((item) => !item.isDirectory);
if (!fileItem) return;
const opened = await window.HTMLtoApp.fs.readText(fileItem.id);
editor.value = opened.text;
}
async function saveBackToOpenedFile() {
const fileItem = launchItems.find((item) => !item.isDirectory);
if (!fileItem || !runtime.canWriteBack) return;
await window.HTMLtoApp.fs.writeText(fileItem.id, editor.value);
}
async function createNoteInOpenedFolder() {
const folderItem = launchItems.find((item) => item.isDirectory);
if (!folderItem || !runtime.canWriteBack) return;
await window.HTMLtoApp.fs.createDirectory(folderItem.id, "Drafts");
await window.HTMLtoApp.fs.writeText(folderItem.id, "# New note\n", "Drafts/today.md");
}
</script>Available methods:
Notes:
Generated apps can pass notification requests from local HTML to native macOS notifications. This is local notification passthrough from the exported app, not APNs or server-delivered remote push. Use the standard browser-style Notification API:
<script>
async function sendNotification() {
if (!("Notification" in window)) return;
const permission = await Notification.requestPermission();
if (permission !== "granted") return;
new Notification("HTML to App", {
body: "This notification was sent from local HTML.",
tag: "html-to-app-demo"
});
}
</script>Generated apps can also control their Dock badge from JavaScript. On macOS, Dock badge visibility is tied to notification authorization for the generated app, so request notification permission before enabling badge controls in your UI:
<script>
const appBridge = window.HTMLtoApp;
async function updateDockBadge(value) {
const permission = "Notification" in window
? await Notification.requestPermission()
: "denied";
if (permission !== "granted") return;
if (appBridge && typeof appBridge.setBadge === "function") {
appBridge.setBadge(value);
}
}
function clearDockBadge() {
if (appBridge && typeof appBridge.clearBadge === "function") {
appBridge.clearBadge();
}
}
updateDockBadge("3");
</script>Badge values are strings, so you can use numbers, short labels, or clear the badge when there is no active state to show. If permission is denied, keep both notification and Dock badge controls disabled or show the user where to re-enable notifications in System Settings. The bridge namespace is exactly window.HTMLtoApp.
Generated apps can create a menu bar icon from JavaScript. The native launcher asks JavaScript for the menu each time the icon is clicked, so the page can rebuild the menu from current state before the popup appears. Menu items support separators, checked state, toggle callbacks, and recursive submenus.
<script>
const appBridge = window.HTMLtoApp;
let paused = false;
appBridge?.menuBar?.setIcon({
title: "TA",
tooltip: "Task Agent",
imagePosition: "left",
closeToMenuBarOnWindowClose: true
});
appBridge?.menuBar?.setBadge("4");
appBridge?.menuBar?.setMenu(() => [
{ id: "open", title: "Open Window" },
{ type: "separator" },
{ id: "paused", title: "Paused", checked: paused, toggle: true },
{
title: "Queues",
submenu: [
{ id: "inbox", title: "Inbox" },
{ id: "done", title: "Done" }
]
},
{ type: "separator" },
{ id: "quit", title: "Quit" }
]);
appBridge?.menuBar?.onItemClick((event) => {
if (event.id === "open") appBridge.showWindow();
if (event.id === "paused") paused = event.checked;
if (event.id === "quit") appBridge.quit();
});
</script>The generated app icon is shown by default. If title is also set, the status item shows icon and title together; use imagePosition: "left" or imagePosition: "right" to choose the side. Set imageVisible: false for a text-only menu bar item. Menu bar badges draw on the image icon and are not appended to text-only titles.
Use window.HTMLtoApp.setWindowTitle(title) to control the native window title. window.HTMLtoApp.showWindow(), window.HTMLtoApp.hideWindow(), and window.HTMLtoApp.quit() are useful from menu item callbacks. Only expose window hide/show controls when a menu bar item exists, so the user has a visible way to restore the app. Use window.HTMLtoApp.menuBar.hideIcon() or menuBar.configure({ visible: false }) to remove the menu bar item and let the user start the menu bar flow again. When closeToMenuBarOnWindowClose is enabled and the menu bar icon is visible, closing the generated app window hides the window and Dock icon while the WebView keeps running; the app shows a one-time native message explaining that it is still running in the menu bar.
Each example below is a single HTML file you can package with HTML to App.
Local gallery viewer for images opened from Finder or from a folder.
Recommended Open With setup:
Canvas app for drawing rectangles, circles, arrows, lines, and labels. It can also use an opened image as the background.
Recommended Open With setup:
Text editor that opens Finder-selected files as text, saves directly back to the opened file, and can create or remove files and folders when launched on a folder.
Recommended Open With setup:
Local video player with playlist-style navigation for one file or a whole folder.
Recommended Open With setup:
Simple local audio player with queue support for tracks or album folders.
Recommended Open With setup:
Live camera viewer with device switching, mirroring, framing guides, still capture, and offline snapshots.
Recommended Open With setup:
Demonstrates native notification passthrough from local HTML and Dock badge control from JavaScript after notification permission is granted.
Recommended Open With setup:
Demonstrates JavaScript-controlled menu bar icons, image-plus-title placement, per-popup dynamic menu regeneration, status item and menu item callbacks, toggled items, recursive submenus, menu bar badges, hiding/removing the menu bar item, background menu bar behavior, and native window title control.
Recommended Open With setup:
Mixed-media folder browser for quickly previewing assets such as images, video, audio, and text files.
Recommended Open With setup:
Made for HTML to App.
| Back | FazBrowse Home | New Git URL |