Documentation

Welcome to SnippetHub, your command center for managing and expanding your clipboard! SnippetHub helps you store, organize, and quickly access frequently used text, code, and rich content directly within your Chrome browser.

Table of Contents

  1. Getting Started
  2. The SnippetHub Interface
  3. Managing Snippets
  4. Organizing with Folders
  5. Searching and Filtering
  6. Command Palette
  7. Analytics Dashboard
  8. Customization
  9. Account Management
  10. Data Management (Import/Export)
  11. Keyboard Shortcuts
  12. Troubleshooting

1. Getting Started

After installing SnippetHub from the Chrome Web Store, pin the extension to your toolbar for easy access.

First-time setup:

  1. Click the SnippetHub icon in your Chrome toolbar.
  2. You will be prompted to sign in. SnippetHub supports Google Sign-In and Email/Password authentication.
  3. Once signed in, you’ll see the main SnippetHub interface, ready for you to add your first snippet!

2. The SnippetHub Interface

The SnippetHub side panel is divided into several key areas:

  • Top Bar: Contains the SnippetHub logo and your user avatar. Clicking your avatar opens a dropdown menu with account options, data management tools, and settings.
  • Search Bar: Quickly search your snippets by title, tags, or content.
  • Active Filters: Displays any active search queries or folder filters. You can clear them directly from here.
  • Main View/Snippet List: This is where all your snippets are displayed. You can expand/collapse individual snippets or use the “Expand All/Collapse All” button.
  • Folder and Sort Controls: Located above the snippet list, these allow you to filter snippets by folder and change the sorting order.
  • Add Button: At the bottom, click “Add” to open the snippet creation form.
  • Modals & Overlays: Various pop-up windows for confirmations, password resets, and the Command Palette.
  • Toast Notifications: Small pop-up messages at the bottom of the screen to provide feedback on actions (e.g., “Snippet saved”).

3. Managing Snippets

Adding a New Snippet

  1. Click the Add button at the bottom of the main view.
  2. Enter a Snippet Title.
  3. Type or paste your content into the rich text editor (powered by Quill.js). You can format text, add links, and code blocks.
    • Placeholders:
      • {{cursor}}: When inserting text into an editor using a keyword (see below), the cursor will be placed at this exact spot.
      • {{clipboard}}: When copying a snippet, this placeholder will be replaced with the current content of your system clipboard.
  4. Optionally, add a Keyword (e.g., ;sig). If you type this keyword followed by a space or Enter in any standard input field (like a text area or email composer), SnippetHub will automatically replace it with your snippet content.
    • Important: Keywords must start with a semicolon (;).
    • If you assign a keyword that’s already in use by another snippet, you’ll be prompted to reassign it, removing it from the old snippet.
  5. Optionally, assign a Category and Tags (comma-separated) for better organization and filtering.
  6. Optionally, select an existing Folder for the snippet.
  7. Click Save Snippet.

Editing a Snippet

  1. Hover over the snippet you wish to edit in the snippet list.
  2. Click the More Actions (three dots) button on the right side of the snippet header.
  3. Select Edit.
  4. The snippet form will open, pre-filled with the snippet’s details. Make your changes.
  5. Click Save Snippet.

Cloning a Snippet

  1. Hover over the snippet you wish to clone.
  2. Click the More Actions (three dots) button.
  3. Select Clone.
  4. A new snippet form will open with the cloned content and ” (Copy)” appended to the title.
  5. Modify as needed and click Save Snippet.

Deleting a Snippet

  1. Hover over the snippet you wish to delete.
  2. Click the More Actions (three dots) button.
  3. Select Delete.
  4. Confirm the deletion when prompted.

Favoriting a Snippet

  1. Click the Star icon in the snippet header to toggle its favorite status.
  2. Favorited snippets appear at the top of the list when sorted by “Default”.

Copying Snippets

  • From the SnippetHub Panel:
    1. Click the Clipboard icon in the snippet header.
    2. The snippet’s text content (with placeholders processed) will be copied to your clipboard. A “Copied!” toast notification will appear.
  • Using Keywords (In any input field):
    1. If a snippet has a keyword (e.g., ;mysig), simply type that keyword followed by a space or Enter into any compatible text input field (like an email body or a text area on a webpage).
    2. The keyword will instantly be replaced by your snippet’s content.

