screenshot of Typo


Web based markdown editor


Typo is a web-based markdown editor that provides a user-friendly interface for creating and editing markdown content. It offers a range of features that make the editing process easier and more efficient.


  • File System API: Utilizes the file system API when available, allowing for seamless file management. If the API is not supported, a download anchor tag is used as an alternative.
  • Auto-save: Automatically saves changes made to the markdown content, if supported by the system. This ensures that users do not lose their work.
  • Local Storage: All files are exclusively stored locally on the user's device. This provides a secure and private environment for managing markdown content.
  • Content View: Provides the option to view the markdown content either as a document or as a slideshow. This feature allows users to present their content in different formats.
  • Slide Creation: Enables users to create slides within the markdown editor using the <hr> tag (---). This functionality is particularly useful for creating presentations or slideshows.
  • Code Execution: Allows users to execute JavaScript code blocks directly in the browser. This feature is beneficial for testing and experimenting with code snippets.
  • Formatted Printing: Allows users to print the markdown content with proper formatting. This ensures that printed documents maintain the intended visual appearance.
  • Markdown Formatting: Applies Prettier for formatting markdown content, making it easier to read and maintain consistent styling throughout the document.


To install Typo, follow these steps:

  1. Clone the repository: git clone [repository_url]
  2. Install the required dependencies: npm install
  3. Start the development server: npm run dev -- --open


Typo is a feature-rich web-based markdown editor that offers an intuitive editing experience. With its various features, such as auto-save, local storage, and code execution, Typo provides a convenient platform for creating and managing markdown content. Its ability to view content as a document or a slideshow, along with the formatted printing option, enhances the presentation capabilities of Typo. Additionally, the use of markdown formatting and integration with Prettier improves the readability and maintenance of markdown documents.


Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.


Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects


Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.


ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.


TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.