#实时预览

宝玉

2周前

v0 dev 推出了新的设计模式（Design Mode），简单来说就是在线网页编辑功能，可以直接对 AI 生成的 UI 手工调整，减少与 LLM 的交互，当年为了减少手动调整让 AI 去帮忙写 UI，现在 AI 生成里面加上手动操作，真是个轮回呀😂，严格来说算是螺旋式上升。具体功能： * 快速调整你的生成内容，包括文案、字体排版、页面布局、配色风格等。 * 实时预览效果，满意后再保存。 * 无需消耗积分或等待大语言模型（LLM）响应，即调即看。 * 原生支持 Tailwind 和 shadcn，设计体验更加顺畅。

#设计模式 #在线网页编辑 #AI生成 #UI调整 #实时预览

GitHubDaily

2个月前

在尝试多众多微信公众号 Markdown 编辑器后，wxpm 这款开源免费的编辑器体验颇为出色。支持 Markdown 所有基础语法、自定义 CSS 样式、多种主题选择、实时编辑预览以及色盘取色等等功能。 GitHub：提供 Docker 快速部署在线使用，轻松创建出一篇简洁美观大方的微信公众号图文。

#微信编辑器 #开源工具 #markdown编辑 #Docker部署 #在线编辑 #实时预览

idoubi

3个月前

# 分享一个 idea 最近 AI Coding 越来越🔥。此类产品依赖的一项核心能力，是对 AI 生成的代码实时预览。不同的项目代码，用到的预览方案不太一样。如果生成的代码是单个文件，直接放到 iframe.srcdoc 就能预览，这个方案实现起来很容易。如果生成的代码是多个文件，涉及到框架 / 组件 / 依赖，预览方案要复杂很多。比如，让 AI 生成一个 Landing Page，按照 nextjs 的项目规范返回代码，AI 生成的文件树示例： - app/page.tsx - app/globals.css - components/ - Header.tsx - Hero.tsx - Features.tsx - Footer.tsx 这样的一组代码文件，要实时预览，就必须走自定义预览服务的方案。考虑到想切入 AI Coding 赛道的产品很多，每个人都去实现一个预览服务，成本很高。可以做一个通用的 code-preview 服务，提供 API 供第三方接入，支持预览任意类型的项目代码，包括单文件 / 多文件。这个 code-preview 服务，可以用 go 实现，基于 docker + 预置镜像支持各类项目的预览需求。 1. 先制作几套常用的代码模板，打包成 docker 镜像，包括 - vite + react - vite + vue - nextjs + shadcn/ui - nuxtjs 2. 用 go 实现一个服务管理模块 - 接收上游传递的代码包 - 解压缩拿到所有的代码文件 - 根据预览的项目类型，选用特定的 docker image 启动 docker 容器，挂载要预览的代码文件到容器，替换掉模板中的特定文件 - 返回容器的预览端口，拼接可公网访问的预览地址给到上游 - 接到上游预览关闭信号，销毁 docker 容器，或者通过定时程序来清理不再活跃的 docker 容器 3. 需要评估预览服务的启动耗时（文件传输耗时，容器启动耗时），需要支持并发请求（可能会有本地端口占用冲突的问题，服务器资源不够问题） code-preview 服务跟 AI Coding 业务完全解耦，业务方请求 AI 生成完代码，请求 code-preview 服务的 API 拿到预览地址，通过 iframe.src 预览 code-preview 服务需要保证稳定性和启动预览的速度，如果因为代码问题导致预览报错，需要把错误信息返回给业务方，以便业务方带上错误请求 AI 修正代码后重新启动预览 code-preview 服务按照业务方的 API 调用次数计费跟 bolt 公司用到的 WebContainer 技术有点类似，只不过 WebContainer 是跑在浏览器端，code-preview 服务是跑在云端，code-preview 的接入会更方便，灵活性也会更高。预览速度方面需要调试后才能对比。你看好这套方案吗？

#AI #AI Coding #实时预览 #生成代码 #多文件预览 #iframe.srcdoc #框架 #组件 #依赖 #Landing Page

Geek

4个月前

非常赞的现代化 Markdown 编辑器，搞得我都想做一个公众号了。 🎨实时预览 - 所见即所得的编辑体验 📱支持移动设备 - 在手机上直接编辑，搭配 DeepSeek和微信公众号助手使用 🎯 微信风格 - 完美适配微信公众号样式 🚀 快速高效 - 基于 Next.js 构建，性能优异

#Markdown编辑器 #微信公众号 #实时预览 #移动设备支持 #高效性能

idoubi

4个月前

AI 生成代码，实时预览的几种方案👇 一、 html + srcdoc + iframe 1. AI 生成可以通过浏览器直接打开的 html 文件（单文件，html/css/js 写到一起） 2. 通过 iframe 的 srcdoc 传入 html 源码预览 3. 通过 importmap 指定依赖包的 CDN 资源。这种方案实现起来简单，预览效率高。二、react/vue + blob + iframe 1. AI 生成 react / vue 组件代码（单文件组件，无本地 import 依赖） 2. 通过 Babel.transform 转换 react 组件/通过 VueCompiler 编译 vue 组件 3. 使用转换/编译后的组件，构建一个 html 文件 4. 使用 blob 构建预览 url，传入 iframe.src 预览 const blob = new Blob([html], { type: 'text/html' }); iframe.src = URL.createObjectURL(blob); 这种方案稍微复杂一些，适合 react / vue 单文件组件预览。 3. webcontainer 1. AI 生成组件代码（可以返回多个组件文件，组件可以互相 import） 2. 构建一个最小可运行的 vite 项目骨架，把 vite 骨架包含的文件和 AI 生成的组件打包在一起，构建一个文件树 3. 启动 webcontainer 容器，挂载文件树 4. 通过 webcontainer 执行终端命令，安装项目依赖 5. 通过 webcontainer 启动预览服务，得到预览地址 6. 把预览地址传入 webcontainer 容器外的 iframe.src 实现项目预览这种方案依赖 webcontainer，可以实现多组件预览，灵活性更高，但是涉及到文件挂载，命令行安装依赖等步骤，预览速度会慢一些。 ----- 总结 ----- 方案一适合用户不关心代码，只想快点看到效果的场景，比如用 Pagen 一句话生成 landing page，页面内容都在一个 html 文件里面。方案二适合辅助前端写组件场景。比如用 CopyWeb 截图复刻设计，生成单个 react 组件，在线预览效果，导出到本地项目使用。方案三适合一句话生成完整项目场景，比如用 bolt/v0 一句话生成 nextjs 项目骨架，可在线预览，可导出 zip 到本地修改。

#AI生成 #代码预览 #实时预览 #HTML #浏览器 #前端开发 #技术方案 #React #Vue #框架对比