Reordering Snippets (Drag & Drop)

  1. Ensure your snippets are sorted by Default (this is the only sort method that allows drag & drop reordering).
  2. Click and drag a snippet from its header area.
  3. Drag it to your desired position within the list. A dashed border will indicate the drop target.
  4. Release the mouse button to drop the snippet. Its new order will be saved automatically.

4. Organizing with Folders

Folders help you categorize and manage your snippets more effectively.

Creating a New Folder

  1. Click the Folder Actions (three dots) icon next to the folder select button.
  2. Select New Folder.
  3. Enter a name for your new folder and press Enter or click OK.

Moving Snippets to a Folder

  1. Hover over the snippet you wish to move.
  2. Click the More Actions (three dots) button.
  3. Hover over Move to Folder to reveal a sub-menu.
  4. Select the desired folder from the list. You can also select “No Folder” to remove it from any folder.

Viewing Snippets by Folder

  1. Click the Folder Select button (which usually says “Show All” or the current folder name).
  2. Choose the folder you want to view from the dropdown list.
  3. The snippet list will update to show only snippets within that folder.

Renaming a Folder

  1. First, select the folder you want to rename using the Folder Select button.
  2. Click the Folder Actions (three dots) icon.
  3. Select Rename Folder.
  4. Enter the new name for the folder.
    • Note: Renaming a folder will update all snippets currently assigned to that folder.
    • You cannot rename the “Show All” view.
  5. Click OK.

Deleting a Folder

  1. First, select the folder you want to delete using the Folder Select button.
  2. Click the Folder Actions (three dots) icon.
  3. Select Delete Folder.
  4. Confirm the deletion.
    • Warning: Deleting a folder will move all snippets contained within it to “No Folder”. The snippets themselves will not be deleted.
    • You cannot delete the “Show All” view.

5. Searching and Filtering

Use the Search Input at the top of the panel to quickly find snippets.

  • Type any part of a snippet’s title, category, tags, or content to filter the list.
  • The search results will highlight the matching terms.
  • To clear the search, click the X icon in the search bar or delete your query.
  • Active Filter Pills: When a search query or folder is selected, a “pill” appears below the search bar indicating the active filter. Click the “X” on the pill to clear that specific filter.

6. Command Palette

The Command Palette allows you to quickly execute actions or navigate SnippetHub using just your keyboard.

  1. Press Ctrl+Shift+P (Windows/Linux) or Command+Shift+P (Mac) to open the Command Palette.
  2. Start typing to search for commands (e.g., “new snippet”, “export”, “dark theme”, “sort by title”).
  3. Use Arrow Up/Down to navigate the results.
  4. Press Enter to execute the selected command.
  5. Press Esc to close the Command Palette.

7. Analytics Dashboard

The Analytics Dashboard provides insights into your snippet usage.

  1. Click your user avatar in the top right corner.
  2. Select Analytics Dashboard.
  3. Here you can view:
    • Total Snippets
    • Total Uses (how many times your snippets have been copied)
    • Estimated Characters Saved
    • Estimated Time Saved
    • A Leaderboard of your most used snippets.
  4. Click the X icon in the dashboard header to return to your snippets.

8. Customization

Changing Themes

  1. Click your user avatar in the top right corner.
  2. Under Settings, find the Change Theme section.
  3. Select your desired theme (Default Light, Default Dark, Solarized, Monokai).
  4. The theme will apply instantly and be saved for future sessions.

Customizing Category Colors

You can assign unique accent colors to your snippet categories. These colors will appear as a subtle accent bar at the top of each snippet card.

  1. Click your user avatar in the top right corner.
  2. Under Settings, select Customize Colors.
  3. A modal will appear, listing all categories you currently use.
  4. Click the color picker next to each category to choose a new color.
  5. Click Save to apply and store your custom colors.

9. Account Management

