Chat Widget — YouTube Live Chat CSS Generator

Visual editor untuk streamer/creator YouTube membuat tema visual untuk widget live chat (OBS Browser Source / Social Stream Ninja) tanpa CSS manual.

OG Image

• Visual Editor — atur warna, font, layout, animasi via UI
• Live Preview — real-time iframe preview dengan mock chat, super chat, membership
• Preset Themes — 8 preset siap pakai, bisa ganti instan
• Role Colors — warna khusus per role (owner, moderator, member, regular)
• Bubble Mode — tampilan chat bubble modern dengan gradient per role
• Compact Mode — hemat ruang untuk overlay
• Super Chat & Membership — kustomisasi warna dan ukuran
• Entry Animations — slide, pop, fade-up, glow
• Export CSS — copy atau download CSS siap pakai di OBS

• Framework: Next.js 16 (App Router, Turbopack, src/ directory)
• UI: shadcn/ui + Tailwind CSS
• State: Zustand (client-side)
• Validation: Zod
• Runtime: Bun

bun install
bun dev

Open http://localhost:3000.

src/
 app/ # Next.js pages
 page.tsx # Main editor
 layout.tsx # Root layout + SEO
 opengraph-image.tsx # Dynamic OG image
 twitter-image.tsx # Dynamic Twitter card
 sitemap.ts
 robots.ts
 components/
 editor/ # Editor controls
 preview/ # Chat preview iframe
 ui/ # shadcn/ui components
 lib/
 theme-schema.ts # Zod schema
 css-generator/ # CSS generation engine
 presets/ # 8 preset themes
 export/ # Copy/download utilities
 store/
 useThemeStore.ts # Zustand store

MIT