(A quick info dump on JS Bin and linking a workskin to a fic, for those of you new/aspiring to using HTML on AO3. If you've ever wanted to write fancy chat fics or CYOA fics, now's a great time to get started! Check out our annual HTML fic event if you're interested.)
JS Bin is an interactive tool that lets you code HTML/CSS in your browser. This is JS Bin:
(it auto loads in some stuff in the HTML tab, don't worry about it.)
Note the toggles on the top of the view: HTML, CSS, JavaScript, Console, Output. As an "AO3 coder", you care about HTML, CSS, and Output.
The HTML tab is the same as you would put into AO3:
The CSS tab is your "workskin" file on AO3.
So, why use something like JS Bin for coding your fanfiction, instead of writing directly into AO3?
Firstly, autosave. It autosaves!!!
Secondly, the Output tab. If you've ever coded directly on AO3, you know the pain of going back and forth and back and forth and then maybe accidentally hitting the post button instead of the preview button...
The Output tab will update in real time as you edit your HTML and CSS tabs.
The main downside to using a tool other than AO3 to write and test your code is that AO3 has some custom styling (and that there are some CSS classes that AO3 doesn't support). We strongly suggest checking your work periodically on AO3 to make sure your code is rendering as intended. But autosaving and a live refreshing output really are worth it, and can save you a ton of wasted time and tears.
When you go back to AO3, you put the CSS contents in a work skin:
(AO3 will auto add #workskin to every class, you don't have to do that.)
Open up a new fic, and make sure to link your workskin:
Then, your HTML tab contents from JS Bin go into the HTML Work Text box:
(you can leave out the <html> and the <body> tags from JS Bin, or you can leave them in. AO3 strips them out anyway.)
Then hit preview, and you're done.
JS Bin is definitely not the only option. If you're ready for a level-up, we suggest checking out VS Code. If you hate JS Bin, there's also CodePen. We talk about several of these tools in a previous post.
Hope this helps! Happy coding.
(This has been a PSA about not coding your fics on AO3. Save yourselves.)
