LiveFree, forever

A work skin editor for AO3.

Turn a chapter into a group chat, a letter, or a newspaper page. Write it, see it styled as you go, and export a work skin AO3 accepts. Drafts never leave your device.

Open the editor

Free. Sign in with your email to start. Your drafts still stay on this device.

for writersDrafts never leave your device.

+ 18 more

YOUR CHAPTER, HTML<p class="time">Today 11:46 PM</p>
<p class="them">wait</p>
<p class="them tail">the cabin only has one bed??</p>
<p class="me tail">...i may have planned that</p>
<p class="them tail">i hate you</p>
<p class="me tail">you said that last chapter too</p>
<p class="read">Read 11:48 PM</p>
WORK SKIN, CSS#workskin .me {
  background: #127A71;
  color: white;
  border-radius: 18px;
  margin-left: auto;
}
#workskin .tail::before {
  border-bottom-left-radius: 16px 14px;
}
YOUR CHAPTER, HTML<div class="post">
<p class="who">Captain Ada Marlow</p>
<p class="handle">@captain_marlow</p>
<p>Pleased to announce I have NOT fallen
  for the new navigator.</p>
<p class="stats">2,104 · 9,870 · 31.2k</p>
<p class="reply">sir, you named the ship after her</p>
</div>
WORK SKIN, CSS#workskin .post {
  border: 1px solid #E6E1E4;
  border-radius: 16px;
  padding: 16px;
  font-family: Arial, sans-serif;
}
#workskin .handle { color: #6A4B58; }
YOUR CHAPTER, HTML<div class="letter">
<p class="date">the 14th of March</p>
<p>Mr. Ashworth,</p>
<p>I received your letter, all eleven pages of it.</p>
<p class="sign">Yours, against my better judgement,</p>
</div>
WORK SKIN, CSS#workskin .letter {
  background: #FFFBF1;
  font-family: Georgia, serif;
  font-style: italic;
  line-height: 28px;
}
#workskin .sign { text-align: right; }
YOUR CHAPTER, HTML<p class="name priya">Priya</p>
<p class="them">is it true you two were in the coat
  closet for 40 minutes</p>
<p class="them tail">FORTY</p>
<p class="me tail">we were looking for a coat</p>
<p class="system">Theo renamed the group</p>
WORK SKIN, CSS#workskin .priya { color: #C2335F; }
#workskin .system {
  text-align: center;
  font-size: 12px;
  color: #6A4B58;
}

HOW IT LOOKS ON AO3TEXT MESSAGES · 1 OF 4Chapter 14: One BedTheo’s name lit up the screen at a quarter to midnight, which was never a good sign.
TTheo

Text Message
Today 11:46 PM
wait
the cabin only has one bed??
...i may have planned that
i hate you
you said that last chapter too
Read 11:48 PM

Three dots. Gone. Three dots again.
HOW IT LOOKS ON AO3SOCIAL POST · 2 OF 4Chapter 9: Dead ReckoningIris checked the ship’s feed with her coffee. She had not expected to be in it.
AMCaptain Ada Marlow@captain_marlow
Post
Pleased to announce I have NOT fallen for the new navigator.9:14 AM · Day 212 at sea2,1049,87031.2k
JUJuno @first_mate_juno · 2hReplying to @captain_marlowsir, you named the ship after her
She read it twice, put the coffee down, and went to find the captain.
HOW IT LOOKS ON AO3LETTER · 3 OF 4Chapter 6: CorrespondenceThe reply came folded in thirds, in a hand he would have known anywhere.

the 14th of March
Mr. Ashworth,
I received your letter, all eleven pages of it. I have read it only four times, which I think shows great restraint.
You may call on Thursday. Wear the blue coat.
Yours, against my better judgement,
H.
He read it a fifth time. Then he went to find the blue coat.
HOW IT LOOKS ON AO3GROUP CHAT · 4 OF 4Chapter 22: The Rehearsal DinnerBy the time the salads came out, the whole wedding party knew.
PDTbridal party5 people
Priyais it true you two were in the coat closet for 40 minutes
PFORTY
we were looking for a coatPriyaPit is 97 degrees outside
DevDsam doesn’t own a coat3
Theo renamed the group “coat closet (40 min)”
Sam turned the phone face down. It kept buzzing.

Example content. The chapters, characters, and posts are made up.

22 skins, ready to drop in.

Messaging7

iMessage
iMessage (group)
WhatsApp
Snapchat
Snapchat (home)
Discord
Chatroom / Slack

Social media7

Tweet / X Post
Bluesky
Tumblr
Reddit
Reddit (thread)
Facebook
Instagram

Documents4

Letter
Gmail
Newspaper
Forum / BBS

Formatting4

Spoiler / CW
Review
Sticky note
Custom HTML

How it works

1Pick a skinA text thread, a letter, a newspaper page, a sticky note, and more.
2Write, and watch it styleThe preview updates as you type. Or bring a chapter in with Import.
3Export to AO3Copy the work skin and the chapter HTML, built for AO3, with setup steps right there.

You get the code, not a picture.

