mySites User Guide

Version 0.92 | Complete User Documentation

Your personal start page application - by sfarrand.com

Introduction

mySites is a personal start page application that allows you to organize and quickly access your favorite web sites. Built with standard HTML, CSS, and JavaScript, mySites runs entirely in your browser - no server or internet connection required after installation. All page data is stored in your browser's IndexedDB, providing persistent storage that survives browser refreshes and device restarts.

📑 Multiple Pages

Organize your links across 6 pages (Home + 5 category pages) with customizable navigation buttons.

📊 Grid Layout

Each page contains a 13×5 grid (65 cells) for organizing up to 390 total links across all pages.

🔄 Drag & Drop

Easily reorganize cells within a page or move them between pages using intuitive drag-and-drop. Auto-saves changes.

✏️ Easy Editing

Simple edit mode lets you add, modify, or remove URLs and labels with modal dialogs and direct heading editing.

💾 IndexedDB Storage

All page data is stored in your browser's IndexedDB, providing persistent storage that survives browser refreshes.

↩️ Undo Functionality

Restore pages to previous saved states with per-page undo history (up to 5 snapshots per page).

🗑️ Trash (Cell) Delete

Quickly delete cells by dragging them to the trash icon in the footer. Works in any mode.

📥📤 Import/Export

Export and import pages as JSON files for backup, transfer, or sharing. Supports single pages or full system.

🕐 Live Clock

Footer displays current date and time, updating automatically every second.

👤 Profile & Updates

A lightweight mySites profile lets you receive update notifications and manage registration info. You can open it any time from the System Menu.

🖼️ Custom Header Avatar

Default mySites avatar

Right-click the header logo to swap the stock logo for your own avatar or other graphic. The logo manager can save your artwork directly into the images/ folder using the File System Access API, so your custom avatar loads instantly on every visit.

Installation

Download

Download mySites from https://www.sfarrand.com/mysites. You can choose:

Installation Steps

  1. Download the mySites file to a folder of your choice (e.g., Documents, Desktop, or a dedicated folder).
  2. For Windows: Double-click mySites.exe to extract all files.
  3. For Mac/Linux: Extract the mySites.zip file using your system's archive utility.
  4. After extraction, you should see a folder structure similar to: 
    mySites/
├── index.html (single entry point - all pages are virtual)
├── User_Guide.html
├── css/
│   ├── style.css
│   └── themes.css
├── js/
│   ├── scripts.js
│   └── modules/
│       ├── modalService.js
│       ├── sharedUtils.js
│       ├── storageManager.js
│       ├── themeManager.js
│       ├── navMenuManager.js
│       ├── pageEditor.js
│       └── logoManager.js
└── images/
    └── (various image files)

Note: Pages (Home + Pages 1-5) are now virtual pages stored in browser IndexedDB
  5. Double-click index.html to open mySites in your default web browser, or click here to open it now.
Note: mySites is free to use. Donations are always welcome to help support continued development and improvements. Visit https://www.sfarrand.com/payments if you'd like to contribute.

Getting Started

Understanding the Interface

When you first open mySites, you'll see:

Navigation Buttons

The navigation bar at the top includes:

Adding and Editing URLs

Adding URLs to your mySites pages is simple and straightforward. Each cell in the grid can contain a link to a website, email address, file, or any other URL format your browser supports.

Step 1: Enter Edit Mode

  1. Click the Edit graphic icon button in the lower left corner of the footer.
  2. You'll notice that small "hot spot" icons appear in the upper right corner of each cell.
  3. The Edit icon button changes to show the Save icon when in edit mode.

