{"id":29960304,"url":"https://github.com/yosephdev/markdown-editor","last_synced_at":"2026-04-20T13:06:55.323Z","repository":{"id":302583171,"uuid":"1000250160","full_name":"yosephdev/markdown-editor","owner":"yosephdev","description":"A modern, real-time markdown editor with live preview functionality ","archived":false,"fork":false,"pushed_at":"2025-07-03T06:56:12.000Z","size":1095,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-03T22:48:03.189Z","etag":null,"topics":["react","shadcn-ui","tailwind-css","typscript"],"latest_commit_sha":null,"homepage":"https://instant-markdown-canvas.vercel.app","language":"TypeScript","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/yosephdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2025-06-11T13:44:36.000Z","updated_at":"2025-07-07T16:39:15.000Z","dependencies_parsed_at":"2025-07-03T06:36:20.681Z","dependency_job_id":"52670b9f-7bd1-4ed9-9a87-9904e7ddfab5","html_url":"https://github.com/yosephdev/markdown-editor","commit_stats":null,"previous_names":["yosephdev/markdown-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yosephdev/markdown-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosephdev%2Fmarkdown-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosephdev%2Fmarkdown-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosephdev%2Fmarkdown-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosephdev%2Fmarkdown-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yosephdev","download_url":"https://codeload.github.com/yosephdev/markdown-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosephdev%2Fmarkdown-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32048473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react","shadcn-ui","tailwind-css","typscript"],"created_at":"2025-08-03T22:40:07.080Z","updated_at":"2026-04-20T13:06:55.306Z","avatar_url":"https://github.com/yosephdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Instant Markdown Canvas\n\nA modern, real-time markdown editor with live preview functionality built with React, TypeScript, and Shadcn UI components.\n\n![Instant Markdown Canvas](./public/instant-markdown-canvas-preview.png)\n\n## 🚀 Features\n\n- **Real-time Preview**: See your markdown rendered instantly as you type\n- **Split-pane UI**: Resizable editor and preview panels\n- **Syntax Highlighting**: Rich editing experience with CodeMirror\n- **File Management**: Create, save, rename, and delete files\n- **Export Options**: Export as HTML, PDF, or Markdown\n- **Responsive Design**: Works great on mobile and desktop\n- **Themes**: Light and dark mode support\n- **Keyboard Shortcuts**: Efficient workflow with shortcuts\n- **Auto-save**: Never lose your work\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React 18 with TypeScript\n- **Styling**: Tailwind CSS with Shadcn UI components\n- **State Management**: Zustand\n- **Routing**: React Router DOM\n- **Markdown Processing**: Marked.js\n- **Security**: DOMPurify for sanitizing HTML output\n- **Build Tool**: Vite\n\n## 📋 Prerequisites\n\n- Node.js (v16 or higher)\n- npm or yarn or bun\n\n## 🔧 Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/yosephdev/markdown-editor\n   cd markdown-editor\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   bun install\n   ```\n\n3. Start the development server:\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   # or\n   bun dev\n   ```\n\n4. Open your browser and navigate to `http://localhost:5173`\n\n## 🖥️ Usage\n\n1. **Creating a new document**: Use **Ctrl+N** or the \"New File\" button\n2. **Editing**: Type your markdown in the editor panel\n3. **Preview**: See the live preview in the preview panel\n4. **Toggling Sidebar**: Use **Ctrl+B** or the menu icon to show/hide the sidebar\n5. **Cycling View Modes**: Use **Ctrl+P** to switch between split, editor-only, and preview-only modes\n6. **Saving**: Your work is **auto-saved**\n7. **Exporting**: Use the export option in the toolbar to export as HTML, PDF, or Markdown\n8. **File Management**: Access, rename, and delete files from the sidebar\n\n## 📝 Markdown Support\n\nInstant Markdown Canvas supports standard markdown syntax including:\n\n- Headers (# H1, ## H2, etc.)\n- Emphasis (*italic*, **bold**)\n- Lists (ordered and unordered)\n- Links and images\n- Code blocks with syntax highlighting\n- Blockquotes\n- Horizontal rules\n- Task lists\n- Tables\n\n## ⚡ Keyboard Shortcuts\n\n- **Ctrl+N**: Create new file\n- **Ctrl+B**: Toggle sidebar\n- **Ctrl+P**: Cycle through view modes (Split, Editor Only, Preview Only)\n- **Ctrl+Shift+E**: Switch to Editor Only mode\n- **Ctrl+Shift+R**: Switch to Preview Only mode\n\n## 🔍 Project Structure\n\n```\ninstant-markdown-canvas/\n├── public/               # Static assets\n├── src/\n│   ├── components/       # React components\n│   │   ├── editor/       # Editor-specific components\n│   │   ├── layout/       # Layout components (Toolbar, Sidebar, StatusBar)\n│   │   ├── modals/       # Modal components\n│   │   └── ui/           # Shadcn UI components\n│   ├── contexts/         # React Contexts\n│   ├── hooks/            # Custom React hooks\n│   ├── lib/              # Utility functions\n│   ├── pages/            # Page components\n│   ├── store/            # Zustand store\n│   ├── types/            # TypeScript type definitions\n│   ├── App.tsx           # Main application component\n│   └── main.tsx          # Entry point\n├── package.json          # Dependencies and scripts\n└── vite.config.ts        # Vite configuration\n```\n\n## 🧪 Running Tests\n\n```bash\nnpm run test\n# or\nyarn test\n# or\nbun test\n```\n\n## 🚢 Deployment\n\n1. Build the production version:\n\n   ```bash\n   npm run build\n   # or\n   yarn build\n   # or\n   bun run build\n   ```\n\n2. The build output will be in the `dist` directory, which can be deployed to any static hosting service like Netlify, Vercel, GitHub Pages, or AWS S3.\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👏 Acknowledgments\n\n- [React](https://reactjs.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Vite](https://vitejs.dev/)\n- [Shadcn UI](https://ui.shadcn.com/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Marked.js](https://marked.js.org/)\n- [DOMPurify](https://github.com/cure53/DOMPurify)\n\n## 📧 Contact\n\nYoseph Berhane - [contact@yoseph.dev](mailto:your.email@example.com)\n\nProject Link: [https://github.com/yosephdev/markdown-editor](https://github.com/yosephdev/markdown-editor)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosephdev%2Fmarkdown-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyosephdev%2Fmarkdown-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosephdev%2Fmarkdown-editor/lists"}