{"id":19916387,"url":"https://github.com/beiyanyunyi/hv-com","last_synced_at":"2026-04-09T08:56:23.515Z","repository":{"id":141633475,"uuid":"449666778","full_name":"BeiyanYunyi/HV-Com","owner":"BeiyanYunyi","description":"A WYSIWYG markdown commenting system written in React and TypeScript. 一个所见即所得的 markdown 评论系统，以 React 和 TypeScript 编写","archived":false,"fork":false,"pushed_at":"2022-02-22T05:40:22.000Z","size":1499,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T23:32:27.159Z","etag":null,"topics":["blog","comment","comment-system","free-software","markdown","react","typescript","vditor"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BeiyanYunyi.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}},"created_at":"2022-01-19T11:38:37.000Z","updated_at":"2022-01-19T12:22:37.000Z","dependencies_parsed_at":"2023-03-13T10:30:32.855Z","dependency_job_id":null,"html_url":"https://github.com/BeiyanYunyi/HV-Com","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeiyanYunyi%2FHV-Com","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeiyanYunyi%2FHV-Com/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeiyanYunyi%2FHV-Com/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeiyanYunyi%2FHV-Com/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BeiyanYunyi","download_url":"https://codeload.github.com/BeiyanYunyi/HV-Com/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241345156,"owners_count":19947707,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["blog","comment","comment-system","free-software","markdown","react","typescript","vditor"],"created_at":"2024-11-12T21:45:18.891Z","updated_at":"2026-04-09T08:56:18.496Z","avatar_url":"https://github.com/BeiyanYunyi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HV-Com\n\n🚧 WIP - functionality and structure can change rapidly and compatibility is not guaranteed 🚧\n\n[简体中文](README_zhCN.md)\n\n## 💡 Intro\n\nHV-Com is a commenting system written in TypeScript. It uses [Vditor](https://github.com/Vanessa219/vditor) as markdown editor and [lute](https://github.com/88250/lute) as renderer.\n\n## ✨ Feature\n\nHV-Com's HV has many meanings.\n\n- HeaVy - This commenting system is quite large and will have a significant performance overhead on both the front and back ends. `React`+`HV-Com`+`Vditor`+`lute`=`45kB`+`42kB`+`110kB`+`315kB`=`512kB` in gzipped. As `Vditor` is not minified yet, the size of it is larger than it should be and will be fixed in the latest release. If you use the all in one (AIO) bundle, it is as large as `153kB` gzipped.\n\nAt the cost of the above shortcoming, HV-Com has the following advantages.\n\n- Have Vditor - HV-Com uses Vditor as markdown editor and renderer, so that it is fully \"WYSIWYG\" from editing to viewing.\n- High Value - HV-Com has no less than a forum comment section, where high-value public discussions can take place. In fact, HV-Com is just one posting function away from a forum.\n\nIt also has these features.\n\n- Uses markdown, has full WYSIWYG from editing to viewing.\n- Support for all formats editable by Vditor, including\n  - LaTeX formulas\n  - mermaid.js flowcharts\n  - abc.js sheet music\n  - Code highlighting\n  - See [Vditor readme](https://github.com/Vanessa219/vditor) for details\n- Self-deployable backend or hosted.\n- Support three major SQL databases, PostgreSQL, MySQL, SQLite, and may support [OrbitDB](https://github.com/orbitdb/orbit-db) in the future to become a decentralized commenting system.\n- Good scalability, because\n  - It is written entirely in React + TypeScript\n  - It has Automated testing with jest for stability\n  - It uses OpenAPI specification to define and check back-end interfaces\n- Supports JSX syntax and can be imported as a React component.\n- It is Free software. All source code of it is open under AGPLv3.\n\n## 🛠️ How to develop\n\n```bash\nsudo npm install -g pnpm\ngit clone https://github.com/lixiang810/HV-Com\ncd HV-Com\npnpm install\npnpm dev\n```\n\n## 🏭 How to use it in webpage\n\nHV-Com will not provide pre-built versions until the first release. You need to build from source yourself if you really want to use it.\n\n```bash\nsudo npm install -g pnpm\ngit clone https://github.com/lixiang810/HV-Com\ncd HV-Com\npnpm install\npnpm build\n```\n\nIt will generate `hv-com.umd.js` under `HV-Com/dist/aio` and `HV-Com/dist/external`.\n\n### UMD (External)\n\nTo use `HV-Com/dist/external/hv-com.umd.js`, you should import React, ReactDOM and Vditor yourself. You can refer to these HTML.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003clink rel=\"icon\" type=\"image/svg+xml\" href=\"/src/favicon.svg\" /\u003e\n    \u003c!-- (Optional) Font for Material-UI --\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\u0026display=swap\"\n    /\u003e\n    \u003c!-- Style for Vditor --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/vditor/dist/index.css\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eVite App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003c!-- React --\u003e\n    \u003cscript src=\"https://unpkg.com/react@17/umd/react.production.min.js\" crossorigin\u003e\u003c/script\u003e\n    \u003c!-- React-DOM --\u003e\n    \u003cscript\n      src=\"https://unpkg.com/react-dom@17/umd/react-dom.production.min.js\"\n      crossorigin\n    \u003e\u003c/script\u003e\n    \u003c!-- Vditor --\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js\"\u003e\u003c/script\u003e\n    \u003c!-- HV-Com --\u003e\n    \u003cscript src=\"hv-com.umd.js\"\u003e\u003c/script\u003e\n    \u003c!-- Then, call HVCom to render DOM. --\u003e\n    \u003cscript\u003e\n      HVCom.render({ id: 'root', backendURL: 'http://localhost:3000/' });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### UMD (AIO)\n\nIf use `HV-Com/dist/aio/hv-com.umd.js`, since it bundled all requirements, you can just import a js file. You can refer to these HTML:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003clink rel=\"icon\" type=\"image/svg+xml\" href=\"/src/favicon.svg\" /\u003e\n    \u003c!-- (Optional) Font for Material-UI --\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\u0026display=swap\"\n    /\u003e\n    \u003c!-- Style for Vditor --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/vditor/dist/index.css\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eVite App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003c!-- HV-Com, all in one --\u003e\n    \u003cscript src=\"hv-com.umd.js\"\u003e\u003c/script\u003e\n    \u003c!-- Then, call HVCom to render DOM. --\u003e\n    \u003cscript\u003e\n      HVCom.render({ id: 'root', backendURL: 'http://localhost:3000/' });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## 🗺️ Background\n\nVditor is known as a WYSIWYG markdown editor and has `Vditor.preview()` method for front-end rendering of markdown, which makes it possible to implement a commenting system based on it. At the same time, none of the existing commenting systems use Vditor as their editor, and most commenting systems have rich text editors that do not support WYSIWYG, creating a barrier to use for the average user.\n\nI had wanted to use `valine` for my blog, but it is closed source. At the same time, it has serious security risks, not to mention that the LeanCloud it uses requires ID verification in mainland China.\n\nI switched to gitalk. This process is described in [my blog post](https://stblog.penclub.club/2020/Sakura/). But then GitHub access was limited in mainland China, and signing up for a GitHub account was a barrier for commenters, which made commenting less motivating.\n\nI have since chosen Isso and HashOver, of which I am impressed with the various features of HashOver. I will continue to use HashOver if I can do a secondary development of its front-end to introduce Vditor. However, HashOver's front-end code is in fact too old and needs to be rewritten using modern front-end techniques.\n\n[Waline](https://github.com/walinejs/waline) has a lot of appeal to me, but:\n\n1. It is not fully typed. (although the front-end uses TypeScript, the back-end doesn't)\n2. Its markdown editor only renders in split screen and cannot do WYSIWYG editing, and does not support enough formats.\n3. The comments section can only be viewed in reverse chronological order and cannot be paginated.\n4. It uses vue, and my technology stack is in React.\n5. It uses GPLv2 as license. Open source, but not free enough.\n\nIt just so happens that there's no comment system can be imported and used in React/JSX, and I had accumulated experience and code when I wrote [n2rv](https://github.com/lixiang810/n2rv), so I decided to completely rewrite one.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeiyanyunyi%2Fhv-com","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeiyanyunyi%2Fhv-com","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeiyanyunyi%2Fhv-com/lists"}