MIME TYPES

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

const MIMES = [
    // Web
    ['html','text/html','web'],['css','text/css','web'],['js','text/javascript','web'],['mjs','application/javascript','web'],
    ['json','application/json','web'],['xml','application/xml','web'],['xhtml','application/xhtml+xml','web'],['txt','text/plain','web'],
    ['md','text/markdown','web'],['webmanifest','application/manifest+json','web'],['map','application/json','web'],
    // Image
    ['jpg','image/jpeg','image'],['jpeg','image/jpeg','image'],['png','image/png','image'],['gif','image/gif','image'],
    ['webp','image/webp','image'],['svg','image/svg+xml','image'],['bmp','image/bmp','image'],['tiff','image/tiff','image'],
    ['avif','image/avif','image'],['ico','image/x-icon','image'],['heic','image/heic','image'],['heif','image/heif','image'],
    ['jxl','image/jxl','image'],['apng','image/apng','image'],
    // Video
    ['mp4','video/mp4','video'],['webm','video/webm','video'],['ogg','video/ogg','video'],['mpeg','video/mpeg','video'],
    ['mov','video/quicktime','video'],['avi','video/x-msvideo','video'],['mkv','video/x-matroska','video'],
    ['3gp','video/3gpp','video'],['flv','video/x-flv','video'],['wmv','video/x-ms-wmv','video'],['ts','video/mp2t','video'],
    // Audio
    ['mp3','audio/mpeg','audio'],['ogg','audio/ogg','audio'],['wav','audio/wav','audio'],['aac','audio/aac','audio'],
    ['flac','audio/flac','audio'],['m4a','audio/x-m4a','audio'],['midi','audio/midi','audio'],['opus','audio/opus','audio'],
    ['amr','audio/amr','audio'],['weba','audio/webm','audio'],
    // Document
    ['pdf','application/pdf','document'],['doc','application/msword','document'],
    ['docx','application/vnd.openxmlformats-officedocument.wordprocessingml.document','document'],
    ['xls','application/vnd.ms-excel','document'],
    ['xlsx','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','document'],
    ['ppt','application/vnd.ms-powerpoint','document'],
    ['pptx','application/vnd.openxmlformats-officedocument.presentationml.presentation','document'],
    ['odt','application/vnd.oasis.opendocument.text','document'],
    ['ods','application/vnd.oasis.opendocument.spreadsheet','document'],
    ['csv','text/csv','document'],['rtf','application/rtf','document'],['epub','application/epub+zip','document'],
    // Data
    ['jsonld','application/ld+json','data'],['geojson','application/geo+json','data'],
    ['yaml','application/x-yaml','data'],['yml','application/x-yaml','data'],['toml','application/toml','data'],
    ['sql','application/sql','data'],['cbor','application/cbor','data'],['ndjson','application/x-ndjson','data'],
    // Archive
    ['zip','application/zip','archive'],['tar','application/x-tar','archive'],['gz','application/gzip','archive'],
    ['bz2','application/x-bzip2','archive'],['7z','application/x-7z-compressed','archive'],
    ['rar','application/x-rar-compressed','archive'],['xz','application/x-xz','archive'],
    ['jar','application/java-archive','archive'],['cab','application/vnd.ms-cab-compressed','archive'],
    // Font
    ['woff','font/woff','font'],['woff2','font/woff2','font'],['ttf','font/ttf','font'],['otf','font/otf','font'],
    ['eot','application/vnd.ms-fontobject','font'],
    // Other
    ['bin','application/octet-stream','other'],['wasm','application/wasm','other'],
    ['ics','text/calendar','other'],['vcf','text/vcard','other'],['sh','application/x-sh','other'],
    ['swf','application/x-shockwave-flash','other'],['pem','application/x-pem-file','other'],
  ];

  let activecat = 'all';

  function buildGrid() {
    document.getElementById('mimeGrid').innerHTML = MIMES.map(([ext, mime, cat]) =>
      `<div class="mime-card" data-ext="${ext}" data-mime="${mime}" data-cat="${cat}">
        <div class="mime-ext">.${ext.toUpperCase()}</div>
        <div class="mime-info">
          <div class="mime-type">${mime}</div>
          <div class="mime-cat">${cat}</div>
        </div>
        <button class="mime-copy" onclick="copyMime('${mime}', this)">copy</button>
      </div>`
    ).join('');
    filter();
  }

  function setCat(cat, btn) {
    activecat = cat;
    document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
    btn.classList.add('active');
    filter();
  }

  function filter() {
    const q = document.getElementById('searchInput').value.toLowerCase();
    const cards = document.querySelectorAll('.mime-card');
    let visible = 0;
    cards.forEach(card => {
      const catMatch = activecat === 'all' || card.dataset.cat === activecat;
      const qMatch = !q || card.dataset.ext.includes(q) || card.dataset.mime.includes(q);
      const show = catMatch && qMatch;
      card.classList.toggle('hidden', !show);
      if (show) visible++;
    });
    document.getElementById('resultCount').textContent = `Showing ${visible} of ${MIMES.length} MIME types`;
  }

  function copyMime(mime, btn) {
    navigator.clipboard.writeText(mime).catch(() => {});
    btn.textContent = 'copied!'; btn.classList.add('copied');
    setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('copied'); }, 2000);
  }

  buildGrid();