Better comments for GitHub

Ever spent too much time writing a decent review, issue comment, or discussion?
What if the GitHub comment box could work better? 👀

An extension that completely replaces the GitHub native comment box,
to a new block-based editor and a seamless real-time preview experience.

X post

Important

This extension is still in development. As always, feedback in this phase is very important, so please open an issue if you find any bug or have any suggestion.

This project is not affiliated with GitHub, Inc. in any way. It is an independent project that I initially created for myself that aims to enhance the GitHub user experience by providing a better comment editor.

🚀 Features

✅ WYSIWYG Markdown Editor: Replace all GitHub's native comment box with a visual Markdown editor powered by ProseMirror, providing a rich editing experience while writing Markdown.
✅ GitHub Node Support: Full support for GitHub-specific nodes like alerts, tables, lists, and more.
✅ Slash Commands & Toolbar: Quickly insert elements and formatting with slash commands and a customizable toolbar.
✅ Code Blocks with Syntax Highlighting: Write code blocks in any language with proper syntax highlighting for improved readability.
✅ TypeScript Autocomplete & IntelliSense: For TypeScript code blocks, the editor integrates CodeMirror with the TypeScript Language Server, providing intelligent autocompletion, inline npm package suggestions, and real-time type checking.
✅ GitHub References: Reference issues, pull requests, discussions, and users directly within your comments.
✅ Advanced Table Handling: Intuitive table creation, editing, and navigation.
✅ Native GitHub Styling: Uses GitHub’s own css variables and styles, integrating smoothly with the GitHub interface.
and more...

Caution

Work in progress

List of all supported features discussion

Install

This extension can be installed via official web store or manually, via the artifacts published in the release page. Consider that installing via web store is the recommended way, as it will automatically update the extension when a new version is released.

Note

Since publishing extensions on the web store requires approval, the latest version on the web store may mismatch the latest version on the GitHub repository.

and other Chromium browsers

Important

Firefox support coming soon.

Install (or update) manually:

Download the latest release or any other version from the release page
Load the unpacked extension in your browser:
- In chrome, go to chrome://extensions, then drag the zip into the page or just click on "Load unpacked" and select the zip file.
- In firefox, go to about:debugging#/runtime/this-firefox, then click on "Load Temporary Add-on" and select the firefox zip file.

Project structure

The project structure is organized in a monorepo using pnpm workspaces. The structure is still WIP and doesn't respect yet the best practices (root folder is a package itself too), but it will be improved in the future.

brand: contains the branding assets, such as logos, promotional assets published in web store.
markdown-schema: a package that contains the markdown proseMirror nodes used by the editor.
markdown-transformer: a package that contains the logic to transform the markdown schema into ProseMirror and vice versa.
extension: the browser extension package, responsible to load the editor in the GitHub pages.
src: the core of the editor

Tech stack

This extension has been made using WXT Extension Framework.

To mimic the GitHub native styling, GitHub Primer CSS variables and classes from official GitHub website have been used.

Some libraries to mention:

Some of my core own libraries:

Running the project