21 个不容忽视的 React 项目

人工智能很快就会统治世界，只是我们还不知道是哪一部分。

一些 React 项目已经使用了 AI，因此我将介绍 21 个对开发人员非常有用的项目。

有些是工具，有些是包，但都是开源的，所以你至少可以从代码库中学习。

1. CopilotKit——构建 AI Copilot 变得容易 10 倍。

你会同意，在 React 中添加 AI 功能非常困难。而 Copilot 正是为你提供了一个框架，帮助你在应用程序中构建自定义 AI Copilot。

您可以使用 Copilotkit 提供的简单组件构建应用内 AI 聊天机器人和应用内 AI 代理，这比从头开始构建至少容易 10 倍。

如果已经有一个非常简单和快速的解决方案，你就不应该重新发明轮子！

他们还提供内置（完全可定制）的 Copilot 原生 UX 组件<CopilotKit />，如<CopilotPopup />、、、<CopilotSidebar />。<CopilotTextarea />

使用以下命令开始npm。

npm i @copilotkit/react-core @copilotkit/react-ui

这就是您集成聊天机器人的方式。

CopilotKit所有与 CopilotKit 交互的组件都必须包装。您也应该从开始（CopilotSidebar稍后您可以切换到其他 UI 提供程序）。

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css"; 

export default function RootLayout({children}) {
  return (
    <CopilotKit url="/path_to_copilotkit_endpoint/see_below">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}

您可以阅读文档并查看演示视频。

您可以轻松集成 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 提供程序。您可以按照本指南将聊天机器人集成到您的应用程序中。

其基本思想是快速构建 AI 聊天机器人，且无需费力，尤其是基于 LLM 的应用程序。

另请查看 CopilotKit 的 CoAgents：人机交互框架！

CopilotKit 在 GitHub 上拥有 8.5k+ 颗星，并有 300 多个版本。

明星 CopilotKit ⭐️

2. responsively - 修改后的 Web 浏览器，可实现 5 倍更快的响应式 Web 开发。

Responsively 是一个使用 Electron 构建的修改后的浏览器，有助于响应式 Web 开发。

我知道 Chrome 开发工具运行得很好，但你会惊讶于 Responsively 的使用是多么简单。

乍一看，任何人都会认为它是一个普通的应用程序，但它有一些非常独特的功能：

✅ 一次查看所有设备。

✅ 您在一台设备上执行的任何点击、滚动或导航都将实时复制到所有设备。

✅ 它可以通过将您喜欢的设备组合保存为预览套装来实现快速的上下文切换，以便在测试时在它们之间切换。

✅ 它内置大量开箱即用的设备配置文件。您还可以添加自己的自定义设备。

您肯定会想到缺少一些常见的功能，但事实并非如此。

⚡ 您将获得所有基本的浏览器功能，例如 Cookie 管理、本地存储、会话存储和书签。您还可以像在任何浏览器中一样使用开发工具。

⚡ 您还可以通过单击设备工具栏中的相机图标来截取单个设备的屏幕截图，并快速截取视口的屏幕截图。

Cmd/Ctrl + I⚡ 统一检查器允许您通过按下激活它并将鼠标悬停在任何元素上来查看其详细信息，从而一次检查所有设备上的元素。

您可以下载桌面应用程序。

他们还为 Chrome、Edge 和 Firefox提供了浏览器扩展，以便您可以轻松地将浏览器的链接发送到应用程序并立即预览。

我强烈建议你至少尝试一下，因为它也支持热加载。它最终可能会让你的工作流程更加顺畅。

Responsively 在 GitHub 上有 22k 颗星，并且是使用 JavaScript 构建的。

响应式加星标⭐️

3. drawdb——直观的在线数据库设计工具和 SQL 生成器。

DrawDB 是一款功能强大且用户友好的数据库实体关系 (DBER) 编辑器，直接在您的浏览器中运行。只需点击几下即可创建图表、导出 SQL 脚本、自定义编辑器等等，无需创建帐户。

有很多功能您可以自己探索。

您可以在编辑器中尝试一下。

请注意，图表保存在您的浏览器中。清除浏览器之前，请务必备份您的数据。

他们在 GitHub 上有 18.6k 个星。

星形 drawdb ⭐️

4. Tooljet——用于构建商业应用程序的低代码平台。

我们每个人都会构建前端，但它通常非常复杂，涉及很多因素。很多人说它很容易，但其实不然。

ToolJet 是一个低代码框架，用于以最少的工程工作量构建和部署内部工具。

他们的拖放式前端构建器可帮助您在几分钟内创建复杂、响应迅速的前端。

您可以集成：

-→ 数据源包括 PostgreSQL、MongoDB 和 Elasticsearch 等数据库。
-→ 具有 OpenAPI 规范和 OAuth2 支持的 API 端点。
-→ SaaS 工具，例如 Stripe、Slack、Google Sheets、Airtable 和 Notion。
-→ 对象存储服务，例如 S3、GCS 和 Minio，用于获取和写入数据。

基本上，你可以将它用于一切:)

