Notion 复刻 · 纯前端本地笔记应用,无后端无追踪

喜欢 Notion 的 block 编辑体验、页面树、多视图数据库,但又不希望自己的笔记数据上传到云端?这个开源的 Notion 复刻版把核心体验搬到了纯前端,数据全部存在你的浏览器本地,无后端、无账号、无追踪。

工具是什么

这是 ByteNote 部署的一个 Notion 前端 1:1 复刻版本,目的是把 Notion 的核心编辑和组织能力做成纯本地运行的应用。打开网站即用,不需要注册账号,所有笔记数据存在浏览器的 IndexedDB 里,彻底掌握在自己手里。

工具地址:https://notion.bytenote.net/

核心特性

纯前端 1:1 复刻:界面、交互、视觉都按 Notion 来,上手零成本
数据本地化:所有笔记、数据库、附件存在 IndexedDB,不上传服务器
block 编辑器:基于 Tiptap(ProseMirror),支持文本、标题、列表、引用、代码块、图片、表格、任务列表、视频嵌入等
页面树 + 侧边栏:支持任意层级的页面嵌套、收藏、回收站、面包屑导航
多视图数据库:同一份数据可切表格、看板、列表、画廊、日历、时间线六种视图
丰富的属性类型:标题、文本、数字、单选、多选、状态、日期、人员、复选框、URL、邮件、电话、公式、关联、创建时间、更新时间
筛选、排序、分组:数据库支持多条件筛选和分组
拖拽排序:侧边栏页面、数据库行/列、看板卡片都能拖拽
Slash 命令菜单:敲 / 召唤命令面板,插入任意 block
暗色模式:跟随系统主题

怎么用

打开网站,左侧是侧边栏(页面树 + 搜索 + 设置),顶部是面包屑
点击侧边栏「+」新建页面,输入标题,正文随便写
在正文里敲 / 召唤 slash 菜单,插入各种 block(标题、列表、引用、代码块、图片、表格、任务)
想要做成数据库?新建「数据库」类型的页面,选一个视图(表格/看板/列表/画廊/日历/时间线)
给数据库加属性,比如状态、日期、标签;然后按这些属性筛选、排序、分组
把常用页面加收藏,顶部收藏区快速访问
删掉的页面进回收站,可恢复或彻底删除

因为是纯前端,刷新页面数据不会丢。换浏览器或清缓存数据会消失,适合做日常速记、规划、知识库、轻量数据库用。

适合什么场景

不想注册 Notion、又想要那种 block 编辑体验的人
个人速记、待办、规划、读书笔记、知识库
不希望笔记上传云端,所有数据想自己掌握
做一个项目管理小看板、内容规划日历、自定义数据库
当成本地的 wiki、随手记事本

技术实现

项目用 React 19 + TypeScript + Vite 搭建,核心是 Tiptap 编辑器(ProseMirror 内核)负责 block 编辑,Zustand 管全局状态,Dexie.js 把数据落到 IndexedDB。多视图数据库是这套实现的精华,支持表格/看板/列表/画廊/日历/时间线六种视图,共享一套底层数据模型。

拖拽用 @dnd-kit,大表格长列表用 @tanstack/react-virtual 虚拟滚动。代码高亮、KaTeX 公式、emoji、任务列表、表格、图片、视频嵌入这些 Notion 经典能力都有。

整个项目无后端、无追踪,部署在 Cloudflare Pages 上,加载快、访问稳。

上手试试

如果你想要 Notion 的体验又不希望数据上传,这个本地复刻版值得一试。打开网站就能用,试完不喜欢关掉就行,数据也不会留下任何痕迹。