Tags & Organization

#

Tags help you organize and categorize links within your stashes, making it easy to find related content and navigate large collections.

What Are Tags?

#

Tags are short labels you attach to links to categorize them:

Example: In a “Web Development Resources” stash:

• Link to React tutorial → #react, #frontend, #tutorial
• Link to Node.js guide → #nodejs, #backend, #tutorial
• Link to CSS tricks → #css, #frontend, #tips

Adding Tags to Links

#

When Adding a New Link

#

Step 1: Open Add Link Form

#

Click + Add Link on your stash page.

Step 2: Enter Link Details

#

Fill in the URL and let the preview load.

Step 3: Find the Tags Field

#

Look for the Tags input field (usually below the description).

Step 4: Add Tags

#

Type a tag name and press Enter or Comma to add it.

Example:

Type: react → Press Enter → Tag added
Type: frontend → Press Enter → Tag added
Type: tutorial → Press Enter → Tag added

Step 5: Save

#

Click Add Link to save with tags.

When Editing an Existing Link

#

Step 1: Open Link Edit Mode

#

Click the Edit (pencil) icon on the link card.

Step 2: Modify Tags

#

• Add new tags by typing in the tags field
• Remove tags by clicking the X on existing tags
• Use tag suggestions if available

Step 3: Save Changes

#

Click Save Changes to update.

Tag Suggestions

#

Automatic Suggestions

#

As you type, Stashed shows suggestions based on:

• Existing tags in the current stash
• Popular tags you’ve used before
• Common tags across the platform

Using Suggestions

#

1. Start typing a tag name
2. See matching suggestions appear
3. Click a suggestion or use arrow keys + Enter
4. Tag is added automatically

Benefits of Suggestions

#

• Prevents duplicate tags (e.g., react vs React)
• Encourages consistent tagging
• Speeds up tag entry
• Helps discover existing organization

Tag Best Practices

#

✅ Do

#

Be Consistent:

• Use lowercase: react not React
• Pick singular or plural and stick with it: tutorial or tutorials
• Avoid special characters: use frontend not front-end or front_end

Be Specific:

• #typescript is better than #code
• #css-grid is better than #css
• #beginner is better than #easy

Use Multiple Tags:

• Add 2-5 tags per link for good categorization
• Mix broad and specific tags
• Include topic, type, and level

Establish a System: Create a tagging convention for your stashes:

By Topic:

#react #vue #angular #svelte

By Content Type:

#tutorial #documentation #tool #library #example

By Difficulty:

#beginner #intermediate #advanced

By Format:

#video #article #course #cheatsheet #podcast

❌ Don’t

#

Avoid Too Many Tags:

• Don’t add 20+ tags (becomes noise)
• Don’t tag everything
• Don’t create redundant tags

Avoid Inconsistent Naming:

❌ react, React, REACT, reactjs
✅ react

Avoid Vague Tags:

❌ #stuff, #things, #misc, #other
✅ #tools, #resources, #inspiration

Managing Tags

#

Removing Tags from a Link

#

Method 1: Edit Mode

#

1. Click Edit on the link
2. Click the X on the tag you want to remove
3. Save changes

Method 2: Quick Remove (If Available)

#

1. Hover over the tag on the link card
2. Click the X that appears
3. Tag is removed instantly

Renaming Tags

#

Tags can’t be directly renamed, but you can:

Workaround: Replace Tags

#

1. Edit each link with the old tag
2. Remove the old tag
3. Add the new tag
4. Save changes

For many links: Consider if reorganization is worth the effort.

Finding All Links with a Tag

#

Method 1: Click the Tag

#

• Click any tag on a link card
• View filters to show only links with that tag

Method 2: Search (If Available)

#

• Use the search bar
• Type #tagname to filter by tag

Tag Organization Strategies

#

Strategy 1: Hierarchical Tags

#

Use broad and specific tags together:

#programming → #frontend → #react
#design → #ui → #components

Strategy 2: Faceted Tags

#

Tag by multiple dimensions:

Topic: #react #hooks
Type: #tutorial
Level: #intermediate
Format: #video

Strategy 3: Project-Based Tags

#

Organize by project or goal:

#project-portfolio
#project-client-x
#learning-2024

Strategy 4: Action-Based Tags

#

Tag by what to do with the link:

#read-later
#implement-soon
#reference
#inspiration

Tag Display

#

Where Tags Appear

#

On Link Cards:

• Displayed as colorful pills/badges
• Usually at the bottom of the card
• Clickable to filter by that tag

In Different View Modes:

• Grid View: Tags visible on all cards
• List View: Tags in list items
• Compact View: Tags may be truncated
• Masonry View: Tags below images

Tag Styling

#

Tags have:

• Gradient backgrounds — Colorful, visually distinct
• Consistent colors — Same tag = same color
• Rounded corners — Pill-shaped design
• White text — Readable on all backgrounds

Color Coding

#

Tags use deterministic coloring:

• Same tag name = same color always
• Based on hash of tag name
• 10+ different gradient combinations
• Helps visually distinguish tags

Advanced Tag Features

#

Tag Recommendations

#

When adding tags, you may see:

• All existing tags from the current stash
• Recently used tags from other stashes
• Suggested tags based on link content

Bulk Tag Operations (If Available)

#

Some features may include:

• Add tag to multiple links — Select links, add tag to all
• Remove tag from all links — Remove a tag globally
• Export tags — Download tag list

Tag Clouds (If Available)

#

Visual representation of tags:

• Size indicates frequency
• Click to filter
• Shows most-used tags at a glance

Troubleshooting

#

Can’t Add Tags?

#

• Ensure you’re logged in
• Check if you have edit permissions
• Verify the link is saved first
• Refresh the page

Tag Suggestions Not Appearing?

#

• Start typing to trigger suggestions
• Ensure there are existing tags in the stash
• Check your internet connection
• Try adding tags manually

Tags Not Saving?

#

• Click Save after adding tags
• Check for network errors
• Ensure tags don’t violate length limits
• Try removing and re-adding

Too Many Similar Tags?

#

You have duplicates like react, React, reactjs:

• Pick one canonical version
• Edit links to use consistent tag
• Remove duplicate variations

Tag Examples by Use Case

#

Learning Resources

#

#tutorial #beginner #video #javascript #react

Tools & Libraries

#

#tool #library #opensource #productivity #frontend

Inspiration

#

#design #inspiration #ui #portfolio #creative

Reference

#

#documentation #reference #cheatsheet #api #css

News & Articles

#

#article #news #blog #tech #industry

Next Steps

#

Related documentation:

• Adding Links
• View Modes
• Search & Filter (if available)

Quick Reference

#