顺便说一句，ToolJet 还可以与 OpenAI 集成，访问两项主要服务。Completions 服务使 ToolJet 能够根据给定的提示或上下文生成文本。同时，Chat 服务则方便用户与基于 OpenAI 语言模型的 AI 驱动聊天机器人进行交互。您可以在文档中了解更多信息。

这就是 Tooljet 的工作原理。

您可以在 ToolJet 中开发多步骤工作流，以实现业务流程自动化。除了构建和自动化工作流之外，ToolJet 还支持将这些工作流轻松集成到您的应用程序中。

您可以阅读这份快速入门指南，了解如何使用 ToolJet 在几分钟内创建员工目录应用程序。这款应用拥有美观的用户界面，可让您跟踪和更新员工信息。

查看可用的功能列表，包括 45 多个内置响应组件、50 多个数据源等等。

您可以阅读文档并查看操作指南。

他们已经从 GitHub 获得了资金，因此建立了巨大的信任。

它们在 GitHub 上有 28.5k 颗星，并且是基于 JavaScript 构建的。

星形工具喷射⭐️

5. AppFlowy ——Notion 的开源替代品。

AppFlowy 是一个由人工智能驱动的安全工作区，类似于您在不失去对数据控制的情况下取得更多成就的概念。

您可以使用表格、看板和日历来组织和可视化数据。他们还提供移动应用程序，这是一个加分项。

您可以阅读文档并了解安装方法。

他们支持使用 Supabase 自托管 AppFlowy。这对于使用 Supabase 作为基础架构的用户来说是理想的选择。

您还应该检查这一点以了解有关数据存储、markdown、快捷方式、主题、涉及的 AI 和插件的更多信息。

AppFlowy 在 GitHub 上拥有 51k+ 颗星。

星级 AppFlowy ⭐️

6. Flowise——拖放 UI 来构建您的自定义 LLM 流程。

Flowise 是一个开源 UI 可视化工具，用于构建您的定制 LLM 编排流程和 AI 代理。

我们不应该比较任何项目，但我可以自信地说，这可能是这里列出的项目中最有用的一个！

使用以下 npm 命令开始。

npm install -g flowise
npx flowise start
OR
npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234

这就是您集成 API 的方式。

import requests

url = "/api/v1/prediction/:id"

def query(payload):
  response = requests.post(
    url,
    json = payload
  )
  return response.json()

output = query({
  question: "hello!"
)}

您可以阅读文档。

云主机不可用，因此您必须按照这些说明自行托管。

让我们探讨一些用例：

⚡ 假设你有一个网站（可能是商店、电商网站或博客），你想删除该网站的所有相关链接，并让 LLM 解答你网站上的任何问题。你可以按照这个分步教程来操作。

⚡ 您还可以创建一个自定义工具，该工具将能够调用 Webhook 端点并将必要的参数传递到 Webhook 主体中。请遵循本指南，该指南将使用 Make.com 创建 Webhook 工作流。

还有许多其他用例，例如构建 SQL 问答或与 API 交互。探索并构建精彩内容！

FlowiseAI 在 GitHub 上有 27.5k 个星标，并且有超过 14k 个 fork，因此整体比例不错。

星流⭐️

7. ChatFiles – 上传您的文件并与其进行对话。

它更像是一个文档聊天机器人，可以与多个文件交互，并由 GPT/Embedding 提供支持。你可以上传任何文档并与其进行对话。考虑到他们使用了另一个著名的开源项目，它的用户界面非常出色。

它底层使用了 Langchain 和Chatbot-ui 。使用 Nextjs、TypeScript、Tailwind 和 Supabase（矢量数据库）构建。

