Tag Bulk Import — 10 layout suggestions

Goal: paste/upload a list of tags (one-per-line, CSV, or JSON), preview parsed results with new/duplicate/error badges, then commit. Each variant explores a different UX shape.

1
Modal · Split paste + live preview
Classic split: paste left, parsed table right. Auto-detects JSON / CSV / line-list. Best general purpose.
Import tags
auto-detected: CSV
Paste — line, CSV, or JSON
Preview · 6 parsed
NameCategoryColorStatus
BondageFetish+ new
CosplayGenre↺ exists
BukkakeGenre—+ new
Office Lady——+ new
AhegaoExpression + create+ new
School UniformCosplay↺ exists
4 new 2 duplicates 1 category to create
Tip: drag a .csv / .json onto the textarea.
2
Modal · Stepper wizard (Paste → Map → Review)
3-step flow with progress chips. Verbose for new users; lets you map columns explicitly on CSV.
1 Paste data
2 Map columns
3 Review & import
Detected CSV with header row. Map columns to tag fields.
ColumnSampleMaps to
nameBondage, Cosplay…Tag name (required)
categoryFetish, Genre…Category (lookup or create)
color#a78bfa…Color hex
notesinternal use…Skip (no field)
3
Modal · Drag-drop hero
File-first. Big dropzone in the center; clicking opens picker. Paste-textarea hidden behind a toggle.
Import tags
📥
Drop .csv, .json, or .txt
One tag per line, or CSV with name/category/color columns
— or —
Files are parsed locally before any DB write.
4
Inline panel on /tag (no modal)
Expandable section drops between the toolbar and the tag list. Less context-switch; preview tags appear inline next to the existing ones.
Tags
Bulk import — paste below, preview appears live
Will create 3 new
Bondage new Cosplay exists Bukkake new Ahegao new
Existing 1Existing 2Existing 3Existing …
5
Compact pasteboard with detection badges
Single column, minimal. Status pills under the textarea give a one-glance summary without a preview table.
Paste tags
JSON detected
4 parsed 3 new 1 duplicate 1 category to create 0 errors
6
Spreadsheet · Editable grid
Paste fills rows; each cell is editable. Add/remove rows. Best for fixing small mistakes before committing.
Edit before import (5 rows)
#Name *CategoryColorStatus
1+ new✕
2↺ exists✕
3+ new✕
4+ new✕
5⚠ blank✕
3 new1 duplicate1 error
7
Chip input · Type / paste, comma to split
Each tag becomes a chip you can edit or delete. Press Enter or comma to add. Color-coded: green=new, amber=dup.
Tags to import
Type a name, press Enter or , to add. Or paste many at once.
Bondage ✕ Cosplay ✕ Bukkake ✕ Ahegao ✕ Office Lady ✕ Schoolgirl ✕ School Uniform ✕
5 new2 dup
8
Side drawer · slides in from right
Lighter than a modal. Page stays visible behind. Good if you want to consult existing tags while pasting.
Tags
CosplaySchool UniformTentacleBeachOffice
Bulk import tags
✕
3 new2 dup
9
Full-page importer at /tag/import
Maximum room. Three columns: input, preview, options. Best when importing many hundreds.
Tags / Import
Bulk import
Input
Preview
BondageFetishnew
CosplayGenredup
BukkakeGenrenew
Ahegao+ Expressionnew
Options
On conflict
10
Tabbed modal · Quick / Advanced
Two modes in one shell. Quick = just a textarea for one-per-line. Advanced = CSV/JSON with options. Lowest cognitive load for the common case.
Import tags
✕
Quick · one per line
Advanced · CSV / JSON
Just paste names, one per line. Categories & colors can be assigned afterwards on the tag page.
5 new 1 dup
Need categories or colors? Switch to Advanced.
My pick: #1 (split modal) for the default flow — covers all three input formats with live feedback. Pair it with #7 (chips) as a "Quick add" alt for ad-hoc single-tag entry from the toolbar. #6 (spreadsheet) if editing-before-commit becomes a frequent need.