📦 Offline Independence

SiteStitch specializes in saving a complete, active webpage into a single .html file. By embedding all resource content directly into the document, the saved page does not rely on separate folders, sub-directories, or remote internet connections.

How to Save a Webpage:

1. Install the SiteStitch extension from the Chrome Web Store.
2. Click the extension icon in your browser toolbar to capture and stitch the current active page.
3. Wait for the stitching process to finish. The output file will automatically download to your computer.

Filename Customization:

You can customize how output filenames are generated through the Options page. SiteStitch supports dynamic filename templates using variables such as:

• {page-title}: The title of the captured page.
• {date-iso}: The date of the capture (e.g. 2026-07-06).
• {time-locale}: Local system time.
• {url-host}: The hostname of the saved page.

🎨 Design Fidelity

Unlike standard page savers, SiteStitch is engineered to preserve the exact appearance of modern webpages. It handles styling resources that standard tools usually drop.

Key Design Features:

• Shadow DOM Extraction: Captures elements enclosed inside shadow roots (both open and closed), converting them into standard templates upon serialization so the page layout doesn't break.
• Dynamically Injected Stylesheets: SiteStitch tracks stylesheets loaded via JavaScript or dynamic client-side libraries.
• Custom Web Fonts: Font-faces are converted to base64 formats and embedded inline directly inside the document.

No configuration is required—this process is automated. SiteStitch compiles these resources natively during serialization.

🖼️ Media Preservation

Webpages often contain rich interactive media that doesn't save correctly through standard methods. SiteStitch keeps your saved pages media-rich and visually complete.

Supported Media Captures:

• HTML5 Canvas drawings: Captures active 2D/WebGL canvas states, renders them into static PNGs, and embeds them directly.
• Video Poster Frames: Takes screenshots/snapshots of active video elements and injects them as placeholder background poster images.
• Lazy-Loaded Images: Resolves deferred image URLs, loads them, and serializes their images to avoid blank spaces on the saved document.

✍️ Annotation Editor

SiteStitch has a built-in Annotation Editor that allows you to draw, highlight, and write comments on a saved page before or after stitching.

How to Edit and Annotate:

1. Right-click the SiteStitch toolbar icon and select "Add annotations".
2. A toolbar will appear at the top-right of your page. Use the available tools:
   • Highlighter: Highlight text strings in different colors.
   • Note Tool: Place an sticky note container and write comments.
   • Cut Tool: Hide or remove unwanted elements (ads, side panels) from the output.
   • Undo / Redo: Quickly revert or reapply changes.
3. Click the checkmark/save button in the toolbar to capture the annotated version.

Tip: In the Options settings, you can check "Open annotation editor when viewing a page saved with SiteStitch" to easily add notes whenever you reopen your saved pages.

⚙️ Clean Status Panel

When you trigger SiteStitch, a clean, modern status panel displays at the bottom-center of the screen. It keeps you informed of the stitching status without blocking your view.

Visual Indicator Details:

• Progress Logs: Tracks resource loading (scripts, stylesheets, frames) step-by-step.
• Glassmorphic Aesthetic: The panel matches a light-mode styling system with a blurred background backdrop.
• Pulsing Indicator Dot: Blinks to indicate serialization processes are actively running.
• Stitched successfully! ✓: When done, the bottom bar shifts to a green success state, remains visible for exactly 3 seconds to confirm, and then cleanly fades away.

🚀 Cloud Integration

Direct your stitched page outputs to your choice of remote storage destinations automatically.

Configuring Cloud Targets:

1. Right-click the SiteStitch icon and select Options.
2. Navigate to the **Integrations** or **Upload Targets** section.
3. Choose and link your preferred platform:
   • Google Drive / Dropbox: Authorize access to save files straight to your cloud storage account.
   • GitHub: Provide a personal access token and specify a repository to commit saved page files directly.
   • WebDAV: Enter your storage URL and login credentials to upload to self-hosted cloud sync platforms.
   • Model Context Protocol (MCP): Route saved files directly to tools servers running locally or remotely on your system.