Skip to content
BranchesTags

Repository files navigation

FakeChatGen

A fake chat screenshot generator that runs entirely in the browser — no server, no API required. 完全在浏览器中运行的假聊天截图生成工具 — 无需服务器，无需 API。

image

User Manual (English)

Overview

FakeChatGen lets you create realistic-looking fake chat screenshots in three popular styles: WhatsApp, Discord, and iMessage. You can set up custom characters, type any conversation, and export it as a PNG or JPEG image.

Getting Started

Install & Run (Development)

# Clone the repository
git clone <repo-url>
cd FakeChatGen

# Install dependencies
npm install

# Start the development server
npm run dev

Then open your browser to http://localhost:5173.

Build for Production

npm run build
npm run preview

How to Use

Step 1 — Choose a Chat Style

At the top of the left panel, select one of three visual styles:

Style Description
WhatsApp Dark teal header, green/white bubbles, beige background
Discord Dark desktop-style layout, colored usernames
iMessage Clean white layout, blue sent / gray received bubbles

You can also set the theme (Funny / Office / Drama) to categorize the conversation.

Step 2 — Add Characters

In the Characters section:

  1. Type a character's name in the input field.
  2. Check "This is Me (right side)" if this character represents you — their messages will appear on the right side.
  3. Click Add. Up to 5 characters are supported.

You can delete any character by clicking the red ✕ button. Deleting a character also removes their messages.

Step 3 — Write Messages

In the Messages section:

  1. Select a sender from the dropdown.
  2. Type the message content.
  3. Optionally enter a time (e.g. 14:30 or 2:30 PM).
  4. Click Add Message or press Ctrl + Enter.

The chat preview on the right updates automatically.

To delete a specific message, click the ✕ icon on it. To clear all messages, click Clear All.

Step 4 — Load a Template (Optional)

Click one of the three template buttons in the Templates section:

  • Funny — A humorous workplace conversation
  • Office — A relatable office-life chat
  • Drama — A dramatic soap-opera-style dialogue

The template language matches the currently selected UI language (Chinese or English). Loading a template will replace all current characters and messages.

Step 5 — Export the Image

In the Export section at the bottom:

  • Click Export PNG for a lossless image (best quality).
  • Click Export JPEG for a smaller file size.

The image will be downloaded automatically at 2× resolution for crisp output.

Language Switching

Click the globe button in the top-right corner of the header to toggle between Chinese (中文) and English.

Keyboard Shortcuts

Shortcut Action
Ctrl + Enter Add the current message

Tech Stack

Module Technology
Frontend Framework Vue 3 + TypeScript
Build Tool Vite
State Management Pinia
Internationalization vue-i18n
Image Export html2canvas
Styling Scoped CSS (no external framework)

Project Structure

FakeChatGen/
├── src/
│   ├── components/
│   │   ├── HeaderBar.vue          # Top navigation + language toggle
│   │   ├── StyleThemeSelector.vue # Style & theme picker
│   │   ├── CharacterManager.vue   # Add/remove characters
│   │   ├── MessageEditor.vue      # Add/remove messages
│   │   ├── TemplatePanel.vue      # Load preset templates
│   │   ├── ChatPreview.vue        # Phone frame + live preview
│   │   ├── MessageBubble.vue      # Individual message bubble
│   │   └── ExportPanel.vue        # PNG/JPEG export
│   ├── stores/chat.ts             # Pinia store (state management)
│   ├── composables/
│   │   ├── useTemplates.ts        # Template data (zh + en)
│   │   └── useExport.ts           # html2canvas export logic
│   ├── i18n/
│   │   ├── en.ts                  # English translations
│   │   └── zh.ts                  # Chinese translations
│   └── types/index.ts             # TypeScript interfaces
├── public/
├── index.html
└── package.json

用户手册（中文）

概述

FakeChatGen 是一个在浏览器中运行的假聊天截图生成工具，无需服务器或 API。支持三种流行的聊天风格：WhatsApp、Discord 和 iMessage。你可以自定义角色，输入任意对话，并导出为 PNG 或 JPEG 图片。

