Shiori ChatCraft

Layout

Chat Style

Direction

Alignment

Reverse directionOFF

Name below messageOFF

Colors

Chat text & emotes

Sets the overall font / size — colors & per-element tweaks live on the canvas element

Font

Name size

Name weight

Message size

Message weight

Emote size

Chat column width

Fill rowOFF

Fill row = the bubble stretches to the column width instead of hugging its text

Width

Full widthOFF

Width = column width in px, used by both styles. Full width (below) stretches to the OBS source width instead (ignores px).

Decoration

A decoration image on every bubble — adjust here, or click it on the canvas to drag / resize like the avatar

Show in OBS

On = type appears in exported OBS CSS; Off = stripped from output

Normal chatON

Paid chat

MembershipON

Gifted membershipsON

Super ChatON

Super StickerON

Super GiftsON

Speed:

0 / 0 · loop 1

Zoom: 100%

Background:

Guides:

Preview: the exact CSS that exports, rendered on real YouTube DOM — this is what OBS shows. Switch to Edit to design.