SnippetHub uses Firebase for secure user authentication, allowing you to sync your snippets across multiple devices where you’re logged into Chrome with the same account.

Signing In

  • Sign In with Google: Click the “Sign In with Google” button on the sign-in screen. This will open a Google authentication pop-up.
  • Sign In with Email: Enter your email and password in the respective fields on the sign-in screen and click “Sign In with Email”.

Signing Up with Email

  1. On the sign-in screen, enter your desired email and a password (minimum 6 characters) in the Email and Password fields.
  2. Click the “Create Account” button.

Forgot Password

  1. On the sign-in screen, click the “Forgot Password?” link.
  2. Enter your email address in the modal that appears.
  3. Click “Send Reset Link”. A password reset email will be sent to your inbox.

Changing Password

This option is available only for users who signed up with Email/Password.

  1. Click your user avatar in the top right corner.
  2. Under Account Security, select Change Password.
  3. Enter your current password, then your new password (minimum 6 characters).
  4. Click Change Password.

Signing Out

  1. Click your user avatar in the top right corner.
  2. Select Sign Out.
    • Note: Signing out will clear your local snippets and require you to sign in again to access them.

Deleting Your Account

WARNING: This action is irreversible and will permanently delete all your snippets, folders, and custom colors associated with your account from Firebase.

  1. Click your user avatar in the top right corner.
  2. Under Account Security, select Delete Account.
  3. A confirmation modal will appear. Read the warning carefully.
  4. To proceed, you must type “DELETE MY ACCOUNT” (case-sensitive) into the first field and re-enter your account email into the second field.
  5. Click Delete Permanently.

10. Data Management (Import/Export)

SnippetHub allows you to export your data for backup or to transfer it, and import data from a previously exported JSON file.

Exporting Snippets

  1. Click your user avatar in the top right corner.
  2. Under Data Management, select Export to JSON….
  3. Your browser will download a snippets.json file containing all your snippets, folders, and category colors.

Importing Snippets

  1. Click your user avatar in the top right corner.
  2. Under Data Management, select Import from JSON….
  3. A file dialog will open. Select your snippets.json file (or a compatible JSON file).
  4. Important Notes on Importing:
    • Existing snippets will not be overwritten based on ID. New IDs will be generated for imported snippets if they conflict or don’t have one.
    • If imported snippets have keywords that conflict with your existing snippets, the imported keywords will be renamed (e.g., mykey becomes mykey_1). A text file summarizing these renames will be downloaded after import.
    • Folders and Category Colors from the imported file will be merged with your existing ones.

11. Keyboard Shortcuts

  • Open Command Palette: Ctrl+Shift+P (Windows/Linux) or Command+Shift+P (Mac)
  • Navigate Command Palette Results: Arrow Up, Arrow Down
  • Execute Command Palette Item: Enter
  • Close Command Palette / Modals: Esc
  • Trigger Snippet Keyword: Type the keyword followed by Space or Enter (in compatible input fields)

12. Troubleshooting

  • Snippets not appearing after sign-in: Ensure you have an active internet connection. If the issue persists, try signing out and signing back in.
  • Keywords not working:
    • Ensure the keyword starts with a semicolon (;).
    • Verify you are typing the exact keyword followed by a space or Enter.
    • Check if the target input field is a standard text input (<input>,<textarea>) or a rich text editor (like Gmail’s compose box).
    • Confirm you are signed into SnippetHub.
  • Cannot upload avatar: (Note: Avatar upload feature is currently commented out in the provided code, so this section would be removed in final documentation). If this feature were enabled, ensure your image file is a supported format (e.g., JPG, PNG) and within size limits.
  • Copying fails: Ensure your browser grants clipboard permissions to the extension. Try restarting Chrome if issues persist.
  • “Extension context invalidated” errors: This can sometimes happen with browser updates or prolonged inactivity. Often resolved by restarting Chrome or re-enabling the extension.
  • Unsaved changes warning: If you see “You have unsaved changes. Are you sure?” when trying to close the snippet form, it means you’ve modified the title or content without saving. Click “Save Snippet” to keep your changes, or “Cancel” to discard them.