MarkCanvas

A clean, modern, and feature-rich live markdown editor built with Vue.js and Tailwind CSS.

Description

MarkCanvas is a web-based application designed for a seamless writing experience. It provides a real-time, side-by-side preview of your markdown text as you type, ensuring you get the formatting right every time. It includes a variety of user-friendly features to boost productivity for developers, writers, and students.

Table of Contents

• Features
• Roadmap
• Try It
• Contributing
• License
• Contact

Features

• Live Preview: Instantly see your rendered HTML as you type markdown.

• Component-Based: Built with a clean, organized structure using Vue components.

• Light & Dark Modes: A theme toggle to switch between light and dark modes, with your preference saved locally.

• Rich Templates: A searchable library of over 50 pre-built templates, organized by category for common documents like READMEs, blog posts, and project plans.

• Emoji Picker: Easily insert emojis into your document at the cursor's location.

• Export Options: Download your work as a .md, .html, or .txt file.

• Word & Character Count: Keep track of your document's length and estimated reading time.

• Slash Commands: Allow users to type / to open a command menu and quickly insert elements like tables, images, or code blocks.

• Scroll Sync: Automatically sync the scroll position of the preview pane with the editor pane.

Roadmap

Core Editor Enhancements

• Slash Commands
• Drag-and-Drop Image Uploads: Enable users to drag an image file directly into the editor, which would automatically upload it and insert the corresponding markdown tag.
• Toolbar Formatting Actions: Add buttons to the editor's toolbar (e.g., Bold, Italic, Link) that apply markdown formatting to selected text.
• Mobile Support

Preview & Export

• Scroll Sync
• PDF Export
• Shareable Links

Advanced Functionality

• Cloud Sync: Implement user accounts and cloud storage
• Resizable Panes: Allow the user to drag the divider between the editor and preview panes to resize them.
• Presentation Mode

Try It

Use the live version here: MarkCanvas

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Contact

Trevor R. Browning - Twitter - Bluesky - Email

Project Link