// Main app: nav + hero + 10 modules + sticky TOC + tweaks panel. const APP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#5D7052" }/*EDITMODE-END*/; const ACCENT_OPTIONS = ['#5D7052', '#4A5B41', '#8A6E3D', '#3F6B5E']; const TOC_ITEMS = [ { id: 'analyzer', label: '01 · Quick answer' }, { id: 'reference', label: '02 · Main limits' }, { id: 'title-limit', label: '03 · Title limits' }, { id: 'tag-limit', label: '04 · Tag limits' }, { id: 'description-limit', label: '05 · Description limits' }, { id: 'personalization-limit', label: '06 · Personalization limits' }, { id: 'how-to-check', label: '07 · Check your listing', divider: true }, { id: 'mistakes', label: '08 · Common mistakes' }, { id: 'faq', label: '09 · FAQ' }, { id: 'more-limits', label: '10 · More Etsy limits' }, ]; function Nav() { const [toolsOpen, setToolsOpen] = useState(false); useEffect(() => { if (!toolsOpen) return; const close = () => setToolsOpen(false); document.addEventListener('click', close); return () => document.removeEventListener('click', close); }, [toolsOpen]); return (
); } // ============================================================ // TOC with scroll-spy via IntersectionObserver // ============================================================ function TOC() { const [active, setActive] = useState('analyzer'); useEffect(() => { const handler = () => { // pick the section whose top is closest to (but past) ~140px from top const trigger = 160; let current = TOC_ITEMS[0].id; for (const item of TOC_ITEMS) { const el = document.getElementById(item.id); if (!el) continue; const top = el.getBoundingClientRect().top; if (top - trigger <= 0) current = item.id; } setActive(current); }; handler(); window.addEventListener('scroll', handler, { passive: true }); return () => window.removeEventListener('scroll', handler); }, []); return ( ); } // ============================================================ // [1] HERO + LIVE STUDIO // ============================================================ function Hero() { const [mode, setMode] = useState('title'); const [title, setTitle] = useState(SAMPLE_TITLE); const [tags, setTags] = useState(SAMPLE_TAGS); const [desc, setDesc] = useState(SAMPLE_DESC); const [perso, setPerso] = useState(SAMPLE_PERSO); return (
{/* TOP: pitch + summary cards */}
Etsy title character limit · 2026

Etsy title character limit 2026:
140 characters, plus the related Etsy listing limits sellers check most

Check the Etsy title character limit first, then verify the other core listing limits sellers usually need in the same workflow.

Title 140 characters Core Etsy title character limit
Tags 13 tags 20 characters each
Description ~10,000 characters Widely cited cap; the opening lines matter most
Personalization Up to 5 fields Text-box limits can be set from 1 to 1,024 chars
Official rules called out explicitly Guidance and recommendations kept separate Live checker below for draft review
{/* BOTTOM: live analyzer */}
Title Studio
{mode === 'title' && ( )} {mode === 'tags' && } {mode === 'desc' && } {mode === 'perso' && }
); } function App() { const [t, setTweak] = useTweaks(APP_TWEAK_DEFAULTS); useEffect(() => { document.documentElement.style.setProperty('--primary', t.accent); }, [t.accent]); return ( <>