Citation Style Formatter — Free APA & MLA Generator HTML CSS JS

<div class="cf-card">
  <h3>Citation formatter</h3>

  <div class="cf-style" role="radiogroup" aria-label="Citation style">
    <button type="button" class="cf-style-btn active" data-style="apa">APA</button>
    <button type="button" class="cf-style-btn" data-style="mla">MLA</button>
  </div>

  <div class="cf-fields">
    <label class="cf-field">
      <span>Author (full name)</span>
      <input type="text" id="cfAuthor" placeholder="Jane A. Smith" value="Jane A. Smith">
    </label>
    <label class="cf-field">
      <span>Title of work</span>
      <input type="text" id="cfTitle" placeholder="The Long Thaw" value="The Long Thaw">
    </label>
    <label class="cf-field">
      <span>Publication / site name</span>
      <input type="text" id="cfPublication" placeholder="Atlas Review" value="Atlas Review">
    </label>
    <label class="cf-field">
      <span>Year</span>
      <input type="text" id="cfYear" placeholder="2024" value="2024">
    </label>
    <label class="cf-field">
      <span>URL</span>
      <input type="text" id="cfUrl" placeholder="https://example.com/article" value="https://example.com/the-long-thaw">
    </label>
  </div>

  <div class="cf-output">
    <p class="cf-citation" id="cfCitation"></p>
    <button type="button" class="cf-copy" id="cfCopy">Copy citation</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f1116;color:#e7e9ee;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px}

.cf-card{background:#171a21;border:1px solid #272c37;border-radius:16px;padding:24px;width:100%;max-width:440px}
.cf-card h3{font-size:16.5px;font-weight:800;margin-bottom:14px}

.cf-style{display:flex;background:#1e222c;border-radius:10px;padding:3px;margin-bottom:16px}
.cf-style-btn{flex:1;border:none;background:none;padding:9px;border-radius:8px;font-size:13px;font-weight:700;color:#8b93a5;cursor:pointer;transition:background .15s,color .15s}
.cf-style-btn.active{background:#3b82f6;color:#fff}

.cf-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.cf-field{display:flex;flex-direction:column;gap:5px}
.cf-field span{font-size:11.5px;font-weight:700;color:#8b93a5;text-transform:uppercase;letter-spacing:.04em}
.cf-field input{border:1.5px solid #272c37;background:#12151b;border-radius:9px;padding:10px 12px;font-size:13.5px;color:#e7e9ee;font-family:inherit;outline:none;transition:border-color .15s}
.cf-field input:focus{border-color:#3b82f6}

.cf-output{background:#12151b;border:1px solid #272c37;border-radius:12px;padding:16px}
.cf-citation{font-size:14px;line-height:1.65;color:#e7e9ee;margin-bottom:12px;word-break:break-word}
.cf-citation i{font-style:italic}
.cf-copy{background:#242938;color:#c9cfdb;border:1px solid #323950;border-radius:8px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.cf-copy:hover{background:#2c3244;color:#fff}
.cf-copy.cf-copied{background:#16a34a;border-color:#16a34a;color:#fff}

var style = 'apa';

var fields = {
  author: document.getElementById('cfAuthor'),
  title: document.getElementById('cfTitle'),
  publication: document.getElementById('cfPublication'),
  year: document.getElementById('cfYear'),
  url: document.getElementById('cfUrl'),
};
var citationEl = document.getElementById('cfCitation');
var copyBtn = document.getElementById('cfCopy');

function escapeHtml(s) {
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// "Jane A. Smith" -> "Smith, J. A." (APA: initials only for first/middle names)
function authorApa(full) {
  var parts = full.trim().split(/\s+/).filter(Boolean);
  if (parts.length === 0) return '';
  if (parts.length === 1) return parts[0];
  var last = parts.pop();
  var initials = parts.map(function (p) { return p.charAt(0).toUpperCase() + '.'; }).join(' ');
  return last + ', ' + initials;
}

// "Jane A. Smith" -> "Smith, Jane A." (MLA: full first/middle names kept)
function authorMla(full) {
  var parts = full.trim().split(/\s+/).filter(Boolean);
  if (parts.length === 0) return '';
  if (parts.length === 1) return parts[0];
  var last = parts.pop();
  return last + ', ' + parts.join(' ');
}

// Titles/sentences don't get a second terminal period if they already end in . ! or ?
function withTerminal(text, punct) {
  var t = text.trim();
  if (!t) return '';
  var last = t.charAt(t.length - 1);
  if (last === '.' || last === '!' || last === '?') return t;
  return t + punct;
}

// MLA style omits the leading http:// or https:// from URLs.
function stripProtocol(url) {
  return url.trim().replace(/^https?:\/\//i, '');
}

function buildApa(v) {
  var author = authorApa(v.author);
  var year = v.year.trim();
  var title = withTerminal(v.title, '.');
  var pub = withTerminal(v.publication, '.');
  var url = v.url.trim();

  var out = '';
  if (author) out += escapeHtml(author) + ' ';
  if (year) out += '(' + escapeHtml(year) + '). ';
  if (title) out += '<i>' + escapeHtml(title) + '</i> ';
  if (pub) out += escapeHtml(pub) + ' ';
  if (url) out += escapeHtml(url);
  return out.trim();
}

function buildMla(v) {
  var author = authorMla(v.author);
  var year = v.year.trim();
  var title = withTerminal(v.title, '.');
  var pub = v.publication.trim();
  var url = stripProtocol(v.url);

  var out = '';
  if (author) out += escapeHtml(withTerminal(author, '.')) + ' ';
  if (title) out += '&quot;' + escapeHtml(title) + '&quot; ';
  if (pub) out += '<i>' + escapeHtml(pub) + '</i>, ';
  if (year) out += escapeHtml(year) + ', ';
  if (url) out += escapeHtml(url) + '.';
  return out.trim();
}

function plainText(html) {
  return html.replace(/<i>/g, '').replace(/<\/i>/g, '').replace(/&quot;/g, '"').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}

function render() {
  var v = {
    author: fields.author.value,
    title: fields.title.value,
    publication: fields.publication.value,
    year: fields.year.value,
    url: fields.url.value,
  };
  var html = style === 'apa' ? buildApa(v) : buildMla(v);
  citationEl.innerHTML = html || 'Fill in the fields above to build a citation.';
  copyBtn.classList.remove('cf-copied');
  copyBtn.textContent = 'Copy citation';
}

document.querySelector('.cf-style').addEventListener('click', function (e) {
  var btn = e.target.closest('.cf-style-btn');
  if (!btn) return;
  style = btn.dataset.style;
  document.querySelectorAll('.cf-style-btn').forEach(function (b) { b.classList.toggle('active', b === btn); });
  render();
});

Object.keys(fields).forEach(function (key) {
  fields[key].addEventListener('input', render);
});

copyBtn.addEventListener('click', function () {
  var text = plainText(citationEl.innerHTML);
  var done = function () {
    copyBtn.classList.add('cf-copied');
    copyBtn.textContent = 'Copied \u2713';
    setTimeout(function () {
      copyBtn.classList.remove('cf-copied');
      copyBtn.textContent = 'Copy citation';
    }, 1600);
  };
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text).then(done).catch(function () {});
  } else {
    var ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    try { document.execCommand('copy'); done(); } catch (err) {}
    document.body.removeChild(ta);
  }
});

render();