MarkForge — Markdown Studio

Modern, responsive and PDF-focused Markdown editor. ✨
Create, preview and export beautiful Markdown documents with ease.

MarkForge is a Markdown workspace built with Next.js 16 (App Router), React 19 and Tailwind CSS 4. It provides live preview, PDF export, file upload, and a bilingual TR/EN interface.

---

🔗 Live Demo

• Production: https://markforge.netlify.app

---

🌍 English

✨ Features

• Live Markdown Editor

  • Markdown input on the left, instant HTML preview on the right.
  • Powered by react-markdown, remark-gfm and rehype-raw:
    • GFM (tables, checkboxes, strikethrough, links, etc.)
    • HTML blocks and details/summary support.

• Syntax Highlighting for Code Blocks

  • rehype-highlight + highlight.js for language detection and highlighting.
  • Consistent dark theme both in-app and in the generated PDF.

• PDF Export

  • Preview panel can be opened in a new tab for print/PDF view.
  • PDF options:
    • Font size: 8–14 pt (0.5 steps).
    • Line wrapping for long code lines (no horizontal overflow).
  • PDF footer:
    • TR: Bu PDF MarkForge ile oluşturulmuştur.
    • EN: This PDF was generated with MarkForge.
    • Clickable MarkForge logo.

• File Upload

  • Accepts .md and .markdown files:
    • File picker button
    • Drag & drop area
  • Elegant modal for invalid file types (no native alert).

• TR / EN Localization

  • Built with i18next and react-i18next:
    • Navbar labels
    • All buttons and modals
    • Empty-state and error messages
    • Static strings in the PDF
  • Instant language switch via TR / EN buttons in the navbar.

• Version History

  • Content is stored in localStorage.
  • Defaults:
    • Snapshot taken 2 seconds after changes.
    • Up to 50 versions are kept.
  • History modal:
    • Timestamped entries with content preview
    • Delete version and restore with a single click.

• Table & Link Modals

  • Table modal:
    • Generates Markdown tables from row / column counts.
  • Link modal:
    • URL + optional label field.
    • Uses selected text as the label when available, otherwise falls back to the URL.

• Mobile Experience

  • Below 1024px:
    • Navbar: MarkForge on the left, waving Turkish flag GIF centered, animated hamburger menu on the right.
    • Hamburger → full-width mobile menu:
      • Top: File upload (full width)
      • Next row: History & PDF buttons on the same line
      • Bottom-right: TR / EN language toggle
  • Below 768px (content):
    • First view: only the editor, full-height single column.
    • Right arrow in the editor header to slide to the preview.
    • Left arrow in the preview header to slide back to the editor.

• Usability Enhancements

  • “Scroll to top” buttons for both editor and preview (visible based on scroll).
  • Word / character counter:
    • TR: X kelime · Y karakter
    • EN: X words · Y characters

---

🚀 Installation

Clone the repository and install dependencies:

git clone <REPO_URL>
cd toolsformarkdownfiles
npm install

Start the development server:

npm run dev

Then open http://localhost:3000 in your browser.

---

🧰 NPM Scripts

• Development:

  npm run dev

• Production build:

  npm run build

• Production server:

  npm run start

• Lint:

  npm run lint

---

🧱 Tech Stack

• Frameworks & Languages

  • Next.js 16 (App Router)
  • React 19
  • TypeScript

• Styling & UI

  • Tailwind CSS 4
  • @tailwindcss/typography

• Markdown & PDF

  • react-markdown
  • remark-gfm
  • rehype-raw
  • rehype-highlight

• Internationalization

  • i18next
  • react-i18next

• Animation

  • framer-motion

---

🤝 Contributing

If you find a bug or have an idea for improvement, feel free to open an issue or submit a pull request.

If you like the project, consider starring it on GitHub.

---

📜 License

MarkForge is released under a custom non-commercial, source-available license.
You are free to read, use, modify and share the code for non-commercial purposes.
Any commercial use (products, services or SaaS that generate revenue) requires a separate commercial license from the author.
For full terms, see the LICENSE file.

---

🇹🇷 Türkçe

✨ Özellikler

• Canlı Markdown Editörü

  • Sol tarafta Markdown girişi, sağda anlık HTML önizleme.
  • react-markdown, remark-gfm ve rehype-raw ile:
    • GFM (tablo, checkbox, üstü çizili, link vb.)
    • HTML blokları ve details/summary desteği.

