HTML API for Citation.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build feat(*): add code Jun 3, 2017
docs feat(*): add code Jun 3, 2017
lib feat(*): add code Jun 3, 2017
src feat(*): add code Jun 3, 2017
.gitignore chore(config): add gitignore Jun 3, 2017 docs(readme): add README Jun 3, 2017
package.json chore(package): update package.json Jun 3, 2017


Simple HTML API for Citation.js.

Table of Contents

Get Started

Simply load the js file.

<script src="path/to/replacer.citation.js"></script>

You can either download this file from here, or link it directly from Rawgit:

<script src=""></script>


citation.js-replacer is a HTML API, so everything is done by adding HTML to your page.


To add a reference, insert any element with the classes citation-js and cite. By default, the program will use the textContent of the element as input.

<div class="citation-js cite">Q21972834</div>

You can also use pass input with the data-input attribute.

<div class="citation-js cite" data-input="Q21972834">This text can now be ignored</div>

This is usefull, as you can put a fallback in the element, in case the API fails, JavaScript is blocked or the program doesn't work for another reason.

<div class="citation-js cite" data-input="Q21972834">
  <a href="">Link</a>

Output options

You can specify output options too, with the data-output-* attribute. These are the same as the Citation.js Output options. However, format and type are locked to returning DOM Elements.

<div class="citation-js cite" data-input="Q21972834" data-output-style="citation-apa">
  <a href="">Link</a>

Special options

Because it isn't really handy to put output template strings or locales in attributes, you can pass these by URL too, with the data-output-*-url attribute. The rest of the option works the same as the regular template and locale options.

<div class="citation-js cite" data-input="Q21972834" data-output-style="citation-bioinformatics" data-output-template-url="">
  <a href="">Link</a>

You can, for example, load style files from the CSL styles repo. Note that you shouldn't directly link to GitHub here, but instead use a service like Rawgit (to take the load off of the GitHub servers).