如果您对方法和技术架构感到好奇，那么就在这里！

该环境仅供试用，支持的最大文件大小为 10 MB，这是一个缺点，如果您想要更大的尺寸，则可以在本地安装它。

他们提供了一些入门问题供您参考。您可以查看现场演示。

他们在 GitHub 上有 3.2k 个星，并且即将v0.3发布。

明星聊天文件⭐️

8. MindsDB——从企业数据定制AI的平台。

MindsDB 是从企业数据定制 AI 的平台。

使用 MindsDB，您可以实时部署、提供和微调模型，利用来自数据库、矢量存储或应用程序的数据来构建 AI 驱动的应用程序 - 使用开发人员已经知道的通用工具。

借助 MindsDB 及其与数据源和 AI/ML 框架的近200 个集成，任何开发人员都可以使用其企业数据来更快、更安全地定制适合其目的的 AI。

您可以阅读文档和快速入门指南来开始使用。

他们目前总共支持3 个 SDK，即使用 Mongo-QL、Python 和 JavaScript。

MindsDB 有几种应用，例如与众多数据源和 AI 框架集成。

其他常见用例包括微调模型、聊天机器人、警报系统、内容生成、自然语言处理、分类、回归和预测。了解更多关于用例的信息，每个用例都配有一个架构图，其中包含一些信息。

例如，使用 MindsDB 的聊天机器人架构图。您可以阅读所有提供的解决方案及其 SQL 查询示例。

// SQL Query Example for Chatbot
CREATE CHATBOT slack_bot USING database='slack',agent='customer_support';

为了告诉您总体可能性，我偶然发现了一篇关于如何使用 MindsDB通过 AI + IoT 传感器数据预测气温的精彩文章。

他们在 GitHub 上有 2.6 万颗星，并且发布了v24.8.1.0超过 200 个版本。顺便说一句，这是我第一次在任何版本中看到 4 个部分，因为我一直遵循语义发布。

星型思维数据库⭐️

9. Twitter Agent——从社交媒体抓取数据并使用 Langchain 进行聊天。

Media Agent 抓取 Twitter 和 Reddit 上的帖子，进行汇总，并在交互式终端中与用户互动。真是个很酷的概念！

您可以阅读说明以在本地进行安装。

其构建使用：

Langchain 🦜 用于构建和编写 LLM。
ChromaDB 用于存储向量（又名嵌入）并查询它们来构建对话机器人。
Tweepy 连接到您的 Twitter API 并提取推文和元数据。
Praw 连接到 Reddit API。
丰富打造酷炫的终端UX/UI。
用诗歌来管理依赖关系。

你可以做很多很酷的事情，例如：

代表您从用户帐户列表或关键字列表中抓取推文/提交内容。
使用 OpenAI 嵌入推文/提交。
创建推文/提交内容的摘要并提供可能需要回答的问题。
在推文上打开聊天会话。
保存对话及其元数据。

观看演示！

它在 GitHub 上已经有近 111 个星，而且已经不再维护了（这个概念很令人兴奋）。你可以用它来构建更好的东西。

明星推特特工⭐️

10. Replexica——用于 React 的 AI 驱动的 i18n 工具包。

本地化面临的困难确实存在，因此利用人工智能的帮助来解决这个问题是值得考虑的。

Replexica 是一个用于 React 的国际化工具包，用于快速交付多语言应用。它无需将文本提取到 JSON 文件中，并使用 AI 驱动的 API 进行内容处理。

Replexica 是一个平台，而非一个库。它就像拥有一支翻译和本地化工程师团队为您服务，却无需额外费用。您只需要一个 API 密钥，一切就绪！

一些令人兴奋的功能让这一切都值得。

✅ Replexica 会自动将您的应用翻译成多种语言。

✅ Replexica 确保翻译准确无误、符合上下文、与用户界面完美契合，并力求翻译效果超越人类。但我不相信人工智能！

✅ Replexica 会在您添加新功能时保持您的应用本地化（更像是持续本地化）。

一些受支持的 i18n 格式包括：

不含 JSON 的 Replexica 编译器格式。
Markdown 内容的 .md 文件。
传统的 JSON 和基于 YAML 的格式。

为了让您大致了解 Replexica，以下是对基本 Next.js 应用程序进行多语言支持所需的唯一更改。

