Skip to content
Chat Widget screenshot
Engineering·
  • Next.js
  • TypeScript
  • Tailwind CSS
  • Shadcn-UI
  • Zustand
  • Zod

Chat Widget

Visual CSS generator for YouTube live chat widgets — customize colors, fonts, layout, and animations with real-time preview.

Live SiteSource Code

About this project

Built a visual editor on Next.js 16 with a Zustand-powered theme store. Users configure every aspect of the chat widget — role colors, bubble/compact modes, entry animations, super chat styling — through UI controls. A CSS generation engine compiles the theme into ready-to-use CSS. shadcn/ui provides accessible, consistent controls. Live iframe preview shows mock chat data reflecting real-time changes.

A production-ready web app with 8 preset themes, real-time preview, and one-click CSS export. Streamers can customize role colors, animations, bubble modes, and super chat styling — all visually, without writing CSS.

More Work

Engineering

API UMKM Jember

REST API read-only for Jember SMEs directory — real local business data from OpenStreetMap.

Engineering

API Wilayah Indonesia

Public read-only API for Indonesian administrative region data — provinces, regencies, districts, villages with postal codes and coordinates.

← View all work