# How to Render Emojis in GitHub Repository Descriptions: Client-Side Processing Guide

> Learn how resume.github.com renders emojis in repo descriptions using client-side JavaScript regex and Mustache. See :smile: transform into image tags.

- Repository: [GitHub resume generator/resume.github.com](https://github.com/resume/resume.github.com)
- Tags: how-to-guide
- Published: 2026-03-04

---

**Resume.github.com converts GitHub emoji shortcodes like `:smile:` into HTML image tags pointing to GitHub's CDN using client-side JavaScript regex replacement and Mustache templates.**

The `resume/resume.github.com` project generates visual resumes from GitHub profile data, including repository descriptions that may contain emoji shortcodes. Understanding how this application renders GitHub repository description emojis reveals a lightweight client-side approach that avoids server-side processing while leveraging GitHub's existing emoji infrastructure.

## The Emoji Rendering Pipeline

The implementation follows a three-stage pipeline: API data retrieval, regex-based substitution, and unescaped template rendering.

### Fetching Data from the GitHub API

In [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js), the `github_user_repos` function retrieves public repository information via the GitHub API. The API returns repository metadata including the `description` field unchanged, which may contain standard GitHub emoji shortcodes such as `:rocket:` or `:star:`.

### Converting Shortcodes to Image Elements

Immediately after receiving the API response, the script processes the description field using a regular expression replacement (lines 19-23 in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js)):

```javascript
var emojiPattern = /:([a-z0-9_\+\-]+):/g;
var imagePattern = "<img width='20' height='20' src='https://assets-cdn.github.com/images/icons/emoji/$1.png' />";
var description = repo.info.description;
repo.info.description = description
    ? description.replace(emojiPattern, imagePattern)
    : description;

```

The **regex pattern** `/:([a-z0-9_\+\-]+):/g` captures shortcode names containing lowercase letters, numbers, underscores, plus signs, and hyphens. The **replacement string** constructs an `img` element with fixed 20x20 pixel dimensions, loading the corresponding PNG from `https://assets-cdn.github.com/images/icons/emoji/`. The `$1` placeholder inserts the captured shortcode name into the CDN URL.

### Rendering HTML with Mustache Templates

The processed description—now containing HTML `img` tags—is passed to a Mustache view object. The template in [`views/job.html`](https://github.com/resume/resume.github.com/blob/main/views/job.html) (line 7) uses **triple-brace syntax** to prevent HTML escaping:

```mustache
<p>{{{description}}} {{#homepage}}<a href="{{homepage}}">{{homepage}}</a>{{/homepage}}</p>

```

Triple mustaches `{{{description}}}` instruct Mustache to render the content unescaped. Standard double braces `{{description}}` would escape HTML entities, causing the image tags to display as literal text rather than rendering the emoji graphics.

## Complete Implementation Workflow

The following consolidated example demonstrates the full process from API response to DOM insertion:

```javascript
// Configure emoji transformation
var emojiPattern = /:([a-z0-9_\+\-]+):/g;
var imagePattern = "<img width='20' height='20' " +
    "src='https://assets-cdn.github.com/images/icons/emoji/$1.png' />";

// Process repository description
var description = repo.info.description;
repo.info.description = description
    ? description.replace(emojiPattern, imagePattern)
    : description;

// Construct Mustache view object
var view = {
  name: repo.info.name,
  description: repo.info.description, // Now contains <img> tags
  homepage: repo.info.homepage,
  username: username,
  language: repo.info.language,
  date: date
};

// Render and inject HTML
var template = // contents of views/job.html;
var html = Mustache.to_html(template, view);
$('#jobs').append($(html));

```

This approach transforms `:shortcode:` patterns into `<img width='20' height='20' src='https://assets-cdn.github.com/images/icons/emoji/shortcode.png' />` elements before the template engine processes the view data.

## Key Files and Responsibilities

| File | Role | Key Implementation Detail |
|------|------|---------------------------|
| [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) | API integration and emoji processing | Contains `github_user_repos` function and regex replacement logic (lines 19-23) |
| [`views/job.html`](https://github.com/resume/resume.github.com/blob/main/views/job.html) | Mustache template rendering | Uses `{{{description}}}` triple mustache syntax (line 7) to allow unescaped HTML |
| `README.markdown` | Project documentation | References emoji handling capabilities |

## Summary

- **Client-side regex replacement** converts GitHub emoji shortcodes to HTML image tags immediately after API data retrieval, avoiding server-side processing overhead.
- **Pattern matching** uses `/:([a-z0-9_\+\-]+):/g` to identify valid shortcodes containing alphanumeric characters, underscores, plus signs, and hyphens.
- **GitHub's emoji CDN** serves PNG assets from `https://assets-cdn.github.com/images/icons/emoji/{shortcode}.png` using the captured pattern group.
- **Unescaped template rendering** via Mustache's triple-brace syntax `{{{description}}}` ensures HTML image tags render as visual elements rather than escaped text.

## Frequently Asked Questions

### Why does the implementation use triple braces in Mustache templates?

Standard double braces escape HTML special characters, converting `<img>` tags into `&lt;img&gt;` text that displays literally on the page. Triple braces `{{{description}}}` render the HTML unescaped, allowing the emoji images to appear correctly. This is essential because the JavaScript preprocessing step converts shortcodes into raw HTML strings that must be interpreted by the browser.

### What emoji shortcode formats does this regex support?

The regular expression `/:([a-z0-9_\+\-]+):/g` supports standard GitHub shortcodes containing lowercase letters, numbers, underscores, plus signs, and hyphens. This pattern accommodates common codes like `:smile:`, `:+1:`, and `:heavy_check_mark:`, covering the standard GitHub emoji set available at the time of implementation.

### Is the emoji rendering performed server-side or client-side?

The transformation occurs entirely in the client-side JavaScript within [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js). After fetching JSON data from the GitHub API, the browser executes regex operations to replace shortcodes with image tags before Mustache renders the template. This architecture minimizes server processing requirements and directly utilizes GitHub's CDN infrastructure.

### Can this approach handle GitHub's custom or animated emojis?

This implementation relies on GitHub's legacy emoji CDN at `assets-cdn.github.com`, which serves static PNG files for standard Unicode emojis. While it handles all standard shortcodes supported by the regex pattern, it does not support GitHub's custom reaction emojis or animated variants introduced in later platform updates. Modern implementations may require updated CDN paths or Unicode-based rendering strategies.