使用以下 npm 命令开始。

// install
pnpm add replexica @replexica/react @replexica/compiler

// login to Replexica API.
pnpm replexica auth --login

这就是您可以使用它的方法。

// next.config.mjs

// Import Replexica Compiler
import replexica from '@replexica/compiler';

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Define Replexica configuration
/** @type {import('@replexica/compiler').ReplexicaConfig} */
const replexicaConfig = {
  locale: {
    source: 'en',
    targets: ['es'],
  },
};

// Wrap Next.js config with Replexica Compiler
export default replexica.next(
  replexicaConfig,
  nextConfig,
);

您可以阅读快速入门指南以及有关底层使用内容的清晰记录。

他们在 GitHub 上有 1.1k 个 star，并且基于 TypeScript 构建。这个项目能帮你节省很多时间！

星光复写纸⭐️

11. DOMPurify – 一个仅适用于 DOM、超快、超强容忍度的 HTML XSS 清理器。

DOMPurify 是一款仅针对 DOM、速度超快、耐受性极强的 XSS 清理工具，适用于 HTML、MathML 和 SVG。作为开发者，我们需要它来保障应用程序的安全性。

DOMPurify 可以净化 HTML 代码并防止 XSS 攻击。
你可以向 DOMPurify 传入一个包含恶意 HTML 代码的字符串，它会返回一个干净的 HTML 代码字符串（除非你另有配置）。

DOMPurify 会去除所有包含危险 HTML 的内容，从而防止 XSS 攻击和其他恶意行为。而且速度超快。

它们利用浏览器提供的技术，并将其转化为 XSS 过滤器。浏览器速度越快，DOMPurify 的速度就越快。

DOMPurify 用 JavaScript 编写，可在所有现代浏览器中运行。它不会在 MSIE 或其他旧版浏览器上崩溃。

使用以下 npm 命令开始。

npm install dompurify
npm install jsdom

// or use the unminified development version
<script type="text/javascript" src="src/purify.js"></script>

这就是您可以使用它的方法。

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);
const clean = DOMPurify.sanitize('<b>hello there</b>');

如果遇到问题，请参阅文档。他们记录了如何使用脚本或在服务器端运行它。

您可以看到一些净化样品并观看现场演示。

我发现的另一个有用的替代方案是validator.js。

他们在 GitHub 上拥有 13k+ 颗星，并且被 340k+ 开发人员使用，这使得他们非常可信。

星级 DOMPurify ⭐️

12. Quivr——你的GenAI第二大脑。

Quivr，你的第二大脑，利用GenerativeAI的力量，成为你的私人助理！你可以把它想象成黑曜石，但配备了强大的AI功能。

您可以阅读安装指南。

您可以阅读文档并观看演示视频。

他们可以提供更好的免费套餐计划，但这足以让您进行测试。

它在 GitHub 上有 34k+ 个 Stars，有 220 多个版本，这意味着它们在不断改进。

星之箭⭐️

13. Appsmith——构建管理面板、内部工具和仪表板的平台。

管理面板和仪表板是任何软件理念的一些常见部分（在大多数情况下），我尝试从头开始构建它，这会带来很多痛苦和不必要的辛苦工作。

首先，请观看这个YouTube 视频，它在 100 秒内解释了 Appsmith。

他们提供拖放式小部件来构建 UI。
您可以使用 45 多个可自定义的小部件，在几分钟内创建美观的响应式 UI，无需编写任何 HTML/CSS 代码。查看完整的小部件列表。

Appsmith 支持在 GUI 的几乎所有地方编写 JavaScript 代码，包括小部件属性、事件监听器、查询和其他设置。Appsmith 支持在括号内编写单行代码{{ }}，并将括号内的任何内容解释为 JavaScript 表达式。

/*Filter the data array received from a query*/
{{ QueryName.data.filter((row) => row.id > 5 ) }}

or 

{{
  storeValue("userID", 42);  
  console.log(appsmith.store.userID); 
  showAlert("userID saved");
}}

您需要使用立即调用函数表达式（IIFE）来编写多行。

例如无效代码和有效代码。

// invalid code
/*Call a query to fetch the results and filter the data*/
{{ 
   const array = QueryName.data;
   const filterArray = array.filter((row) => row.id > 5);
   return filterArray;
}}

