maddyShot ابزاری تماماً سمت کاربر (Client-Side) برای تبدیل کد یا متن به تصاویر زیبا و قابل اشتراکگذاری است.
برخلاف ابزارهایی مثل Carbon یا Ray.so، متن راستبهچپ (RTL)، تایپوگرافی فارسی و کدهای دوطرفه (BiDi) را بهدرستی مدیریت میکند.
maddyShot is a client-side SPA that converts code or text into polished, shareable images.
Unlike Carbon, Ray.so, or CodeImage, it handles RTL text, Persian typography, and bidirectional code correctly — so Persian-speaking developers can share beautiful code screenshots without wrestling with layout bugs.
maddyShot یه ابزار سمت کاربر (بدون سرور) برای تبدیل کد یا متن به تصاویر زیبا و قابل انتشار توی شبکههای اجتماعیه.
تفاوتش با Carbon و Ray.so توی پشتیبانی درست از فارسی، RTL و کاراکترهای دوطرفه (BiDi) توی کدهاست — چیزی که هیچکدوم از ابزارهای موجود درست انجام نمیدن.
| English | فارسی |
|---|---|
| Features | قابلیتها |
| Quick Start | شروع سریع |
| Tech Stack | تکنولوژیها |
| Why maddyShot? | چرا maddyShot؟ |
| Screenshots | تصاویر |
| Roadmap | مسیر آینده |
| License | لایسنس |
| Feature / قابلیت | English | فارسی |
|---|---|---|
| 🎨 Syntax Highlighting | 16 themes powered by Shiki (VS Code engine), 22+ languages with auto-detection | ۱۶ تم رنگی با موتور Shiki (همون موتور VS Code)، ۲۲+ زبان با تشخیص خودکار |
| 🔤 RTL / BiDi Support | Automatic direction detection, unicode-bidi: plaintext, Persian number normalization |
تشخیص خودکار جهت متن، unicode-bidi: plaintext، نرمالسازی اعداد فارسی/عربی |
| 🌈 Background | 8 presets, 10 solid colors, gradient builder, transparent mode, custom color picker | ۸ گرادیانت آماده، ۱۰ رنگ ثابت، سازنده گرادیانت اختصاصی، حالت شفاف و color picker |
| 🔠 Typography | Vazirmatn, JetBrains Mono, Fira Code, IBM Plex Mono with adjustable font size (10–24px) | فونتهای Vazirmatn و JetBrains Mono و Fira Code و IBM Plex Mono با اندازه قابل تنظیم |
| 📥 Export | PNG (2x retina) & JPEG with image size presets (Twitter, Instagram, OG) | خروجی PNG با کیفیت ۲x و JPEG با پریستهای اندازه توییتر، اینستاگرام و OG |
| 🔢 Line Numbers | Toggle on/off with dynamic digit width | نمایش/مخفیسازی شماره خطوط با عرض پویا |
| 🪟 Window Controls | macOS-style traffic light dots (🔴🟡🟢) | سه دکمه macOS (🔴🟡🟢) در بالای کارت |
| 💧 Watermark | Optional maddyShot branding on exported images | واترمارک اختیاری maddyShot روی تصویر خروجی |
| 📊 Stats Bar | Real-time line, word, and character count below the editor | آمار زنده خطوط، کلمات و کاراکترها زیر ویرایشگر |
| 🔔 Toast Notifications | Visual feedback on download, copy, reset actions | اعلانهای دیداری برای دانلود، کپی و بازنشانی |
| 📱 Responsive | Collapsible sidebar with hamburger menu, works on mobile | سایدبار جمعشونده با منوی همبرگری، سازگار با موبایل |
| 🔒 Zero Server | Fully client-side — no backend, no data leaves your browser | کاملاً سمت کاربر — بدون سرور، بدون ردپای داده |
| English | فارسی |
|---|---|
git clone https://github.com/Maddyrampant/maddyshot.git
cd maddyshot
npm install
npm run dev |
git clone https://github.com/Maddyrampant/maddyshot.git
cd maddyshot
npm install
npm run dev |
| Open `http://localhost:5173` in your browser. | مرورگرت رو باز کن و برو به `http://localhost:5173` |
|
Build for production: npm run buildDeploy |
ساخت نسخه نهایی: npm run buildفایلهای توی |
| Layer | Choice | Why |
|---|---|---|
| Framework | React 19 + Vite 8 | Fast DX, broad ecosystem, type-safe with TypeScript |
| Styling | Tailwind CSS v4 | Utility-first, rapid development, consistent design tokens |
| Syntax Highlighting | Shiki v4 | VS Code-grade engine, 16 themes, accurate tokenization |
| Image Rendering | html-to-image | DOM → PNG/JPEG conversion with full font support |
| Fonts | Vazirmatn · JetBrains Mono · Fira Code · IBM Plex Mono | Persian + monospace, loaded via Google Fonts |
| English | فارسی | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Existing tools like Carbon, Ray.so, and CodeImage have a blind spot: RTL and Persian text. Here's what happens when you paste Persian code into them:
maddyShot fixes all of these while matching or exceeding the visual quality of existing tools. |
ابزارهای موجود مثل Carbon و Ray.so یه مشکل اساسی دارن: پشتیبانی از RTL و متن فارسی. وقتی کد فارسی توشون میچسبونی این مشکلات پیش میاد:
maddyShot همه اینا رو درست میکنه در حالی که کیفیت بصریش از ابزارهای موجود کمتر نیست. |
Screenshots coming soon — deploy and see it live!
به زودی — پروژه رو اجرا کن و خودت ببین!
| English | فارسی |
|---|---|
|
|
|
MIT © 2026 Maddyrampant |
لایسنس MIT — آزاد برای استفاده شخصی و تجاری |
Built with ❤️ for Persian-speaking developers
ساخته شده با ❤️ برای توسعهدهندههای فارسیزبان