Skip to main content

Personal Anime Lists

Keep track of your anime journey with customizable collections. Organize what you’re watching, plan your next binge, and celebrate your completed series.

Multiple Lists

Organize anime across four different collection types

Quick Add

Add anime to your collections with one click

Progress Tracking

See your watching progress at a glance

Cloud Sync

Your collections sync across all devices

Collection Types

AniDev provides four built-in collection categories to organize your anime:
Your watchlist of anime you plan to watch. Add series you’re interested in to keep them organized and easily accessible.Icon: Bookmark icon
Default: Selected by default

Managing Your Collections

1

Create an Account

Sign up for AniDev to start building your collections. Collections require authentication to sync across devices.
2

Add Anime to Collections

Click the bookmark/collection button on any anime card or detail page to add it to a collection.
3

Choose Collection Type

Select which list to add the anime to: To Watch, Collection, Completed, or Watching.
4

View Your Collections

Navigate to /collection/{collection-type} or access from your profile to view and manage your lists.
Collections are tied to your user account and require authentication. Make sure you’re signed in to access this feature.

Adding Anime to Collections

There are multiple ways to add anime to your collections:

From Anime Details Page

  1. Open any anime’s detail page
  2. Click the collection/bookmark button
  3. Select which list to add it to
  4. Confirmation toast appears

From Search Results

  1. Hover over any anime card in search results
  2. Click the quick-add button
  3. Anime is added to your default collection

While Watching

  1. Watch any episode
  2. Anime is automatically added to “Watching” list
  3. Progress is tracked automatically
Anime you’re actively watching are automatically added to your “Watching” collection when you start an episode.

Viewing Your Collections

Access your collections from:
  • Profile Page: See an overview of all collections
  • Collection Pages: View specific lists at /collection/{type}
  • Navigation Menu: Quick access from the main navigation

Collection Display

Each collection shows:
  • Anime Cards: Visual grid of your anime
  • Episode Count: Total episodes for each series
  • Status: Airing status and your watch progress
  • Quick Actions: Play next episode, remove from collection
  • Sort Options: Order by recently added, alphabetical, rating

Collection Data Structure

Collections are stored with the following information:
interface Collection {
  title: string           // Collection name (e.g., "To Watch")
  query: string          // Database query identifier
  animes_ids: number[]   // Array of anime MAL IDs
}

interface WatchList {
  id: string             // Unique collection entry ID
  user_id: string        // User's unique ID
  anime_id: string       // Anime MAL ID
  type: string           // Collection type
  // ... plus all anime card info (title, image, etc.)
}

Managing Collection Items

Remove from Collection

  1. Navigate to the collection containing the anime
  2. Click the remove/trash button on the anime card
  3. Confirm removal if prompted
  4. Anime is removed from that specific collection

Move Between Collections

  1. Remove anime from current collection
  2. Add it to the new collection
  3. Or use the “Move to” option if available
Yes! The same anime can exist in multiple collections. For example, you might have an anime in both “Collection” and “Completed” lists.

Collection Limits

Currently, AniDev has the following collection limits:
  • Collections per user: 4 (fixed categories)
  • Anime per collection: Unlimited
  • Total anime across all collections: Unlimited
There are no hard limits on how many anime you can add to your collections. However, very large collections (1000+ items) may take longer to load.

Collection Privacy

Your collections are:
  • Private by default: Only you can see your collections
  • Account-specific: Tied to your authenticated account
  • Synced across devices: Access from any device after logging in
  • Persistent: Collections are saved permanently (until you delete items)

Collection Icons

Each collection type has a unique icon for easy identification:
CollectionIconColor
To WatchBookmarkAccent color
CollectionFolderAccent color
CompletedCheckmarkGreen
WatchingPlayAccent color

Mobile Experience

Collections work seamlessly on mobile devices:

Touch-Friendly

Large tap targets for easy collection management

Swipe Actions

Swipe to remove items (on supported browsers)

Responsive Grid

Collection cards adapt to your screen size

Offline Cache

Recently viewed collections cached for offline access

Frequently Asked Questions

Yes, collections require a user account because they’re stored in our database and synced across devices. Sign up for free to start using collections.
If you delete your AniDev account, all your collections will be permanently deleted. This action cannot be undone, so make sure to export or save any important data first.
Collection export features are planned for a future update. Currently, collections can only be viewed within AniDev.
If your collection isn’t appearing:
  • Make sure you’re logged into the correct account
  • Check your internet connection (collections require server sync)
  • Try refreshing the page
  • Clear your browser cache if the issue persists
Collection sharing is not currently available but is planned for a future release. For now, collections are private to your account.

Collection State Management

Collections use Zustand for state management:
// Collection store manages UI state
const { userList, setUserList } = useUserListsStore()

// User lists include:
// - To Watch (default selected)
// - Collection  
// - Completed
// - Watching
Each collection item includes:
  • Label (display name)
  • Icon (React component)
  • Selected state (for UI)
Collections are loaded when you navigate to the collection page and cached in session storage for better performance.

Build docs developers (and LLMs) love