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
-
Userscript and CSS, as you prefer, to return overflow and sticky effects client-side by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor) for feindcode (feind)
Fandoms: CSS abuse - Fandom
12 Jun 2026
Tags
Summary
What can I say that isn't pretty self-evident from the title?
On Mon 08 Jun 2026, AO3 updated some stuff that broke a lot of things in a lot of people's CSS-works (and at least one userscript). I fixed it. This fix is only client-side, so that you can re-enable some of the magic that some people have wrought and see it once more as a reader — it doesn't act from within a work skin to force a rollback to the actual server-side site-level underlying code itself, so it's not much good directly for authors.
Have you seen some of my CSS demos, or mystyrust's do you believe in coincidences?, or Mewsmodeus (Mewzebub)'s I'M NOT AN FANFIC AUTHOR PLEASE DON'T CURSE ME, or mackerel_cheese's Íkaros in when the wax melts ? If so (before the “update”), then you know and remember; if not, then you're going to want to do so, and you'll want this CSS or JS with which to view them in all of their glory.
-
A Beginner's Guide to HTML and CSS on AO3 by the_untamed_poet25
Fandoms: No Fandom, Fandom - Fandom, AO3, Original Work
01 Jun 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
-
Diluc-Inspired Site Skin & Workskin by the_untamed_poet25
Fandoms: 原神 | Genshin Impact (Video Game), Original Work, Fandom - Fandom, AO3
04 May 2026
Tags
Summary
The Darknight Hero keeps his own counsel. Your AO3 interface can keep his aesthetic.
A free site skin and workskin inspired by Diluc Ragnvindr, the brooding wine tycoon and vigilante of Mondstadt (Genshin Impact). Reskins your entire AO3 in void black, scorched wine-red, and burnished gold, with ember glow and fire-touched details throughout. Includes full installation instructions for both the site skin (which reskins your entire AO3 interface) and the workskin (which adds drop caps, glowing scene breaks, ashfall dividers, spoiler boxes, and ember-lit styling to your own fic text). No prior CSS knowledge needed.
Series
- Part 26 of Izzy's HTML & CSS Experiments
- Part 3 of HTML/CSS AO3 Skins & Tutorials
-
Olive Pine Moon site skin theme by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: Site Skin - Fandom
03 May 2026
Tags
Summary
This theme uses an olive tone as its basis, and was built at the request of a Redditor.
It requires ravenothere's Closer to Home BASE site skin in order to function.
-
Alhaitham-Inspired Site Skin & Workskin by the_untamed_poet25
Fandoms: 原神 | Genshin Impact (Video Game), Original Work, Fandom - Fandom, AO3
05 Mar 2026
Tags
Summary
The House of Daena has excellent taste in interior design. Your AO3 interface can too.
A free site skin and workskin inspired by Alhaitham, Scribe of the Sumeru Akademiya (Genshin Impact). Reskins your entire AO3 in deep teal, burnished gold, and aged parchment, with ornamental details throughout. Includes full installation instructions for both the site skin (which reskins your entire AO3 interface) and the workskin (which adds drop caps, decorated scene breaks, spoiler boxes, and ornamental borders to your own fic text). No prior CSS knowledge needed.
Series
- Part 8 of Izzy's HTML & CSS Experiments
- Part 1 of HTML/CSS AO3 Skins & Tutorials
Recent bookmarks
-
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.
-
Bookmarked by EMERALD_CRINGE
15 Mar 2023
Bookmarker's Collections:
Bookmarker's Notes
reference sthingiies :)
-
Tags
Summary
How to set up a bookmarklet that applies a saved set of filters to any works or bookmarks listing page on AO3
(Bookmarklets are a bit fiddly on mobile, but very much doable—and functional. Since I've done all the coding already, you can just follow the instructions without worrying about that. ;D)
GitHub version (more technical) || Tumblr version (with screenshots for Chrome on Android)
Bookmarked by Nightcandle
10 Feb 2023
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Saved Filters on AO3 by reisling
-----------------very useful and well explained. 😊
It's quite simple and easy to implement.
I tried it out with just a few filters (English, no Crossovers and no WIPs) and it works like a charm! 😀