What it is
OpenDataV is a pure front-end, drag-and-drop, visual, low-code data visualization platform built in TypeScript and Vue 3. It lives in the Vue ecosystem and targets large-screen dashboards, data boards, and component-based visual interfaces. The project uses Vite, NaiveUI, and a Monorepo structure.
The problem it solves is hand-built dashboard layout work. A user can add components, move and resize them, configure data bindings, and manage APIs in a browser editor. The platform also supports custom component development, so teams can create their own visual elements and connect them to the editor.
Key capabilities
- The editor supports adding components, editing, previewing, importing, exporting, and saving layouts.
- Layers can be moved to the front, to the back, up, down, shown, hidden, copied, cut, and pasted.
- Components can be scaled, rotated, dragged, copied, pasted, grouped, split, removed, and auto-aligned.
- Undo and redo features support user operations during layout and data configuration.
- Custom components are supported, including custom configuration items for each component.
- Interface management supports sample data, static data, and HTTP API data, with JavaScript data processing.
- The project supports light and dark themes and uses IndexedDB for snapshot storage.
Who uses it and how
- Dashboard builders can assemble large-screen layouts by dragging components onto a canvas, arranging them, and saving the result.
- Front-end teams can develop custom components independently and connect them to the editor through the component model.
- Data application builders can bind panels to sample data, static data, or HTTP APIs in the visual editor.
- Self-hosted users can run the project locally with pnpm, build the core library, start development, or create a production build.
Getting started
The README lists pnpm for dependencies, pnpm build:lib for the core library, pnpm dev for local development, and pnpm build for production packaging. It also links to hosted demos and documentation.
When to use it — and when not to
OpenDataV is useful when a Vue 3 or TypeScript team wants a low-code front-end editor for dashboards and custom component workflows. It is less suitable when a project needs a complete backend, because the README describes it as pure front-end and points to a separate backend repository. It may also be unsuitable for broad browser support or many ready-made components, because the README says it was tested only in latest Chrome and Microsoft Edge and that only some components are currently developed.
project readme (upstream, from github) — read inline
简介
🎃OpenDataV 是一个纯前端的拖拽式、可视化、低代码数据可视化🌈开发平台，你可以用它自由的拼接成各种✨炫酷的大屏，同时支持用户方便的开发自己的组件并接入平台。
体验
🧙国外：http://datav.byteportrait.com/
🧙国内：http://small_bud_star.gitee.io/opendatav
🧙国内：http://opendatav.xingxingzaixian.fun/ (已对接后端)
🧙文档: https://ansgoo.github.io/docs/
源码地址：
🍨github: https://github.com/AnsGoo/openDataV
🍨gitee: https://gitee.com/small_bud_star/OpenDataV
🍨后端: https://gitee.com/small_bud_star/open-data-backend
目前该项目在不断的完善中，🎉欢迎 issuer,🌹欢迎 start, 🎨欢迎 commit, 🚀欢迎 use...，💪欢迎一切技术交流活动
👁️预览
🤿 页面编辑
组件添加
组件操作
组件数据配置
🖇️ 接口管理
💒功能
- 🎊 编辑器页面基本功能完成，包括编辑、预览、导入、导出、保存
- 🪄 图层的置顶、置底、上下移动、显示、隐藏、复制、剪切、粘贴
- 🖼️ 组件的缩放、旋转、拖动、复制、粘贴、组合、拆分、移除、自动对齐
- 🔮 支持用户操作记录的恢复、撤销功能
- 🧶 支持用户自定义组件
- 📔 支持组件的用户自定组件配置项
- 🏪 支持明暗主题切换
- 🧬 使用Monorepo模式进行组件和依赖管理
- 🧶 组件数据自定义接入
- 🔌 数据动态处理（JS已完成）
- 🖇️ 接口管理(示例数据、静态数据、HTTP接口数据已完成适配)
🎢技术点
本项目采用Vue3 + vite + TypeScript开发，界面库使用NaiveUI，使用面向对象方式封装了路由、请求、存储，组件采用自动扫描注册、异步加载，提升渲染速度；使用IndexDB存储快照数据，减少快照数据内存占用，加快访问速度；组件独立依赖，解耦了组件和基础框架的依赖库，方便后续独立开发组件。
目前仅开发了部分组件，后续还会继续完善。
⌛计划功能
💂开发
🧊开发环境
🚥目前仅在 Chrome 和 Microsoft Edge 最新版浏览器测试过，其他浏览器未测试
🎮启动项目
# 安装依赖
pnpm install
或
pnpm bootstrap
# 构建核心库
pnpm build:lib
# 运行项目
pnpm dev
# 打包项目
pnpm build
🧑💻代码提交
git commit 信息请按照如下规范进行书写
- feat: 新功能
- fix: 修复 Bug
- docs: 文档修改
- perf: 性能优化
- revert: 版本回退
- ci: CICD 集成相关
- test: 添加测试代码
- refactor: 代码重构
- build: 影响项目构建或依赖修改
- style: 不影响程序逻辑的代码修改
- other: 不属于以上类型的其他类型(日常事务)
☎️联系方式
技术交流，请加微信群
更新动态请关注公众号
如果群链接失效请加微信，回复：OpenDataV 拉群
