# openprint **Repository Path**: ljlToTlj/openprint ## Basic Information - **Project Name**: openprint - **Description**: OpenPrint是一款开源、零后端依赖的 Web 打印模板可视化设计器。它让用户通过拖拽即可设计快递面单、发票、标签、报表等打印模板，支持 AI 一句话生成、云打印、C++ 桌面客户端静默打印，3 分钟即可对接 ERP 系统。 - **Primary Language**: TypeScript - **License**: AGPL-3.0 - **Default Branch**: master - **Homepage**: https://op.yy360.space - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 84 - **Created**: 2026-08-31 - **Last Updated**: 2026-08-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

OpenPrint Logo

OpenPrint

Open-Source Web Print Designer · AI-Powered · Framework-Agnostic · Cross-Platform

English | 简体中文 | 日本語

Stars Release License Vue 3 Naive UI TypeScript Fabric.js npm

Key Highlights · Features · Quick Start · AI Assistant · Architecture · Deployment · FAQ


🚀 **Developers welcome** — We invite developers around the world to join the OpenPrint open-source community: contribute code, file issues, share ideas, and help build a better print solution together! **OpenPrint** is an open-source, zero-backend visual designer for print templates. Design shipping labels, invoices, barcodes, tags, and reports by drag & drop, with one-sentence AI template generation, cloud printing, and silent printing via the bundled C++ desktop client — connect your ERP system in 3 minutes. > Pure front-end architecture: no server, no database — everything runs in the browser. > **Framework-agnostic design** — The core rendering engine is fully decoupled from the UI layer. The designer is built on Vue 3 + Naive UI, while the rendering engine is pure TypeScript and integrates seamlessly with React, Vue, Angular, vanilla JS, or any other stack. ![Designer UI](screenshots/designer-overview.png) *WYSIWYG print template designer with drag & drop controls and live preview* --- ## Table of Contents - [Key Highlights](#key-highlights) - [Features](#features) - [Quick Start](#quick-start) - [AI Assistant](#ai-assistant) - [Architecture](#architecture) - [Project Structure](#project-structure) - [Deployment](#deployment) - [Desktop Client](#desktop-client) - [ERP Integration](#erp-integration) - [FAQ](#faq) - [Contributing](#contributing) - [License](#license) --- ## Key Highlights ### 🔌 Framework-Agnostic, Decoupled Engine & UI OpenPrint separates the **engine layer** from the **UI layer**: - **Rendering engine** — pure TypeScript, zero framework dependencies. Handles template parsing, data binding, pagination, and HTML/PDF/SVG rendering & export - **Designer UI** (`openprint26`) — a visual drag & drop designer built on Vue 3 + Naive UI Whether your project uses **React, Vue, Angular**, or **vanilla JS**, integration is straightforward: | Integration | Description | |-------------|-------------| | **Vue 3 project** | Install `openprint26` and use the `` component | | **React project** | Render templates via the engine SDK, or embed the designer via iframe / Web Components | | **Angular project** | Engine SDK rendering + designer embedded via iframe | | **Vanilla JS / any framework** | Zero-dependency engine SDK — `render({ template, data })` outputs HTML | ### 🤖 One-Sentence AI Template Generation Skip manual drag & drop — just describe what you need and get a professional print template. Supports shipping labels, logistics tags, warehouse documents, retail receipts, and more. ![AI Assistant](screenshots/ai-assistant.png) *AI generates print templates from natural language — a shipping label in one sentence* ``` User input: "Create a shipping label with recipient, sender, and a tracking-number barcode" AI output: Create template → place text controls → add barcode → use it in one click ``` ### ☁️ Cloud Printing Remote printing across regions and stores with centrally managed templates. Print directly from the browser — no drivers needed. Cloud print queue, automatic retry on disconnect, permission control, and print log auditing. ![Cloud Print](screenshots/cloud-print.jpg) *Multi-store remote printing with unified template management and print queue monitoring* ### 📊 Web Report Design Multi-level report structures: grouped tables, cross-tabs, master-detail. Aggregation functions (sum/average/count), embedded bar/line/pie charts, conditional formatting for data alerts, and multi-datasource joins. ![Report Design](screenshots/report-design.png) *Grouped reports, cross-tabs, and charts for complex data presentation* --- ## Features ### Designer | Feature | Description | |---------|-------------| | **Control library** | 14 control types: text, image, rectangle, circle, line, barcode, QR code, table, rich text, chart, zone, math formula, signature, label grid | | **Drag & drop design** | WYSIWYG editing with free dragging, snap alignment, and ruler guides | | **Multi-page support** | Multi-page design with per-page headers/footers and adjustable page gaps | | **Data binding** | JSON / CSV / API datasources, Mustache binding with built-in expression functions | | **Theme switching** | Naive UI dark/light theme, one-click toggle | | **Framework-agnostic** | Pure-TypeScript engine layer — works with React/Vue/Angular/vanilla JS | | **Template management** | Local storage, template import/export, template marketplace | | **Live preview** | Preview data binding results with pagination | | **Export** | PDF / JPG / SVG / HTML multi-format export | ### Printing & Integration - **Direct web printing** — browser print dialog, no setup - **Silent desktop printing** — bundled C++ Qt client, zero popups - **Cloud printing** — remote store printing with queue management - **ERP integration** — HTTP API, up and running in 3 minutes ### Tech Stack #### Designer UI Layer ![Vue 3](https://img.shields.io/badge/Vue_3-4FC08D?style=flat-square&logo=vue.js&logoColor=white) ![Naive UI](https://img.shields.io/badge/Naive_UI-18A058?style=flat-square&logo=naiveui&logoColor=white) ![Fabric.js](https://img.shields.io/badge/Fabric.js-7.x-blue?style=flat-square) ![Pinia](https://img.shields.io/badge/Pinia-FFD859?style=flat-square&logo=pinia&logoColor=black) #### Core Engine Layer (Framework-Agnostic) ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white) ![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white) ![Vitest](https://img.shields.io/badge/Vitest-6E9F18?style=flat-square&logo=vitest&logoColor=white) ![UnoCSS](https://img.shields.io/badge/UnoCSS-333333?style=flat-square&logo=unocss&logoColor=white) > The engine layer is framework-free; the designer UI is built on Vue 3 + Naive UI. React / Angular / vanilla JS projects integrate through the engine SDK. --- ## Quick Start ### npm Install ```bash # npm npm i openprint26 # pnpm pnpm add openprint26 # yarn yarn add openprint26 ``` ### Use in a Vue 3 Project ```ts import { createApp } from 'vue' import OpenPrint from 'openprint26' import 'openprint26/dist/style.css' const app = createApp(App) app.use(OpenPrint) app.mount('#app') ``` ```vue ``` ### Use in a React Project Embed the designer via iframe; render templates directly through the engine SDK: ```tsx import { useEffect, useRef } from 'react' import { render } from 'openprint26/sdk' export default function App() { const containerRef = useRef(null) useEffect(() => { // Engine rendering — framework-free, outputs HTML let cancelled = false render({ template: templateJson, data }).then(({ html }) => { if (!cancelled) containerRef.current!.innerHTML = html }) return () => { cancelled = true } }, []) return ( <> {/* Designer: embed via iframe */}