Moji

Visual cues for faster code comprehension. Supplements JavaScript, HTML, and CSS keywords with inline emoji symbols to reduce cognitive load and speed up pattern recognition.

Overview

Reading code requires constant mental translation — return means "send a value back," <div> means "container," @media means "responsive breakpoint." This translation layer occupies working memory that could be spent understanding logic, state, and intent.

Moji-Code adds a parallel visual channel by rendering emoji alongside keywords:

🔙 return user;
💥 throw new Error();
⏳ await fetchData();
❓ if (isValid) { ... }

<📦 div class="container">
  <🔗 a href="/home">Home</🔗 a>
</📦 div>

📺 @media (max-width: 768px) {
  🖥️ display: 📦 flex;
  ⬜ margin: 🤖 auto;
}

The original text stays intact. This is a visual overlay, not a syntax change — your source files are never modified.

How It Works

The extension uses VS Code's decoration APIs to:

1. Scan the active document for recognized keywords
2. Render emojis inline as visual overlays
3. Leave source code completely untouched

Your code remains standard, portable, and tool-compatible. Linting, formatting, and version control are unaffected.

Features

• Multi-language — JavaScript, HTML, and CSS
• Non-invasive — source files are never modified
• Configurable — enable/disable individual emojis via a settings panel
• Reversible — toggle on/off from the Command Palette
• Two display modes — overlay (emoji + keyword) or replace (emoji only)

Installation

1. Open VS Code
2. Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
3. Search for Moji
4. Click Install

Emojis appear automatically in supported file types once the extension is active.

Usage

Toggle on/off: Command Palette → Moji-Code: Toggle

Configure individual emojis: Command Palette → Moji-Code: Settings

Privacy

Moji-Code makes zero network calls. No telemetry, no analytics, no data collection. Everything runs locally in your editor.

FAQ

Does this modify my source files? No. The extension only affects the visual rendering in VS Code. Your files on disk are unchanged.

Can collaborators see the emojis? Only if they also have the extension installed. Source files are unaffected.

Why emojis instead of icons? Emojis are universal (no asset loading), lightweight (no performance cost), and leverage existing emotional/visual associations for better recall. The approach draws on dual coding theory and research on visual processing and working memory.

Can I disable specific emojis? Yes. The settings panel lets you toggle individual emojis on or off per language.

Contributing

Found a bug or have a suggestion? Open an issue or submit a PR on GitHub.

License

See license for details.

Moji Pro

For expanded language support and enhanced customization, Moji Pro covers 10 languages with more on the way.

https://marketplace.visualstudio.com/items?itemName=Lucidian.moji-pro

Supported Languages

Planned Language Support

Stage 1: Go, PHP, Rust, Kotlin, Swift, Dart, Ruby

Stage 2: R, Scala, Perl, Objective-C, Elixir, Haskell, MATLAB