{"id":24160444,"url":"https://github.com/melihcanndemir/markdown-previewer","last_synced_at":"2025-10-24T21:02:58.222Z","repository":{"id":271041276,"uuid":"912230293","full_name":"melihcanndemir/markdown-previewer","owner":"melihcanndemir","description":"A modern and feature-rich Markdown editor and previewer built with React and Vite. Features real-time preview, dark/light themes, auto-save, file import/export, and multiple preview styles.","archived":false,"fork":false,"pushed_at":"2025-01-08T22:00:36.000Z","size":1603,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-12T16:14:09.887Z","etag":null,"topics":["developer-tools","frontend-development","javascript","markdown-editor","netlify","progress-web-app","react","react-hooks","tailwindcss","vite","web-application"],"latest_commit_sha":null,"homepage":"https://webmarkdown.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/melihcanndemir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-05T01:11:59.000Z","updated_at":"2025-01-11T04:00:03.000Z","dependencies_parsed_at":"2025-01-05T02:23:49.091Z","dependency_job_id":"c059029f-f244-4673-9ba0-617a9907588b","html_url":"https://github.com/melihcanndemir/markdown-previewer","commit_stats":null,"previous_names":["melihcanndemir/markdown-previewer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihcanndemir%2Fmarkdown-previewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihcanndemir%2Fmarkdown-previewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihcanndemir%2Fmarkdown-previewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihcanndemir%2Fmarkdown-previewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/melihcanndemir","download_url":"https://codeload.github.com/melihcanndemir/markdown-previewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241455385,"owners_count":19965602,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tools","frontend-development","javascript","markdown-editor","netlify","progress-web-app","react","react-hooks","tailwindcss","vite","web-application"],"created_at":"2025-01-12T16:14:14.253Z","updated_at":"2025-10-24T21:02:53.188Z","avatar_url":"https://github.com/melihcanndemir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📝 Markdown Previewer \n\n![Netlify Status](https://api.netlify.com/api/v1/badges/a11e7b0f-8713-4ebe-af30-c0fd819359f0/deploy-status)\n[![PWA Ready](https://img.shields.io/badge/PWA-ready-blue.svg)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)\n[![Accessibility Score](https://img.shields.io/badge/Accessibility-94%25-success.svg)](https://www.w3.org/WAI/standards-guidelines/aria/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n\u003e A sleek and modern markdown editor and previewer built with React + Vite ⚡\n\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\n## 📸 Screenshots\n\n### 🌞 Light Mode\n![Light Mode](screenshots/light-mode.png)\n\n### 🌚 Dark Mode\n![Dark Mode](screenshots/dark-mode.png)\n\n## ✨ Features\n\n- 🌓 Dark/Light mode with smooth transitions\n- 💾 Real-time auto-save\n- 📱 Fully responsive design for all devices\n- 🚀 Live markdown preview\n- 🎨 Multiple preview styles (Default, GitHub, Elegant)\n- 📋 Import/Export markdown files\n- ⚡ Lightning-fast performance with Vite\n- 🎯 Customizable settings\n- 📊 Optional line numbers\n- 🔄 Auto-save functionality\n- 📱 PWA support for native app experience\n- ♿ Full accessibility support with ARIA labels\n- 🔌 Offline functionality\n- 📲 Install on any device\n- 🎨 Adaptive interface\n\n## 🚀 Live Demo\n\nTry it out: [WebMarkdown](https://webmarkdown.netlify.app/)\n\n## 🛠️ Tech Stack\n\n- **Frontend Framework:** React 18.3\n- **Build Tool:** Vite 6.0\n- **Styling:** Tailwind CSS 3.4\n- **PWA:** Vite PWA Plugin\n- **Key Dependencies:**\n  - 🎨 @heroicons/react\n  - 📝 react-markdown\n  - ✨ remark-gfm\n  - 🎯 PropTypes\n  - 📱 vite-plugin-pwa\n\n## 💻 Local Development\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/melihcanndemir/markdown-previewer.git\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Start the development server:\n```bash\nnpm run dev\n```\n\n4. Build for production:\n```bash\nnpm run build\n```\n\n## 🎯 Usage\n\n### Editor Features\n- Write markdown in the left panel\n- See instant preview in the right panel\n- Toggle dark/light mode with the theme button\n- Use the settings button to customize your experience\n\n### PWA Features\n- Install as a native app\n- Work offline\n- Fast loading times\n- Home screen installation\n- App-like experience\n\n### Accessibility Features\n- Full keyboard navigation\n- ARIA labels for all interactive elements\n- High contrast mode support\n- Screen reader friendly\n- Focus management\n\n### Import/Export\n- Click Import to load .md files\n- Click Export to save your work\n- Supports local storage auto-save\n\n### Settings\n- Adjust font size\n- Choose preview style\n- Toggle line numbers\n- Enable/Disable auto-save\n- Customize PWA behavior\n\n## 📱 Responsive Design\n\nOptimized for all devices:\n- 💻 Desktop\n- 📱 Tablets (including iPad Air)\n- 📱 Foldable devices (including Zenbook Fold)\n- 📱 Mobile phones\n\n## 🤝 Contributing\n\nContributions are welcome! Feel free to:\n\n1. Fork the repository\n2. Create your feature branch\n3. Submit a Pull Request\n\n## 📜 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🙏 Credits\n\n- Icons by [Hero Icons](https://heroicons.com)\n- Markdown parsing by [React Markdown](https://github.com/remarkjs/react-markdown)\n- Styling with [Tailwind CSS](https://tailwindcss.com)\n- Built with [Vite](https://vitejs.dev)\n- PWA support by [Vite PWA Plugin](https://vite-pwa-org.netlify.app/)\n\n## 👨‍💻 Author\n\n- [@melihcanndemir](https://github.com/melihcanndemir)\n\n---\n\nMade with ❤️ by Melih Can Demir\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelihcanndemir%2Fmarkdown-previewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelihcanndemir%2Fmarkdown-previewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelihcanndemir%2Fmarkdown-previewer/lists"}