Moji-Code

Visual cues for faster code comprehension Supplement JavaScript, HTML, and CSS keywords with emoji visual symbols to reduce cognitive load and enhance pattern recognition.

🧩 The Problem

Your brain wasn't designed to read code.

When you read code, your working memory is constantly translating:

return → "send a value back"
<div> → "container element"
display: flex → "flexbox layout"
@media → "responsive breakpoint"

This mental translation layer consumes focus, slows comprehension, and drains working memory—memory you need for actually understanding logic, state, and intent.

Meanwhile, your brain is exceptional at:

✅ Recognizing visual patterns
✅ Processing images instantly
✅ Remembering emotionally-tagged symbols
❌ Not decoding arbitrary text tokens

Programming forces you to work against your brain's strengths.

💡 The Solution

Moji-Code supplements each keyword with a visual symbol:

🔙 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—the emoji adds a second, intuitive channel for meaning.

Less translation. More comprehension.

🎯 How It Works

This extension uses VS Code's decoration APIs to render emojis alongside code keywords:

Scans your document for keywords in JavaScript, HTML, and CSS
Renders emojis inline (visual overlay only)
Keeps source code untouched—no modifications, ever

Your code remains:

✅ Standard JavaScript, HTML, and CSS
✅ Portable and shareable
✅ Production-safe
✅ Tool-compatible

This is a cognitive overlay, not a syntax change.

🧠 Why This Helps

Reduced Cognitive Load

Keyword decoding happens in parallel with visual recognition, freeing working memory for:

Control flow
Data flow
State management
Business logic

Faster Pattern Recognition

Emojis create visual landmarks in code:

Spot 🔙 return statements instantly
Identify ⏳ await points at a glance
Track 🔁 for loops by shape, not text
See 📦 div containers immediately

Enhanced Memorability

Visual symbols trigger stronger recall than abstract tokens:

❓ = decision
💥 = error
🔙 = exit with value
📺 = media query

📦 Features

Multi-language: JavaScript, HTML, and CSS support
Non-invasive: Source code never modified
Reversible: Toggle on/off anytime
Configurable: Enable/disable individual emojis via Settings panel
Consistent: One emoji per keyword, everywhere
Safe: Zero impact on tooling, linting, or collaboration
Readable: Designed for comprehension, not decoration

🗂️ Supported Languages

JavaScript (35 keywords)

Control Flow if ❓ · else ↪️ · switch 🎚️ · case 📋 · break 🛑 · continue ⏭️ · return 🔙

Loops for 🔁 · while 🔂 · do 🔄

Declarations function ⚡ · class 🏛️ · const 🔒 · let 📦 · var 📝

Async/Generators async 🚀 · await ⏳ · yield 🌾

Error Handling try 🤞 · catch 🥅 · throw 💥 · finally 🏁

Modules import 📥 · export 📦 · default 📌

Operators new ✨ · typeof 🏷️ · instanceof 🔎 · delete 🗑️ · in 📍 · void 🕳️

Other this 👆 · super 🦸 · extends 🧬 · with 🤝 · debugger 🐛 · enum 📊

HTML (60+ elements)

Document Structure <html> 🌐 · <head> 🧠 · <body> 🦴 · <title> 👑

Content Containers <div> 📦 · <span> 🔖 · <p> 📄 · <section> 📐 · <article> 📓 · <aside> 📌

Navigation & Links <nav> 🧭 · <a> 🔗 · <header> 📰 · <footer> 👟 · <main> 🏠

Headings <h1> 1️⃣ · <h2> 2️⃣ · <h3> 3️⃣ · <h4> 4️⃣ · <h5> 5️⃣ · <h6> 6️⃣

Lists & Tables <ul> 📝 · <ol> 🔢 · <li> ▪️ · <table> 📊 · <tr> ➡️ · <td> 📎 · <th> 🏷️

Forms <form> 📑 · <input> ⌨️ · <button> 🔘 · <select> 📂 · <textarea> ✏️ · <label> 🪧

