explaingit

palxiao/poster-design

4,704VueAudience · designerComplexity · 3/5LicenseSetup · moderate

TLDR

An open-source browser-based graphic editor for creating posters, social media covers, and product images, drag and drop text, shapes, and images on a canvas with AI background removal and PSD import included.

Mindmap

mindmap
  root((poster-design))
    What it does
      Graphic editing
      Poster creation
      AI background removal
      PSD import
    Tech stack
      Vue 3
      Vite
      Express
      Puppeteer
    Features
      QR code generator
      Multi-page projects
      Undo and redo
    Export
      Image files
      High quality render
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a self-hosted web-based design tool for creating promotional posters and social media covers with a drag-and-drop canvas editor.

USE CASE 2

Remove image backgrounds with a single click using the built-in AI feature and composite the subject onto a custom design.

USE CASE 3

Import an existing Photoshop PSD file to generate an editable canvas layout without recreating the design from scratch.

USE CASE 4

Generate customizable QR codes with embedded logos directly on the canvas and export the finished design as a high-quality image.

Tech stack

VueVitePiniaExpressPuppeteerDocker

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js for the frontend and Express backend, Docker Compose is available for simpler deployment but Puppeteer needs Chromium dependencies on the server.

Use freely for any purpose, including commercial use, as long as you keep the MIT copyright notice.

In plain English

Poster Design is an open-source browser-based image editor built for creating promotional graphics, product images, social media covers, and similar visual content. The project README is written in Chinese and targets Chinese-speaking developers, though the functionality is comparable to tools like Canva or Figma for poster and graphic work. The editor runs as a web application and provides a drag-and-drop canvas where you can place text, images, shapes, and SVG icons at any position. Elements can be grouped, resized, aligned, and layered. Text supports font selection, size, color, bold, italic, underline, letter spacing, line height, and CSS-based effects like shadows, outlines, and gradients. Images can be cropped, masked to custom container shapes, and replaced from a local file or asset library. A notable feature is AI-powered background removal: you can select an image on the canvas and remove its background with a single click. The tool also accepts Photoshop PSD files as input and parses them to generate an editable canvas layout, which helps when you want to start from an existing design file. QR codes can be generated directly on the canvas with customizable colors, sizes, and styles including embedded logos. Exporting finished designs to image files is handled by a combination of the browser-side html2canvas library and a server-side Puppeteer process, which renders the page headlessly to produce accurate high-quality output. Canvas size is adjustable by dragging handles, and the editor supports undo and redo, ruler guides, snap-to-alignment lines, and multiple pages in a single project. The tech stack is Vue 3, Vite, Pinia for state management, and Express for the backend. It can be run locally with a few npm commands or deployed with Docker Compose. The project is licensed under MIT. A paid support tier for custom development and technical guidance is offered separately.

Copy-paste prompts

Prompt 1
I want to run the poster-design editor locally. Walk me through cloning the repo, installing dependencies, and starting both the Vue frontend and Express backend with npm.
Prompt 2
How do I deploy poster-design with Docker Compose on a Linux server so it's accessible from a browser on my local network?
Prompt 3
I imported a PSD file into poster-design and want to edit the text layers. How does the PSD parsing work and are all Photoshop effects supported?
Prompt 4
Using poster-design's canvas API or codebase, how do I add a custom shape type that users can drag onto the canvas?
Prompt 5
How does poster-design handle high-quality image export? Explain how html2canvas and Puppeteer work together to render the final image accurately.
Open on GitHub → Explain another repo

← palxiao on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.