AO3 Text Message Generator

Create AO3-compatible text message screenshots for your fanfiction

Message Editor

Conversation Settings

Contact Name (optional):

Add Timestamp

Add Image

Add Sender Name (for group chats)

Add Typing Indicator (three dots animation)

Messages (0)

Preview

No messages yet. Add some messages to see the preview!

HTML Code

CSS Code (for AO3 Work Skin)

How to use on AO3:

Go to Dashboard → Skins → Create Work Skin
Give your skin a title (e.g., "Text Message Skin")
Paste the CSS Code into the CSS field
Click Submit to save the skin
When posting/editing your work, go to the Associations section
Select your work skin from the Select Work Skin dropdown
In the work text editor, click the HTML button (not Rich Text)
Paste the HTML Code where you want the messages to appear

Note: This format follows the standard AO3 text message format with message tails. The CSS uses #workskin selectors which only work within AO3 Work Skins.