docs(readme): update web readme

cli/README-CN.md

@@ -53,7 +53,7 @@ sudo install ./mqttx-cli-macos-arm64 /usr/local/bin/mqttx
 
 下载二进制文件并快速安装最新的 MQTT X CLI 稳定版到 Linux 系统上。
 
->  **注意**：请注意区分当前系统环境的 CPU 架构
+> **注意**：请注意区分当前系统环境的 CPU 架构
 
 #### x86-64
 
@@ -76,7 +76,7 @@ Windows 用户请到 MQTT X 的[发布页面](https://github.com/emqx/MQTTX/rele
 ### NPM
 
 ```shell
-npm install mqttx -g
+npm install mqttx-cli -g
 ```
 
 ### 其它平台

cli/README.md

@@ -75,7 +75,7 @@ Windows users should go to the MQTT X [release page](https://github.com/emqx/MQT
 ### NPM
 
 ```shell
-npm install mqttx -g
+npm install mqttx-cli -g
 ```
 
 ### Other platforms

web/README-CN.md

@@ -0,0 +1,81 @@
+<img src="../assets/mqttx-logo.png" width="480" alt="MQTTX Logo" />
+
+# MQTT X Web
+
+[![GitHub Release](https://img.shields.io/github/release/emqx/mqttx?color=brightgreen)](https://github.com/emqx/mqttx/releases)
+![build packages](https://github.com/emqx/MQTTX/workflows/build%20packages/badge.svg)
+[![Total Downloads](https://img.shields.io/github/downloads/emqx/mqttx/total.svg)](https://github.com/emqx/mqttx/releases)
+[![Slack](https://img.shields.io/badge/Slack-EMQX-39AE85?logo=slack)](https://slack-invite.emqx.io/) [![Discord](https://img.shields.io/discord/931086341838622751?label=Discord&logo=discord)](https://discord.gg/xYGf3fQnES)
+[![Community](https://img.shields.io/badge/Community-MQTT%20X-yellow?logo=github)](https://github.com/emqx/MQTTX/discussions)
+[![YouTube](https://img.shields.io/badge/Subscribe-EMQ-FF0000?logo=youtube)](https://www.youtube.com/channel/UC5FjR77ErAxvZENEWzQaO5Q)
+[![Twitter](https://img.shields.io/badge/Follow-EMQ-1DA1F2?logo=twitter)](https://twitter.com/EMQTech)
+
+[English](./README.md) | 简体中文
+
+---
+
+[MQTT X Web](https://mqttx.app)是一个开源的 MQTT 5.0 浏览器客户端，也是一个在线 MQTT WebSocket 客户端工具。使用 WebSocket 在浏览器中连接到 MQTT，帮助开发者更快地开发和调试你的 MQTT 服务和应用程序，而不必在本地下载和安装 MQTT X。
+
+> [MQTT](http://mqtt.org/faq) 全称为 Message Queuing Telemetry Transport（消息队列遥测传输）是一种基于 发布/订阅 范式的“轻量级”消息协议，旨在用于受限设备和低带宽，高延迟或不可靠的网络，由 IBM 发布。
+
+## 功能预览
+
+![mqttx-preview](../assets/mqttx-web-preview.png)
+
+## 使用
+
+访问 MQTT WebSocket 客户端工具 (MQTT X Web): [http://tools.emqx.io/](http://tools.emqx.io/)
+
+## 与 EMQX 更好的合作
+
+MQTT X 为连接测试 EMQX 等 MQTT 消息服务器而生，一键式的连接方式和简洁的图形界面可以帮助您快速连接到 EMQX 或 EMQX Cloud 调试并探索其功能特性。
+
+[注册 EMQX Cloud 可以享受 14 天免费试用](https://www.emqx.com/zh/try?product=cloud)
+
+[现在就本地下载并安装 EMQX](https://www.emqx.com/zh/try?product=enterprise)
+
+## 社区
+
+访问 [EMQ 问答社区](https://askemq.com/) 以获取帮助，也可以分享您的想法或项目。
+
+可通过以下方式与其他社区成员进行沟通
+
+|  方式   | 内容  |
+|  ----  | ----  |
+| EMQX 官方公众号 | <img src="../assets/wx_qr_code.png" width="160" alt="EMQX Wechat"/> |
+| EMQX 微信群（扫码添加后邀请入群）| <img src="../assets/emqx_wx.jpeg" width="160" alt="WeChat QR code"/> |
+
+## 开发
+
+Node 环境的推荐版本:
+
+- v14.\*.\*
+
+``` shell
+# 克隆项目
+git clone git@github.com:emqx/MQTTX.git
+
+# 安装依赖
+cd MQTTX/web
+yarn install
+
+# 编译和热重载以进行开发
+yarn run serve
+
+# 编译和压缩以构建生产版本
+yarn run build
+```
+
+## 贡献
+
+请确保在发出 PR 请求前， 已经仔细阅读过了[贡献指南](https://github.com/emqx/MQTTX/blob/master/.github/CONTRIBUTING_CN.md)
+
+## 技术栈
+
+- [Vue](https://vuejs.org/) + [Element](https://element.eleme.io)
+- [TypeScript](https://www.typescriptlang.org/)
+- [MQTT.js](https://github.com/mqttjs/MQTT.js)
+
+## License
+
+Apache License 2.0, see [LICENSE](https://github.com/emqx/MQTTX/blob/master/LICENSE).

web/README.md

@@ -1,56 +1,76 @@
 <img src="../assets/mqttx-logo.png" width="480" alt="MQTTX Logo" />
 
-# MQTT X Web application
+# MQTT X Web
 
 [![GitHub Release](https://img.shields.io/github/release/emqx/mqttx?color=brightgreen)](https://github.com/emqx/mqttx/releases)
-![Support Platforms](https://camo.githubusercontent.com/a50c47295f350646d08f2e1ccd797ceca3840e52/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d6d61634f5325323025374325323057696e646f77732532302537432532304c696e75782d6c69676874677265792e737667)
 ![build packages](https://github.com/emqx/MQTTX/workflows/build%20packages/badge.svg)
 [![Total Downloads](https://img.shields.io/github/downloads/emqx/mqttx/total.svg)](https://github.com/emqx/mqttx/releases)
 [![Slack](https://img.shields.io/badge/Slack-EMQX-39AE85?logo=slack)](https://slack-invite.emqx.io/) [![Discord](https://img.shields.io/discord/931086341838622751?label=Discord&logo=discord)](https://discord.gg/xYGf3fQnES)
 [![Community](https://img.shields.io/badge/Community-MQTT%20X-yellow?logo=github)](https://github.com/emqx/MQTTX/discussions)
 [![YouTube](https://img.shields.io/badge/Subscribe-EMQ-FF0000?logo=youtube)](https://www.youtube.com/channel/UC5FjR77ErAxvZENEWzQaO5Q)
 [![Twitter](https://img.shields.io/badge/Follow-EMQ-1DA1F2?logo=twitter)](https://twitter.com/EMQTech)
 
+English | [简体中文](./README-CN.md)
+
 ---
 
-[MQTT X](https://mqttx.app) is an open source MQTT 5.0  client.
+[MQTT X Web](https://mqttx.app) is an open source MQTT 5.0 browser client and an online MQTT WebSocket client tool. Use WebSocket to connect to MQTT in your browser to help you develop and debug your MQTT services and applications faster without having to download and install MQTT X locally.
 
 > [MQTT](http://mqtt.org/faq) stands for MQ Telemetry Transport. It is a publish/subscribe, extremely simple and lightweight messaging protocol, designed for constrained devices and low-bandwidth, high-latency or unreliable networks.
 
 ## Preview
 
 ![mqttx-preview](../assets/mqttx-web-preview.png)
 
-## Project setup
+## Usage
 
-```
-yarn install
-```
+Visit MQTT WebSocket Client (MQTT X Web): [http://tools.emqx.io/](http://tools.emqx.io/)
 
-### Compiles and hot-reloads for development
+## Better Together with EMQX
 
-```
-yarn serve
-```
+MQTT X is designed to connect to test MQTT Brokers such as EMQX, The one-click connection and simple graphical interface make it easy to connect to EMQX or EMQX Cloud to debug and explore functional features.
 
-### Compiles and minifies for production
+[Sign up EMQX Cloud for 14 days free trial](https://www.emqx.com/en/try?product=cloud)
 
-```
-yarn build
-```
+[Download EMQX locally right now](https://www.emqx.com/en/try?product=enterprise)
 
-### Run your end-to-end tests
+## Community
 
-```
-yarn test:e2e
-```
+The MQTT X community can be found on [GitHub Discussions](https://github.com/emqx/MQTTX/discussions), where you can ask questions, voice ideas, and share your projects.
 
-### Lints and fixes files
+To chat with other community members you can join the [EMQX Slack](https://slack-invite.emqx.io) or [Discord](https://discord.gg/xYGf3fQnES).
 
+## Develop
+
+Recommended version for Node environment:
+
+- v14.\*.\*
+
+``` shell
+# Clone
+git clone git@github.com:emqx/MQTTX.git
+
+# Install dependencies
+cd MQTTX/web
+yarn install
+
+# Compiles and hot-reloads for development
+yarn run serve
+
+# Compiles and minifies for production
+yarn run build
 ```
-yarn lint
-```
 
-### Customize configuration
+## Contributing
+
+Please make sure to read the [Contributing Guide](https://github.com/emqx/MQTTX/blob/master/.github/CONTRIBUTING.md) before making a pull request.
+
+## Technology Stack
+
+- [Vue](https://vuejs.org/) + [Element](https://element.eleme.io)
+- [TypeScript](https://www.typescriptlang.org/)
+- [MQTT.js](https://github.com/mqttjs/MQTT.js)
+
+## License
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+Apache License 2.0, see [LICENSE](https://github.com/emqx/MQTTX/blob/master/LICENSE).