Fanfiction Reference Works
This is a collection of AO3 works and other resources for creating fan works. (See also the Fanwork Research & Reference Guides tag.)
Some fandoms have wonderful on-line communities (e.g. The Harry Potter Lexicon and Marvel wikis) devoted to creating canon references. Many more do not, but fans still have created deeply thought out essays, maps, tables, histories, and other world building. Hopefully, you can find them here.
AO3 allows custom formatting using limited HTML and CSS (workskins). This collection has a number of formatting "how-to's" in addition to the AO3 docs below.
Note: Works added as bookmarks do not add their tags or fandoms to the collection. Please add your own works
(Open, Unmoderated)
Recent works
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful (2018).
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs and interests.So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username, and Links
Part Ten: Kudos Message
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler (with opacity and hover translations)
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text
Part Seventeen: Drop-Down Transition Delay (NEW & reformed)
Part Eighteen: Automated Animation (NEWEST and No. 2 added) -
Conventions for Chinese Names and Titles for Fanfic Writing Purposes by RuanChunXian
Fandoms: Multi-Fandom, 知否知否应是绿肥红瘦 | The Story of Minglan (TV), 锦心似玉 | The Sword and The Brocade (TV), 后宫甄嬛传 | The Legend of Zhen Huan | Empresses in the Palace (TV), 还珠格格 | Huán Zhū Gé Gé | Princess Returning Pearl (TV 1998-2003), 如懿传 | Ruyi's Royal Love in the Palace (TV), 延禧攻略 | Story of Yanxi Palace (TV)
24 Aug 2026
Tags
Summary
A compilation of information from various sources mostly for my own reference, regarding names and titles in general but with some specific references to the Qing dynasty and Qing dynasty dramas because the only reason I know these things is to write fanfic.
-
A Beginner's Guide to HTML and CSS on AO3 by the_untamed_poet25
Fandoms: No Fandom, Fandom - Fandom, AO3, Original Work
18 Aug 2026
Tags
Summary
You've seen it. A fic formatted like a classified document. A chapter that looks like a real social media feed. An interactive game, somehow, inside an AO3 work. You clicked the kudos button. You thought: how.
This is the tutorial that answers that.
A beginner-friendly guide to HTML and CSS on AO3 — no prior coding experience required. By the end of this series, you'll know enough to write formatted fics, build your own workskins, style your entire AO3 interface, and maybe make something that makes other people stop and think how.
Series
- Part 23 of Izzy's HTML & CSS Experiments
- Part 2 of HTML/CSS AO3 Skins & Tutorials
-
Neon Lover Site Skin & Workskin by the_untamed_poet25
Fandoms: No Fandom, Original Work, AO3, Fandom - Fandom
21 Jul 2026
Tags
Summary
Your AO3 doesn't have to look like it's lit by fluorescent office lighting. It could look like the last working sign outside a shuttered arcade.
A free site skin and workskin drenched in hot pink, electric cyan, and ultraviolet. Reskins your entire AO3 interface in void black with layered neon glow, a pulsing header, and tags that light up like a sign catching power. Includes full installation instructions for both the site skin (which reskins your entire AO3 interface) and the workskin (which adds a chromatic-split drop cap, glowing headings, static-noise scene dividers, spoiler boxes, and neon-lit styling to your own fic text). No prior CSS knowledge needed.
Series
- Part 53 of Izzy's HTML & CSS Experiments
- Part 4 of HTML/CSS AO3 Skins & Tutorials
-
Tags
Summary
A workskin for the Twitter Mobile UI. This skin is kind of a mix of old twitter, modern twitter, and a little bit of Bluesky. Includes dim, light, and dark mode.
Series
- Part 2 of Ghost's Social Media Workskins
Recent bookmarks
-
Tags
Summary
This is my list of workskin, how to add workskin to your work, and how to use each of the class in my workskin.
If you use it I would appreciate a credit so that more people can be able to use it! -
The Ultimate Guide to Writing Smut Fic by QuinnAnderson for kali_asleep
Fandoms: Original Work
05 Sep 2013
Tags
Summary
A comprehensive guide to writing both queer and het erotic fiction, written by published novelist Quinn Anderson. Includes lists of sexy words, references, and some general writing tips. Please feel free to use without credit.
-
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No Fandom
10 Apr 2016
Tags
Summary
This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.
Series
- Part 3 of AO3 Work Skins/Tutorials
-
Tags
Summary
A mock-up of a fake article about a TV series, with CSS and HTML code and a brief guide on how to use it.
-
Tags
Summary
A Discord workskin that supports most Discord-style markup. Includes layouts for channels, DMs, and Group Chats. Darkmode only.