Your chapter never turns into an image. You get the real HTML and CSS to paste into AO3, so you can tweak it, break it, fix it, and learn how it works.

THE CSS YOU GET

#workskin .me {
  color: white;
  background: #127A71;#C2335F;#6B45C9;
  border-radius: 20px;
}

WHAT READERS SEEUPDATED

Change a color in the code and every bubble changes with it. That’s the whole trick, and it’s yours to play with.

HTML and CSS, in plain words

Excited, but no idea how any of this works? Good news: nobody did, once.

AO3 lets you style your chapter: make it look like a group chat, a letter, a social post. That takes two pieces:

Piece 1 · HTMLYour chapter’s words, labeledYour chapter, with a little label around each part. This label says: this line is a text from Theo. It goes in your chapter.

Piece 2 · CSS work skinThe lookA short list of rules for each label: gray bubble, round corners, on the left. AO3 calls it a work skin. You add it once and pick it when you post.

You won’t be on your ownLet flourish write both pieces for you.And the Export to AO3 button comes with step by step setup instructions, so the first time is as easy as the tenth.

For the chapter that happens in the group chat.

Free, foreverOpen the editor

Free. Sign in with your email to start. Your drafts still stay on this device.

LiveFree, forever

A work skin editor for AO3.

Turn a chapter into a group chat, a letter, or a newspaper page. Drafts never leave your device.

Open the editor

Free. Sign in with your email to start. Your drafts still stay on this device.

for writers

flourishText messagesSocial postLetterGroup chat

HOW IT LOOKS ON AO3Chapter 14: One BedTheo’s name lit up the screen at a quarter to midnight, which was never a good sign.
TTheo

Text Message
Today 11:46 PM
wait
the cabin only has one bed??
...i may have planned that
i hate you
you said that last chapter too
Read 11:48 PM

Three dots. Gone. Three dots again.
HOW IT LOOKS ON AO3Chapter 9: Dead ReckoningIris checked the ship’s feed with her coffee. She had not expected to be in it.
AMCaptain Ada Marlow@captain_marlow
Post
Pleased to announce I have NOT fallen for the new navigator.9:14 AM · Day 212 at sea2,1049,87031.2k
JUJuno @first_mate_juno · 2hReplying to @captain_marlowsir, you named the ship after her
She read it twice, put the coffee down, and went to find the captain.
HOW IT LOOKS ON AO3Chapter 6: CorrespondenceThe reply came folded in thirds, in a hand he would have known anywhere.

the 14th of March
Mr. Ashworth,
I received your letter, all eleven pages of it. I have read it only four times, which I think shows great restraint.
You may call on Thursday. Wear the blue coat.
Yours, against my better judgement,
H.
He read it a fifth time. Then he went to find the blue coat.
HOW IT LOOKS ON AO3Chapter 22: The Rehearsal DinnerBy the time the salads came out, the whole wedding party knew.
PDTbridal party5 people
Priyais it true you two were in the coat closet for 40 minutes
PFORTY
we were looking for a coatPriyaPit is 97 degrees outside
DevDsam doesn’t own a coat3
Theo renamed the group “coat closet (40 min)”
Sam turned the phone face down. It kept buzzing.

saved in this browserExport to AO3

Example content. The chapters, characters, and posts are made up.

22 skins, ready to drop in.

Messaging7

iMessage
iMessage (group)
WhatsApp
Snapchat
Snapchat (home)
Discord
Chatroom / Slack

Social media7

Tweet / X Post
Bluesky
Tumblr
Reddit
Reddit (thread)
Facebook
Instagram

Documents4

Letter
Gmail
Newspaper
Forum / BBS

Formatting4

Spoiler / CW
Review
Sticky note
Custom HTML

How it works

1Pick a skinA text thread, a letter, a newspaper page, a sticky note, and more.
2Write, and watch it styleThe preview updates as you type. Or bring a chapter in with Import.
3Export to AO3Copy the work skin and the chapter HTML, built for AO3, with setup steps right there.

You get the code, not a picture.

No images. You get the real HTML and CSS, so you can tweak it, break it, fix it, and learn how it works. Change one color and watch:

#workskin .me {
background: #127A71;#C2335F;#6B45C9;
}

HTML and CSS, in plain words

AO3 lets you style your chapter: make it look like a group chat, a letter, a social post. That takes two pieces:

Piece 1 · HTMLYour chapter’s words, labeledA little label around each part: this line is a text from Theo. It goes in your chapter.

Piece 2 · CSS work skinThe lookRules for each label: gray bubble, round corners, on the left. AO3 calls it a work skin.

Let flourish write both for you.And the Export to AO3 button comes with step by step setup instructions.

A work skin editor for AO3.

22 skins, ready to drop in.

Messaging7

Social media7

Documents4

Formatting4

How it works

You get the code, not a picture.

HTML and CSS, in plain words

A work skin editor for AO3.

22 skins, ready to drop in.

Messaging7

Social media7

Documents4

Formatting4

How it works

You get the code, not a picture.

HTML and CSS, in plain words

Also in flourish