快速开始

安装并运行（开发模式）

# 克隆仓库
git clone <repo-url>
cd FakeChatGen

# 安装依赖
npm install

# 启动开发服务器
npm run dev

然后在浏览器中打开 http://localhost:5173。

构建生产版本

npm run build
npm run preview

使用教程

第一步 — 选择聊天风格

在左侧面板顶部选择三种视觉风格之一：

风格 描述
WhatsApp 深绿色顶栏，绿色/白色气泡，米色背景
Discord 深色桌面布局，彩色用户名
iMessage 简洁白色布局，蓝色发送/灰色接收气泡

也可以设置对话主题（搞笑 / 职场 / 情景剧），便于分类管理。

第二步 — 添加角色

在角色管理区域：

  1. 在输入框中输入角色名字。
  2. 如果这个角色代表"你自己"，勾选**"这是我（右侧显示）"**，该角色的消息会显示在聊天右侧。
  3. 点击添加。最多支持 5 个角色。

点击角色旁的红色 ✕ 按钮可删除角色，删除角色时其对应的消息也会一并删除。

第三步 — 编写消息

在消息列表区域：

  1. 从下拉菜单中选择发送人。
  2. 输入消息内容。
  3. 可选填写时间（例如 14:30）。
  4. 点击添加消息，或按 Ctrl + Enter。

右侧聊天预览会实时更新。

点击消息上的 ✕ 图标可删除单条消息；点击清空所有可删除全部消息。

第四步 — 加载模板（可选）

点击对话模板区域中的三个模板按钮之一：

  • 搞笑 — 幽默职场对话
  • 职场 — 贴近现实的上班吐槽
  • 情景剧 — 戏剧化的情感对白

模板语言与当前 UI 语言一致（中文或英文）。 加载模板将替换当前所有角色和消息，会有确认提示。

第五步 — 导出图片

在最下方的导出图片区域：

  • 点击导出 PNG — 无损图片，画质最佳。
  • 点击导出 JPEG — 文件较小，适合快速分享。

图片会自动以 2 倍分辨率下载，保证清晰度。

语言切换

点击顶部右侧的地球图标按钮，即可在中文和 English 之间切换。模板内容也会随之切换。

快捷键

快捷键 操作
Ctrl + Enter 添加当前消息

技术栈

模块 技术
前端框架 Vue 3 + TypeScript
打包工具 Vite
状态管理 Pinia
国际化 vue-i18n
图片导出 html2canvas
样式 组件 Scoped CSS

项目结构

FakeChatGen/
├── src/
│   ├── components/
│   │   ├── HeaderBar.vue          # 顶部导航 + 语言切换
│   │   ├── StyleThemeSelector.vue # 聊天风格 & 主题选择
│   │   ├── CharacterManager.vue   # 角色添加/删除
│   │   ├── MessageEditor.vue      # 消息添加/删除
│   │   ├── TemplatePanel.vue      # 预设模板加载
│   │   ├── ChatPreview.vue        # 手机框架 + 实时预览
│   │   ├── MessageBubble.vue      # 单条消息气泡
│   │   └── ExportPanel.vue        # PNG/JPEG 导出
│   ├── stores/chat.ts             # Pinia 状态管理
│   ├── composables/
│   │   ├── useTemplates.ts        # 模板数据（中/英文）
│   │   └── useExport.ts           # html2canvas 导出逻辑
│   ├── i18n/
│   │   ├── en.ts                  # 英文翻译
│   │   └── zh.ts                  # 中文翻译
│   └── types/index.ts             # TypeScript 类型定义
├── public/
├── index.html
└── package.json

Made with Vue 3 + TypeScript

About

A fake chat screenshot generator that runs entirely in the browser — no server, no API required. 完全在浏览器中运行的假聊天截图生成工具 — 无需服务器，无需 API。

Resources

Readme
Activity
Custom properties

Stars

6 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages