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
-
Alhaitham-Inspired Site Skin & Workskin by the_untamed_poet25
Fandoms: 原神 | Genshin Impact (Video Game), Original Work, Fandom - Fandom, AO3
04 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
-
Tags
Summary
This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
- Scalable so it's also accessible to mobile users.
- Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
- Profile card (chapter 2): displays a user's profile as shown on Twitter.
- Please let me know if there are bugs and/or requests.Ao3 Twitter Template Generator now available! (Made possible by the amazing Anlanther): Now you only have to fill in your text and copy-paste the generated code!
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
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 (NEW: 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: Transition (NEW)
Part Eighteen: Automated Animation (NEWEST) -
Tags
Summary
This is a work-in-progress by someone who doesn't code and frankensteining a whole bunch of CSS. It's cute though!
-
Userscript to add Series [Public] Bookmarks total count to author's stats page by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: AO3 stats - Fandom
04 Jan 2026
Tags
Summary
It's bugged me vaguely for years, though never enough that I really cared... but it hit me last night: if JS can do one thing, such as return the special kudos messages to their days of tailored glory, then it can do another, so... yeah, why not?
If you want to see your series' total number of public bookmarks in your stats page: you got it! ❤️
Full code included.
Recent bookmarks
-
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! 😀 -
Permablocking Specific Tags - Site Skin by Eli0t
Fandoms: Fandom - Fandom, AO3, No Fandom
10 Aug 2023
Tags
Summary
It finally exists. You can block any tag you want forever! You no longer need 3rd party extensions for this!
Series
- Part 1 of AO3 Skins
- Part 1 of :has() selector
- Language:
- English
- Words:
- 2,232
- Chapters:
- 3/3
- Collections:
- 1
- Comments:
- 355
- Kudos:
- 688
- Bookmarks:
- 704
- Hits:
- 34,928
Bookmarked by Nightcandle
09 Feb 2023
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Permablocking Specific Tags - Site Skin by Eli0t
-----------------The code used here can also be used to highlight (by different text color) Works with specific tags.
It also has several useful "inspired by" Works that explain further useful possibilities of this code and its siblings.This Work is part of a Series that also has turorials for other useful Site Skins.