• Kod Bloklarında Syntax Highlighting

  • rehype-highlight + highlight.js ile dil tespiti ve vurgulama.
  • Uygulama içinde ve PDF çıktısında tutarlı koyu tema.

• PDF Çıktısı

  • Önizleme paneli; yeni sekmede yazdırma/PDF görünümüne açılır.
  • PDF ayarları:
    • Yazı boyutu: 8–14 pt (0.5 adım ile).
    • Kod bloklarında uzun satırlar için satır kırma (yan tarafta taşma yok).
  • PDF altbilgisi:
    • TR: Bu PDF MarkForge ile oluşturulmuştur.
    • EN: This PDF was generated with MarkForge.
    • Tıklanabilir MarkForge logosu.

• Dosya Yükleme

  • .md ve .markdown dosyaları:
    • Dosya seçme butonu
    • Sürükle-bırak bölgesi
  • Geçersiz uzantılarda şık modal uyarı (native alert kullanılmıyor).

• TR / EN Dil Desteği

  • i18next ve react-i18next ile:
    • Navbar metinleri
    • Tüm butonlar ve modallar
    • Boş ekran mesajları, hata mesajları
    • PDF’teki statik metinler
  • Navbar’da TR / EN butonları ile anında dil değişimi.

• Versiyon Geçmişi

  • İçerik localStorage içinde saklanır.
  • Varsayılan:
    • Değişiklikten 2 sn sonra snapshot alınır.
    • En fazla 50 versiyon tutulur.
  • Versiyon geçmişi modalı:
    • Tarih/saat + içerik önizlemesi
    • Versiyon silme ve tek tıkla geri yükleme.

• Tablo & Link Modalı

  • Tablo modalı:
    • Satır / sütun sayısı girerek otomatik Markdown tablo oluşturur.
  • Link modalı:
    • URL + isteğe bağlı görünen metin alanı.
    • Seçili metni otomatik olarak etiket olarak kullanır; yoksa URL’yi kullanır.

• Mobil Deneyim

  • 1024px altında:
    • Navbar: solda MarkForge, ortada dalgalanan Türk bayrağı GIF’i, sağda animasyonlu hamburger menü.
    • Hamburger → tam genişlikli mobil menü:
      • Üstte: Dosya yükle (full width)
      • Altında aynı satırda: History & PDF butonları
      • Sağ altta: TR / EN dil seçimleri
  • 768px altında içerik:
    • İlk görünüm: yalnızca markdown girişi, tek sütun ve tam yükseklikte.
    • Editör başlığındaki sağ ok ile önizlemeye geçiş (kayma animasyonu).
    • Önizleme başlığındaki sol ok ile tekrar editöre dönüş.

• Kullanılabilirlik İyileştirmeleri

  • Editör ve önizleme için “En yukarı” butonları (scroll’a göre görünür).
  • Kelime / karakter sayacı:
    • TR: X kelime · Y karakter
    • EN: X words · Y characters

---

🚀 Kurulum

Projeyi klonlayın ve bağımlılıkları yükleyin:

git clone <REPO_URL>
cd toolsformarkdownfiles
npm install

Geliştirme sunucusunu başlatın:

npm run dev

Ardından tarayıcıda http://localhost:3000 adresine gidin.

---

🧰 NPM Script’leri

• Geliştirme:

  npm run dev

• Prod build:

  npm run build

• Prod server:

  npm run start

• Lint:

  npm run lint

---

🧱 Teknolojiler

• Çatılar & Diller

  • Next.js 16 (App Router)
  • React 19
  • TypeScript

• Stil & UI

  • Tailwind CSS 4
  • @tailwindcss/typography

• Markdown & PDF

  • react-markdown
  • remark-gfm
  • rehype-raw
  • rehype-highlight

• Uluslararasılaştırma

  • i18next
  • react-i18next

• Animasyon

  • framer-motion

---

🤝 Katkı

Hata bulduysanız veya geliştirme öneriniz varsa lütfen issue açın ya da pull request gönderin.

Projeyi beğenirseniz GitHub’da yıldızlamayı unutmayın. 🙂

---

📜 Lisans

MarkForge, özel bir ticari olmayan, kaynak-kodu açık (source-available) lisans ile dağıtılır.
Kodu ticari olmayan amaçlarla inceleyebilir, kullanabilir, değiştirebilir ve paylaşabilirsiniz.
Her türlü ticari kullanım (gelir getiren ürün, servis veya SaaS içinde kullanım) için yazar ile ayrıca ticari lisans anlaşması yapılması gerekir.
Detaylar için LICENSE dosyasına bakabilirsiniz.