Media <img> 🖼️ · <video> 🎬 · <audio> 🔊 · <canvas> 🖌️ · <iframe> 🪟

Void Elements <br> ↩️ · <hr> ➖ · <meta> ℹ️ · <link> ⛓️ · <source> 📡

Attributes class 🏛️ · id 🆔 · href 🌍 · src 📥 · alt 🗣️ · style 🎭 · disabled 🚫 · required ❗

CSS (32 properties)

At-Rules @media 📺 · @keyframes 🎬 · @import 📥 · @font-face 🔤 · @supports ✅

Layout display 🖥️ · flex 📦 · grid 🔲 · position 📍 · float 🎈

Box Model margin ⬜ · padding 🔳 · border 🔲 · width ↔️ · height ↕️

Visual background 🖼️ · color 🎨 · opacity 👻 · transform 🔄 · animation 🎬 · transition ⏳ · visibility 👁️ · cursor 👆

Pseudo-classes :hover 🖱️ · :focus 🎯 · :active ⚡ · :first-child 👒 · :last-child 👴

Values !important ❗ · none 🚫 · auto 🤖 · inherit 👪

🚀 Installation

Open VS Code
Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
Search for "MojiCode"
Click Install

🛠️ Usage

Once installed, emojis appear automatically in JavaScript, HTML, and CSS files.

Toggle the extension:

Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Type: Moji-Code: Toggle

Configure emojis:

Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Type: Moji-Code: Settings
Use the visual settings panel to enable/disable individual emojis

Display modes:

Overlay (default): Emoji appears before the keyword, keyword remains visible
Replace: Emoji replaces the keyword text visually

🧪 Who This Is For

Learners who want faster keyword-to-meaning mapping
Experienced developers seeking lower mental friction
Visual thinkers who prefer pattern recognition over text parsing
Anyone who reads a lot of code and values cognitive efficiency

🌱 Roadmap

🎓 Learning mode: Emoji + text, then fade text over time
🎨 Custom mappings: Choose your own emojis
🌍 More languages: TypeScript, Python, Go, etc.
🔧 Operator visualization: Beyond keywords
♿ Accessibility modes: High-contrast, alternative symbols

🧩 Philosophy

Focus on logic, not translation.

This extension is a step toward tools that adapt to human cognition, not the other way around.

Your brain is a pattern-matching engine. Let it work the way it was designed.

🤝 Contributing

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

📄 License

Proprietary, please see license details.

❓ FAQ

What is the privacy policy? 100% Private. No logs, network calls, nothing. Your data is yours.

Does this change my code? No. The extension only affects how you see code in VS Code. Your files remain unchanged.

Will this break my workflow? No. Your code is still standard JavaScript, HTML, and CSS. Linting, formatting, and version control work normally.

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)
Instantly recognizable
Emotionally tagged (better recall)
Lightweight (no performance impact)

Can I disable specific emojis? Yes! Open the Settings panel (Moji-Code: Settings command) to toggle individual emojis on/off for each language.

Is this scientifically proven? The cognitive science behind visual processing, dual coding theory, and reduced working memory load is well-established. This extension applies those principles to code reading.

Made with 🧠 for developers who think visually

100% Private.

####################################################################################################################

Also available:

MojiCode Pro:

If you're interested in:

-Support for all of the most popular languages. -Enhanced customization features and UI. -Long term support.

🗂️MojiCode Pro Supported Languages

JavaScript (35 keywords)

TypeScript (57 keywords)

Python (34 keywords)

C (32 keywords)

C++ (73 keywords)

C# (97 keywords)

Java (60 keywords)

SQL (120+ keywords)

HTML (60+ elements)

CSS (32 properties)

COMING SOON

Support for the following languages will be inluded in future updates:

Stage 1:

-Go -PHP -Rust -Kotlin -Swift -Dart -Ruby

Stage 2:

-R -Scala -Perl -Objective C -Elixir -Haskell -MATLAB

Happy coding!

###################################################################################################################

MojiCode

Lucidian