MarkIt: The Modern Markdown Editor with Tauri and Vue 3

---

Markdown is everywhere – from GitHub README files to blog posts – yet finding a lightweight, responsive, and full-featured editor can be challenging. MarkIt addresses this by offering a modern Markdown editor built with Vue 3, TailwindCSS, and Tauri for desktop applications.

Sometimes in a world where even your phone keyboard spies on you, it’s nice to write something from scratch without being watched!

You can find the project on GitHub: MarkIt Repository

Live Preview and Syntax Highlighting

MarkIt provides a live preview of your Markdown content alongside the editor. Thanks to Highlight.js, code blocks are syntax-highlighted in real time. Whether you are writing prose or code snippets, MarkIt ensures that your Markdown looks exactly as expected.

Responsive Design

MarkIt works seamlessly on both desktop and mobile devices. The layout adjusts automatically, making it easy to write and preview Markdown documents wherever you are.

Slash Menu for Quick Insertions

A powerful feature in MarkIt is the Slash Menu. By typing / on an empty line, you can quickly insert content or templates. Navigation is simple:

• Use Arrow keys to select
• Press Enter to insert
• Press Escape or click outside to close

This feature speeds up editing and reduces repetitive typing.

Export Options

MarkIt allows you to export your work in two ways:

1. Markdown files (.md) – perfect for sharing, versioning, and keeping plain text backups.
2. Styled HTML pages – complete with an automatically generated table of contents for headings, making your Markdown ready for publication as polished web pages.

Multi-tab and Project Management

Work on multiple documents simultaneously with multi-tab support. You can save your entire workspace, including all tabs and their content, to a local JSON file. Later, you can reload your project and restore your workspace in a single click.

Building the Windows Executable

After building your frontend assets:

npm run build
npx tauri build

The output folder will be:

src-tauri/target/release

You only need the app.exe file – the rest of the files are auxiliary and can be ignored. This .exe is your standalone MarkIt application.

Technologies

• Vue 3
• TailwindCSS
• Marked
• marked-highlight
• Highlight.js
• Tauri

Conclusion

MarkIt combines the simplicity of web-based Markdown editors with the power of a desktop application. Its responsive design, live preview, Slash Menu, multi-tab support, and Tauri packaging make it a versatile tool for writers, developers, and anyone who works with Markdown on a daily basis.