Word Meaning Plugin

Drop this plugin on any website and let your users look up any word — just double-click it. Get the meaning, synonyms, antonyms, and examples in Hindi and 8 other Indian languages, powered by AI. No complex setup. Just 2 lines of code.

✨ Features

| Feature | Description | |---|---| | 🌐 Multi Language | 9 Indian languages — Hindi, Tamil, Bengali, Gujarati, Marathi, Telugu, Kannada, Punjabi | | 🧠 Context Aware | Uses surrounding text to give the most accurate meaning | | 🏷 Part of Speech | Noun, verb, adjective, adverb and more | | 💬 Synonyms & Antonyms | 3 synonyms and 2 antonyms with color coded tags | | 📖 Example Sentence | Real usage example sentence | | 🔊 Text to Speech | Listen to meaning in native language voice | | ⚡ Pronunciation Speed | Slow (0.5×), Normal (1×), Fast (2×) | | 🎤 Voice Search | Speak any word — get meaning instantly | | 🖊 Text Formatting | Highlight text in 9 colors · Bold selected text | | 📌 Pin / Save Words | Save words for later — stored in localStorage | | 🕐 Word History | Last 50 looked-up words with timestamps |

🚀 Quick Start

Option 1 — CDN (Recommended, No Install)

Paste these 2 lines before </body> on any HTML page:

<script src="https://cdn.jsdelivr.net/npm/word-meaning-plugin/dist/word-meaning-plugin.umd.js"></script>
<script>
  WordMeaningPlugin.init({
    serverUrl: "https://word-meaning-server.vercel.app"
  });
</script>

That's it! Double-click any word on your page to see it in action.

Option 2 — npm Install

npm install word-meaning-plugin

React:

import { useEffect } from 'react';
import WordMeaningPlugin from 'word-meaning-plugin';

function App() {
  useEffect(() => {
    WordMeaningPlugin.init({
      serverUrl: "https://word-meaning-server.vercel.app"
    });
  }, []);

  return <div>Your App</div>;
}

Vanilla JS / ES Module:

import WordMeaningPlugin from 'word-meaning-plugin';

WordMeaningPlugin.init({
  serverUrl: "https://word-meaning-server.vercel.app"
});

Next.js:

// pages/_app.js or app/layout.js
import { useEffect } from 'react';
import WordMeaningPlugin from 'word-meaning-plugin';

export default function App({ Component, pageProps }) {
  useEffect(() => {
    WordMeaningPlugin.init({
      serverUrl: "https://word-meaning-server.vercel.app"
    });
  }, []);

  return <Component {...pageProps} />;
}

🎯 How to Use

| Action | Result | |---|---| | Double-click any word | Meaning popup opens instantly | | Select text (multiple words) | Toolbar appears — Highlight / Bold / Meaning | | 📚 FAB button (bottom right) | Opens side panel | | Side panel → 🎤 Mic | Voice search — speak a word | | 📌 icon in popup | Save word to your list | | Language dropdown in popup | Switch language instantly | | 0.5× / 1× / 2× buttons | Change pronunciation speed |

🌐 Supported Languages

| Language | Script | |---|---| | English | Latin | | Hindi | हिन्दी | | Marathi | मराठी |

💡 Use Cases

📚 Educational

• Online study portals — students can look up difficult words instantly
• E-learning platforms like Coursera, Udemy style sites — word lookup while reading articles
• School / college websites — helps Hindi medium students understand English words

📰 News & Reading

• News websites — meaning of complex political or economic words
• Blog platforms — keep readers engaged with instant definitions
• Digital libraries — dictionary while reading books or articles

💼 Professional

• Legal websites — simple meaning of legal terms
• Medical portals — explain medical terminology
• Government websites — understand difficult official language

🛒 E-commerce

• Product descriptions — explain technical words
• Review sections — help users understand in their own language

🌍 Multi-language Sites

• Hindi / regional language websites — English word meaning in regional language
• Translation tools — meaning with extra context

⚙️ Configuration

WordMeaningPlugin.init({
  serverUrl: "https://word-meaning-server.vercel.app"  // Backend URL
});

| Option | Type | Default | Description | |---|---|---|---| | serverUrl | string | "" | Your deployed backend URL |

🛠 Tech Stack

• Frontend — Vanilla JS, CSS3, Web Speech API
• Backend — Vercel Serverless Functions
• AI Model — Groq API (LLaMA 3.3 70B Versatile)
• Storage — localStorage (history + saved words)
• TTS — Browser SpeechSynthesis API

📦 Bundle

| File | Format | Use | |---|---|---| | dist/word-meaning-plugin.umd.js | UMD | CDN / browser script tag | | dist/word-meaning-plugin.esm.js | ESM | React / Vue / bundlers |

🔗 Links

• npm Package
• GitHub Repository
• Backend Server

📄 License

MIT © Adi