/* Check the selected option and return the value*/
{{ 
  if (Dropdown.selectedOptionValue === "1") {
      return "Option 1";
  } else {
      return "Option 2";
  }
}}

// valid code
/* Call a query and then manipulate its result */
{{ 
  (function() {
      const array = QueryName.data;
      const filterArray = array.filter((row) => row.id > 5);
      return filterArray;
   })()
}}

/* Verify the selected option and return the value*/

{{ 
  (function() {
      if (Dropdown.selectedOptionValue === "1") {
        return "Option 1";
      } else {
        return "Option 2";
      }
   })()
}}

只需几个简单的步骤，您就可以创建从简单的 CRUD 应用程序到复杂的多步骤工作流程的任何内容：

与数据库或 API 集成。Appsmith 支持最流行的数据库和 REST API。
使用内置小部件来构建您的应用程序布局。
在编辑器中的任何位置使用查询和 JavaScript 表达您的业务逻辑。
Appsmith 支持使用 Git 进行版本控制，以便协作构建应用程序，并使用分支来跟踪和回滚更改。部署应用程序并分享吧 :)

您可以阅读文档和指南，例如如何将其连接到本地数据源或如何与第三方工具集成。

您可以自行托管或使用云。他们还提供20 多个模板，方便您快速上手。以下是一些实用的模板：

Appsmith 在 GitHub 上拥有 32k+ 颗星，并有 200 多个版本。

明星应用匠⭐️

14. Apitable——面向 API 的低代码平台，用于构建协作应用程序。

APITable 是一个面向 API 的低代码平台，用于构建协作应用程序，据称它比所有其他 Airtable 开源替代品都要好。

它有很多很酷的功能，例如：

实时协作。

您可以生成自动表格。

无限的跨表链接。

API 第一个面板。

强大的行/列功能。

您可以阅读完整的功能列表。

您可以尝试apitable并在 apitable 的现场 Gitpod 演示中查看该项目的演示。

您还可以阅读安装指南，在本地或云计算环境中安装 APITable。

星空阿皮塔尔⭐️

15.聊天 UI 套件 React - 在几分钟内使用 React 构建您的聊天 UI。

Chatscope 的 Chat UI Kit 是一款用于开发网页聊天应用的开源 UI 工具包。
虽然该项目尚未被广泛使用，但其功能对于刚入门的新手来说仍然非常有用。

使用以下 npm 命令开始。

npm install @chatscope/chat-ui-kit-react

这就是创建 GUI 的方法。

import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react';

<div style={{ position:"relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>       
      <MessageList>
        <Message model={{
                 message: "Hello my friend",
                 sentTime: "just now",
                 sender: "Joe"
                 }} />
        </MessageList>
      <MessageInput placeholder="Type message here" />        
    </ChatContainer>
  </MainContainer>
</div>

您可以阅读文档。故事书中有
更详细的文档。

它提供了一些方便的组件TypingIndicator，如Multiline Incoming、等等。

我知道你们中的一些人更喜欢通过博客来了解整个结构，因此您可以阅读Rollbar 使用 Chat UI Kit React 的《如何将 ChatGPT 与 React 集成》。

您可以看到以下一些演示：

聊天机器人用户界面
聊天好友- 看看这个！

他们在 GitHub 上有 1.2k 个星。

明星聊天 UI 套件 React ⭐️

16. NPM Copilot ——Next.js 的 CLI 工具，可以实时分析日志。

它是一个命令行工具，使用 OpenAI 的 GPT-3 语言模型来提供修复代码错误的建议。

CLI 工具检测当前目录中正在使用的项目类型和包管理器。

然后，它运行适当的开发服务器命令（例如，npm run dev、yarn run dev、pnpm run dev）并监听正在运行的应用程序生成的日志。

当遇到错误时，CLI 工具会实时提供错误修复建议。

首先使用以下 npm 命令安装 npm-copilot 包。

npm install -g npm-copilot

CLI 工具将开始监控 Next.js 应用程序生成的日志并实时提供错误修复建议。

可以通过这个命令在项目中使用。

npm-copilot

他们在 GitHub 上有 354 颗星，并支持Nextjs、、和。ReactAngularVue.js

星级 NPM 副驾驶⭐️

17. reor – 自组织 AI 笔记应用程序。

这是迄今为止我见过的最令人兴奋的项目之一（就概念而言），特别是因为它在本地运行模型。

Reor 是一款由人工智能驱动的桌面笔记应用程序，它会自动链接相关笔记、回答笔记上的问题并提供语义搜索。

所有内容都存储在本地，您可以使用类似 Obsidian 的 Markdown 编辑器编辑笔记。该项目假设，用于思维的 AI 工具应该默认在本地运行模型。

Reor 立足于 Ollama、Transformers.js 和 LanceDB 等巨头的肩膀，支持 LLM 和嵌入模型在本地运行。此外，它还支持连接到 OpenAI 或与 OpenAI 兼容的 API，例如 Oobabooga。

🎯 这怎么可能呢self-organizing？

a. 您写下的每个笔记都会被分块并嵌入到内部矢量数据库中。

b. 相关笔记通过向量相似性自动连接。

c. LLM 支持的问答系统对笔记语料库进行 RAG 操作。

d. 一切都可以进行语义搜索。

您可以在此处观看演示！

可以将 Reor 视为一个包含两个生成器的 RAG 应用：LLM 和人工。在问答模式下，LLM 会从语料库中获取检索到的上下文，以帮助回答查询。

同样，在编辑模式下，用户可以切换侧边栏，显示从语料库中“检索”到的相关笔记。这是一种非常有效的“扩充”思路的方法，通过将当前笔记中的想法与语料库中的相关想法进行交叉引用。

您可以阅读文档并从网站下载。支持 Mac、Linux 和 Windows。

他们还提供了入门指南，以帮助您入门。

它们在 GitHub 上有 6.7k 颗星，并且是使用 TypeScript 构建的。

星号 reor ⭐️

18. Rowy - 低代码后端平台。

在电子表格界面上管理数据库，并构建强大的后端云函数，无需离开浏览器即可扩展。无需代码即可开始，并使用 Rowy 进行代码扩展。

有很多用例，但我不会一一介绍，否则篇幅会太长。所有操作指南及更多信息都包含在文档中。

它适用于所有主流框架和任何无代码工具，如 Bubble 和 Flutterflow。

您可以阅读文档并查看现场演示。

还建议观看产品演示！

他们在 GitHub 上有 5.9k 个星。

星罗威⭐️

19. React Cosmos – 用于独立开发和测试 UI 组件的沙盒。

React Cosmos 是一款强大的 UI 组件独立开发和测试工具。它允许你一次专注于一个组件，从而实现更快的迭代速度和更高质量的组件。

您可以构建一个组件库，让您的项目井然有序，并对新贡献者友好。它的沙盒环境和组件库功能可优化您的工作流程，帮助您提供卓越的 UI 体验。

你可以使用这个 npm 命令为 nextjs 项目安装它。你也可以将它与 Vite、React Native 甚至自定义打包器一起使用。

npm i -D react-cosmos react-cosmos-next

它具有使其成为标准的所有功能。

您可以阅读文档并查看现场演示。

他们在 GitHub 上有 8.2k 个星。

星反应宇宙⭐️

20. Hyper——基于网络技术构建的终端。

说实话，大多数终端的界面都非常糟糕，只能完成工作。

Warp 是一款不错的软件，但是它不适用于 Windows，而且我已经使用 Hyper 近 3 年了。

Hyper 是基于开放的 Web 标准而创建的，旨在为命令行界面用户提供美观且可扩展的体验。

我根据自己的喜好配置了它。如果需要，可以查看这个secret gist中的配置。我只使用一个名为 hyperpower 的插件。

它让我可以在 Windows 上使用 Linux 命令，就像我几年前刚开始的时候那样。

我的超级终端

许多社区成员使用 Hyper，因此这里有超过 239 个主题、插件和资源的丰富集合。您也可以在网站上找到它。

您还可以在网站上找到有关所有属性和附加 API 的信息。

Hyper 在 GitHub 上有 43k+ 个星，这让我有点震惊。

超级明星⭐️

21. Remotion——使用代码制作视频。

使用 React 创建真正的 MP4 视频，并使用服务器端渲染和参数化扩展您的视频制作。

使用以下命令开始。

npx create-video@latest

它为您提供一个帧编号和一个空白画布，您可以在其中使用 React 渲染任何您想要的内容。

这是一个将当前帧呈现为文本的示例 React 组件。

import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};