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.

Features

• 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

Tech Stack

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

Getting Started

bun install
bun dev

Open http://localhost:3000.

Commands

Command	Description
bun dev	Start dev server
bun build	Production build
bun lint	ESLint
bun typecheck	TypeScript check (tsc --noEmit)
bun test	Run tests

Project Structure

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

License

MIT