hub / github.com/byodian/oneimg

github.com/byodian/oneimg @v0.4.0

repository ↗ · DeepWiki ↗ · release v0.4.0 ↗ · + Follow

146 symbols 409 edges 72 files 1 documented · 1%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

<img alt="OneIMG" src="https://github.com/byodian/oneimg/raw/v0.4.0/docs/oneimg-banner.png" />

Oneimg 官网 | Telegram 反馈群 | 吐个槽

介绍

一个纯前端实现的文字转图片应用，您可以通过编辑器输入文本和图片，使用预设的 CSS 模板样式，快速生成预览，并导出为图片。

适合微信公众号长图推文以及小红书、Instagram 等图片社交媒体贴文制作。

https://github.com/user-attachments/assets/d12a1009-a27a-4dae-a2e5-727f3b982e3b

特性

快速文字转图片，大幅提高内容创作效率
内置多种模版和主题色，更多模版还在开发中
固定布局编辑器，无需考虑复杂的排版问题
实时预览生成的长图
导出为长图和多张切图
开放格式，导出主题为 .oneimg json 文件
正文编辑器支持加粗、斜体、下划线和列表等格式

预览地址

oneimgai

技术栈

前端： Next.js、tiptap 编辑器、tailwindcss、shadcn/ui
图片处理：html-to-image, UPNG
数据库：IndexedDB (本地存储)

快速开始

# 安装依赖
pnpm install 

# 启动项目
pnpm dev

使用方法

打开应用后，首先创建主题
选择预设的 CSS 样式模板
使用编辑器输入内容，实时预览生成的图片样式
点击导出按钮，生成 PNG 格式的图片并下载。

贡献

我们欢迎各类贡献。如果你有新的功能或改进，欢迎提交 PR： 1. Fork 本项目。 2. 创建新的分支 (git checkout -b feature/your-feature)。 3. 提交修改 (git commit -m 'Add some feature')。 4. 推送到分支 (git push origin feature/your-feature)。 5. 创建 Pull Request。

许可证

本项目基于 MIT license 开源。

捐赠

支持我

Extension points exported contracts — how you extend this code

Content (Interface)

(no doc)

src/types/common.ts

WorkspaceProps (Interface)

(no doc)

src/components/workspace/workspace.tsx

EditorStore (Interface)

(no doc)

src/store/use-editor-store.ts

ContentWithId (Interface)

(no doc)

src/types/common.ts

ThemeFormProps (Interface)

(no doc)

src/components/workspace/theme-form-dialog.tsx

TemplateStore (Interface)

(no doc)

src/store/use-theme-store.ts

ThemeContent (Interface)

(no doc)

src/types/common.ts

ContentItemButtonsProps (Interface)

(no doc)

src/components/workspace/content-item-buttons.tsx

Core symbols most depended-on inside this repo

src/components/ui/use-toast.ts

buttonVariants

called by 9

src/components/editor/editor-bubble-menu.tsx

dispatch

called by 9

src/components/ui/use-toast.ts

handleDialogOpen

called by 6

src/components/header/header.tsx

openDB

called by 6

src/lib/indexed-db.ts

useCarousel

called by 4

src/components/ui/carousel.tsx

useToast

called by 4

src/components/ui/use-toast.ts

Shape

Function 111

Interface 35

Languages

TypeScript100%

Modules by API surface

src/types/common.ts15 symbols

src/lib/utils.ts10 symbols

src/components/ui/use-toast.ts9 symbols

src/components/header/header.tsx9 symbols

src/components/header/utils.ts8 symbols

src/lib/indexed-db.ts7 symbols

src/app/page.tsx6 symbols

src/lib/template.ts5 symbols

src/components/workspace/content-list.tsx5 symbols

src/components/workspace/content-item.tsx5 symbols

src/components/editor/editor-form.tsx5 symbols

src/types/template.ts4 symbols

For agents

$ claude mcp add oneimg \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact