DocFlow

screenshot of DocFlow
nextjs
react
tailwind
shadcn-ui

一个基于 Tiptap 和 Next.js 构建的现代化协同文档编辑器,集成了丰富的编辑能力与多人实时协作功能,支持插件扩展、主题切换与持久化存储。适合团队写作、教育笔记、在线文档平台等场景。

Overview

在数字化时代,团队协作和在线文档编辑的重要性日益显著。一个基于 Tiptap 和 Next.js 构建的现代化协同文档编辑器为我们提供了一个理想的解决方案。这个编辑器不但集成了丰富的编辑能力,还能够支持多人实时协作,使得团队协作更加高效。无论是在团队写作、教育笔记还是在线文档平台中,它都显得格外得心应手。

这个编辑器专为现代用户设计,支持插件扩展和主题切换,满足不同用户的个性化需求,同时还具备持久化存储功能,让用户的数据更有保障。它是当代团队合作的得力伙伴。

Features

  • 富文本编辑:支持标题、列表、表格、代码块、数学公式和图片等多种内容类型,满足多样化的编辑需求。
  • 实时协作:集成 Yjs 和 @hocuspocus/provider,实现高效的多人在线协作,让团队成员可以同时编辑同一文档。
  • 插件丰富:基于 Tiptap Pro,拥有多种增强功能,如表情和详情组件,提升编辑体验。
  • 完善工具链:支持 Prettier、ESLint、Husky 和 Vitest 等开发工具,确保代码质量和风格一致。
  • 新颖技术栈:前端基于 Next.js 和 Tiptap,后端采用 NestJS 等现代化技术,提升整体性能和开发效率。
  • 多样的安全措施:通过 @fastify/helmet 和请求频率限制提供安全保护,保障用户数据的安全性。
  • 高效的数据库管理:使用 Prisma 进行类型安全的数据库访问,以及良好的数据验证与转换,提升应用的稳定性和可靠性。
nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

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

shadcn-ui
Shadcn UI

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

eslint
Eslint

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.

framer-motion
Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

typescript
Typescript

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.

Zustand

Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.