Step 2: Add a URL

  1. Click on the hot spot icon (crosshair cursor) in the cell where you want to add a URL.
  2. A dialog box will appear with two fields:
    • URL: Enter the full web address (e.g., https://www.example.com)
    • Label: Enter a descriptive name for the link (e.g., "Example Website")
  3. Click Done to save the URL to that cell, or Clear to remove it.
  4. Repeat this process for as many cells as you want to populate.

Step 3: Save Your Changes

  1. Once you've added all the URLs you want on the current page, click the Save graphic icon button in the footer.
  2. Your changes are immediately saved to IndexedDB (your browser's local database).
  3. After saving, Edit Mode automatically exits, and your links become "live" - you can click them to navigate to the websites.
  4. Your changes are now persistent and will survive browser refreshes.
💾 Save Tip: All page data is stored in your browser's IndexedDB. This means your changes are automatically saved to your browser's local storage and persist across sessions. You don't need to manage separate HTML files - everything is stored in the database.

Editing Existing URLs

To modify an existing URL or label:

  1. Enter Edit Mode by clicking the Edit graphic icon button in the footer.
  2. Click the hot spot icon (crosshair cursor) on the cell containing the URL you want to edit.
  3. A modal dialog will appear with the current URL and label - modify them as needed.
  4. Click Done to save changes, or press ESC to cancel.
  5. The Edit graphic icon button will turn orange and change to show the Save icon to indicate unsaved changes.
  6. Click the Save graphic icon button to save your changes to IndexedDB.
💾 Save Tip: After editing, click the Save graphic icon button to persist your changes to IndexedDB. The page data is stored in your browser's database, not as separate HTML files.

Removing URLs

To remove a URL from a cell:

  1. Enter Edit Mode.
  2. Click the hot spot icon on the cell.
  3. Click Clear in the dialog box, then Done.
  4. The cell is automatically saved to IndexedDB when cleared (no manual save needed for clear operations).
💾 Save Tip: Clearing a cell automatically saves the change to IndexedDB. You don't need to manually save after clearing cells, but you should save if you've made other edits in the same session.
Important: Always save your page after making changes! If you navigate away without saving, your changes will be lost. The browser will warn you if you try to leave a page with unsaved changes while in Edit Mode.

Editing Navigation Buttons and Column Headings

Customizing Navigation Button Labels

By default, navigation buttons are labeled "Page1", "Page2", etc. You can customize these to represent the category of links on each page (e.g., "Work Sites", "Streaming", "Social Media").

Changing Navigation Button Labels

  1. Enter Edit Mode by clicking the Edit graphic icon button in the footer.
  2. Click directly on the navigation button you want to rename (e.g., "Page1").
  3. A modal dialog will appear with the current button label pre-filled.
  4. Type your desired label (e.g., "Streaming Sites").
  5. Click Done or press ESC to cancel.
  6. The button label is updated immediately, and the page is marked as needing save.
  7. Click the Save graphic icon button to persist the change to IndexedDB.
💾 Save Tip: Navigation button labels are stored per-page in IndexedDB. Each page can have its own label for each navigation button. After changing a label, click the Save graphic icon button to persist the change.
Note: Navigation button labels are stored per-page. This means you can have different labels for the same button on different pages if desired. For example, "Page1" might be labeled "Work" on the Home page but "Personal" on Page2.

Customizing Column Headings

Each page has 5 column headings (Heading 1, Heading 2, etc.) that you can customize to represent subcategories (e.g., "News", "Tools", "Entertainment").

Changing Column Headings

  1. Enter Edit Mode by clicking the Edit graphic icon button in the footer.
  2. Click directly on the column heading you want to change (e.g., "Heading 1").
  3. The heading text will become editable - no dialog box appears for this.
  4. Type your new heading name directly.
  5. Click elsewhere or press Enter to finish editing that heading.
  6. Repeat for other column headings as needed.
  7. The Edit graphic icon button will turn orange and change to show the Save icon to indicate unsaved changes.
  8. Click the Save graphic icon button to save your changes to IndexedDB.
💾 Save Tip: Column headings are stored per-page in IndexedDB. After editing headings, click the Save graphic icon button to persist your changes. Each page can have its own unique column headings.

Edit Mode Overview

When you click the Edit graphic icon button, you enter Edit Mode, which allows you to:

You can perform all these actions in a single Edit Mode session. The Edit graphic icon button turns orange and changes to show the Save icon when you have unsaved changes. Click the Save graphic icon button to persist your changes to IndexedDB.

Note: Column headings can be edited directly by clicking on them - no modal dialog appears. Just click the heading, type your new text, and press Enter or click elsewhere to finish editing.

Drag and Drop Functionality

One of the most powerful features of mySites is the ability to reorganize cells using drag and drop. You can move cells within the same page or even between different pages!

Drag and Drop Basics

Drag and drop works in both Edit Mode and normal viewing mode, making it easy to reorganize your links at any time. Changes are automatically saved to IndexedDB after drag and drop operations complete.

Moving Cells on the Same Page

  1. Click and hold on a cell that contains content (a link).
  2. Drag the cell to a different cell on the same page.
  3. Release the mouse button to drop the cell.
  4. The two cells will swap positions automatically.
  5. The page is automatically saved to IndexedDB after the swap completes.
  6. You'll notice the Edit button may briefly show as Save (orange) if there are other unsaved changes, but drag-and-drop operations are saved automatically.

Cross-Page Drag and Drop

You can also move cells between different pages - perfect for reorganizing your links across categories!

Moving Cells Between Pages

  1. Click and hold on a cell containing content on the source page.
  2. While holding, drag the cell over a navigation button for the destination page (e.g., "Page2").
  3. The navigation button will highlight to show it's ready to receive the drag.
  4. Release the mouse button while over the navigation button.
  5. mySites will automatically navigate to the destination page.
  6. On the new page, you'll see a message: "Click on a cell to place the dragged content here".
  7. Click on any cell where you want to place the content.
  8. Your content moves to the target cell on the new page, and the source cell becomes empty (this is a move operation, not a swap).
  9. Both pages are automatically saved to IndexedDB after the move completes.
Tip: When moving cells between pages, the system performs a "move" operation. The content moves to the target cell, and the source cell becomes empty. This is different from same-page drags, which swap content.

Deleting Cells with Trash

You can delete cells by dragging them to the trash icon in the footer.

Deleting a Cell

  1. Click and hold on a cell containing content.
  2. Drag the cell over the trash icon in the footer (next to the Undo button).
  3. The trash icon will highlight to show it's ready to receive the drag.
  4. Release the mouse button while over the trash icon.
  5. The cell content is immediately cleared and the page is automatically saved.
  6. This works for cells on the current page or cells being dragged from other pages.

Drag and Drop Features

Drag and Drop Limitations

Note: Drag and drop operations are automatically saved to IndexedDB. You don't need to manually save after drag and drop, but you may want to save if you've made other changes in Edit Mode.

Saving and Managing Pages

Understanding the Save Process

mySites uses IndexedDB (a browser database) to store all page data. When you click the Save graphic icon button, your changes are saved directly to IndexedDB - no file download required. All pages are stored as virtual pages in the database.

How to Save

  1. After making changes in Edit Mode, click the Save graphic icon button in the footer.
  2. Your changes are immediately saved to IndexedDB.
  3. The Save icon button returns to show the Edit icon and Edit Mode exits automatically.
  4. Your changes are now persistent and will survive browser refreshes.
💾 Save Tip: All page data is stored in your browser's IndexedDB. This means your changes are automatically saved to your browser's local storage and persist across sessions. You don't need to manage separate HTML files - everything is stored in the database.

Unsaved Changes Indicators

mySites helps you keep track of which pages have unsaved changes:

Saving After Drag and Drop

Drag and drop operations are automatically saved to IndexedDB:

Important: Changes made in Edit Mode (editing URLs, labels, headings, or nav buttons) must be manually saved by clicking the Save graphic icon button. Drag and drop operations are automatically saved.

Best Practices for Saving

Undo Functionality

mySites includes a powerful Undo feature that allows you to restore a page to its previous saved state.

How Undo Works

The Undo graphic icon button (located in the footer next to the Edit/Save button) restores the current page to its most recent saved state. Each page maintains its own independent undo history.

Using Undo

  1. Click the Undo graphic icon button in the footer.
  2. If undo history exists for the current page, the page is restored to its previous saved state.
  3. The page grid is immediately re-rendered with the restored data.
  4. The Undo button becomes disabled if no more history is available for that page.

Undo History Details

Undo Button States

Tip: Undo only works for pages that have been saved at least once. If you've never saved a page, or if you've cleared the history, the Undo button will be disabled for that page.

Clearing Undo History

You can clear all undo history for all pages using the Global Menu:

  1. Click the hamburger menu (☰) in the header.
  2. Select Clear Undo History under the Site Data section.
  3. Confirm the action - this will remove all saved snapshots and disable Undo for all pages until new saves occur.
Important: Clearing history permanently removes all undo snapshots. Consider exporting your pages as a backup before clearing history.

Trash (Delete) Functionality

You can delete cells by dragging them to the Trash graphic icon button in the footer.

Deleting Cells

How to Delete a Cell

  1. Click and hold on a cell that contains content (a link).
  2. Drag the cell over the Trash graphic icon button in the footer (located next to the Undo button).
  3. The trash icon will highlight to show it's ready to receive the drag.
  4. Release the mouse button while over the trash icon.
  5. The cell content is immediately cleared (URL and label removed).
  6. The change is automatically saved to IndexedDB.

Trash Features

Tip: You can also clear cells by entering Edit Mode, clicking the hot spot, and clicking "Clear" in the dialog. Both methods work and automatically save the change.
Note: The Trash graphic icon button is always visible in the footer, making it easy to delete cells at any time without entering Edit Mode.

Import and Export Functionality

mySites allows you to export and import page data as JSON files. This is useful for backing up your pages, transferring data between devices, or sharing page configurations.

Accessing Import/Export

All import and export functions are accessed through the Global Menu (hamburger icon ☰) in the header:

  1. Click the hamburger menu icon (☰) in the top-right corner of the header.
  2. A dropdown menu appears with several sections.
  3. Use the options under "Page" for single-page operations, or "Full System" for all pages.

Export Options

Export Current Page

  1. Open the Global Menu (☰).
  2. Click Export Page under the "Page" section.
  3. A JSON file is automatically downloaded with a filename like mySites-export-PageName_YYMMDD-HHMMSS.json.
  4. The file contains all data for the current page: links, headings, and navigation button label.

Export (Backup) - All Pages

  1. Open the Global Menu (☰).
  2. Click Export (Backup) under the "Full System" section.
  3. A JSON file is automatically downloaded with a filename like mySites-export-system_YYMMDD-HHMMSS.json.
  4. The file contains all data for all pages (Home + Pages 1-5).

Import Options

Import Current Page

  1. Open the Global Menu (☰).
  2. Click Import Page under the "Page" section.
  3. Select a JSON file that was previously exported from mySites.
  4. A dialog appears asking you to choose which page to import the data into.
  5. Select the target page (you can import into any page, not just the current one).
  6. Confirm the import - this will overwrite all data on the target page.
  7. The imported data replaces all content on the target page.

Import All Pages

  1. Open the Global Menu (☰).
  2. Click Import under the "Full System" section.
  3. Confirm that you want to import - this will overwrite every page in mySites.
  4. Select a JSON file that contains a full system export.
  5. All pages are imported and overwritten with the data from the file.

Import/Export Features

Important: Import operations overwrite existing data. Always export your pages as a backup before importing, especially when using "Import All".
Backup Tip: Regularly export all pages as a backup. The "Export (Backup)" feature creates a single file containing all your pages, making it easy to restore everything if needed.

Export File Format

Export files contain the following structure:

Note: Export files are standard JSON and can be opened in any text editor. However, be careful when editing them manually - invalid JSON will cause import to fail.

Themes & Appearance

mySites ships with ten color themes (Default, Ocean, Forest, Sunset, Midnight, Rose, Slate, Teal, Amber, and Lavender). Themes are applied instantly and the selection is saved to localStorage (per browser) so the correct palette loads before the interface renders, eliminating flashes of unstyled content.

Changing Themes

  1. Open the system menu (☰) and expand Themes ▸ under the Settings section.
  2. Click any theme button to apply it immediately.
  3. Close the menu—the chosen theme remains active across reloads and devices that share the same browser profile.
Midnight Theme Enhancements: Midnight now features a deeper background, brighter heading row, and distinct visited/unvisited link colors. Search and AI engine buttons use darker text so they remain readable against the high-contrast buttons you requested.

When a page is empty, an onboarding tooltip appears above the Edit button to highlight how to add links or import data. The tooltip automatically disappears after you add your first link or dismiss it.

Profile & Registration

Recent versions of mySites include a lightweight profile so you can be notified of updates and manage your registration details. Your page content (links, headings, and layout) is still stored locally in IndexedDB; the profile is separate from your saved pages.

First-Run Gate (New Browser / New Profile)

On a new browser profile, mySites may show a Welcome to mySites overlay with an embedded registration page. Completing the registration marks this browser as registered so you won’t be prompted again on future visits from the same browser profile.

Open Profile from the System Menu

  1. Click the hamburger menu (☰) in the header.
  2. Under Settings, click Profile….
  3. An overlay opens with the embedded registration page. If you are already registered, it opens directly in “manage profile” mode.
  4. Close the overlay using the × button in the upper right when you’re done.
Note: Registration completion is tracked locally in your browser (so different browsers/devices will prompt separately). Your mySites pages are unaffected by profile changes.

Search & AI Engine Buttons

The two buttons at the end of the navigation bar are shortcuts to your preferred search engine and generative AI assistant. They double as selectors so you can change providers without digging into settings.

Change Your Default Engines

  1. Left-click a button to open its current provider in a new tab.
  2. Right-click the button to open the inline picker.
  3. Choose an option (Google, Bing, Brave, DuckDuckGo for Search; ChatGPT, Copilot, Gemini, Claude, Grok, Perplexity for AI). The label updates immediately and the choice is saved to localStorage.
Heads-up: mySites closes the picker automatically if you click outside it or press ESC, mirroring the behavior of the other custom dialogs.

Tips & Tricks

Supported URL Types

mySites supports all URL types that your browser recognizes:

Tip: Use file:// URLs to create quick links to frequently accessed files on your computer, like documents, spreadsheets, or applications with specific files loaded.

Setting mySites as Your Start Page

Make mySites your browser's start page for instant access to all your links:

  1. Open your browser's settings.
  2. Find the "On startup" or "Home page" section.
  3. Set it to open a specific page or set of pages.
  4. Enter the full path to your index.html file (e.g., file:///C:/Users/YourName/Documents/mySites/index.html).

New Tab Extension

Modern browsers (Chrome, Edge) don't always allow setting a custom new tab page directly. Use the "New Tab Redirect" extension:

  1. Install the New Tab Redirect extension.
  2. Configure it to point to your index.html file.
  3. Now every new tab will open your mySites page!

Custom Logo Quick Tip

Right-click the header logo to open the custom logo popover. From there you can grant folder access, upload a PNG/JPG (under 1 MB), or reset to the default icon without touching the underlying files.

Organizing Your Links

Here are some ideas for organizing your 390 available link slots:

Keyboard Shortcuts

Troubleshooting

Links Don't Work After Saving

Drag and Drop Doesn't Work

Changes Don't Save

Supported Browsers

mySites has been tested and works with:

mySites uses standard web technologies and should work in any modern browser that supports HTML5, CSS3, and JavaScript.

Support and Feedback

For questions, bug reports, or feature suggestions, please contact:

Email: support@sfarrand.com

Website: https://www.sfarrand.com/mysites

Donations: https://www.sfarrand.com/payments