# palxiao/poster-design

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/palxiao-poster-design).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

4,731 stars · 741 forks · Vue · MIT

## Links

- GitHub: https://github.com/palxiao/poster-design
- Homepage: https://design.palxp.cn
- awesome-repositories: https://awesome-repositories.com/repository/palxiao-poster-design.md

## Topics

`canvas` `design` `image` `moveable` `nodejs` `poster` `puppeteer` `vue3`

## Description

This project is a web-based graphic design editor and online poster designer. It provides a browser-based environment for creating professional visual layouts, e-commerce graphics, and social media covers using a canvas with drag-and-drop elements.

The toolkit includes a specialized PSD template converter that parses Photoshop design files into editable web templates. It also features a custom QR code generator capable of producing styled codes with gradients and embedded logos, alongside a browser-based image manipulation tool for cropping assets and removing backgrounds.

The editor covers broad graphic design capabilities, including artboard and layer management, typography formatting with CSS effects, and spatial alignment assistance via snap lines and rulers. High-fidelity output is achieved through a hybrid frontend and server-side rendering process to ensure precise image reproduction.

The system supports user template management for storing and updating custom design layouts.

## Tags

### Graphics & Multimedia

- [Canvas-Based Image Editors](https://awesome-repositories.com/f/graphics-multimedia/canvas-based-image-editors.md) — Provides a browser-based canvas editor for creating posters and ecommerce graphics via drag-and-drop. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Online Poster Designers](https://awesome-repositories.com/f/graphics-multimedia/online-poster-designers.md) — Provides a comprehensive online environment for designing professional posters and social media covers using drag-and-drop elements.
- [Text Stroke and Fill Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing/sketchy-fill-generators/fill-and-stroke-styles/text-stroke-and-fill-renderers.md) — Enables advanced text effects including custom strokes and fills using CSS rendering. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Image Background Removal](https://awesome-repositories.com/f/graphics-multimedia/image-background-removal.md) — Features a background removal tool with cutout capabilities and manual brush repairs for image isolation. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Image Manipulation](https://awesome-repositories.com/f/graphics-multimedia/on-the-fly-media-streaming/image-manipulation.md) — Provides integrated tools for cropping, masking, and editing image assets directly within the editor. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Web-Based Graphics Editors](https://awesome-repositories.com/f/graphics-multimedia/web-based-graphics-editors.md) — Provides a full-featured web application for creating e-commerce graphics and posters using a canvas-based editor.
- [Browser-Based Image Processing](https://awesome-repositories.com/f/graphics-multimedia/browser-based-image-processing.md) — Offers a suite of client-side tools for background removal, image cropping, and SVG property management.
- [Server-Side Rendering Architectures](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/server-side-rendering-architectures.md) — Employs a hybrid architecture that combines browser layout logic with server-side rendering for high-fidelity output.
- [High-Resolution Image Rendering](https://awesome-repositories.com/f/graphics-multimedia/high-resolution-image-rendering.md) — Produces high-resolution final images using a hybrid server-side process to ensure precision. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Snap Alignment Libraries](https://awesome-repositories.com/f/graphics-multimedia/precision-alignment-tools/snap-alignment-libraries.md) — Includes an alignment engine that provides real-time snap lines and guides for precise element positioning.
- [Branded QR Codes](https://awesome-repositories.com/f/graphics-multimedia/qr-code-generators/branded-qr-codes.md) — Ships a QR code generator capable of adding custom colors, gradients, and embedded brand logos. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Visual Layout Guides](https://awesome-repositories.com/f/graphics-multimedia/visual-layout-guides.md) — Guides element placement through the use of rulers and auxiliary snap lines. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))

### User Interface & Experience

- [CSS Typography](https://awesome-repositories.com/f/user-interface-experience/css-typography.md) — Uses CSS properties to control advanced typography, including font styles, strokes, and gradients.
- [Design Import Tools](https://awesome-repositories.com/f/user-interface-experience/design-import-tools.md) — Imports design drafts from PSD files to turn them into editable web templates. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Canvas-Based Editors](https://awesome-repositories.com/f/user-interface-experience/image-editing-interfaces/canvas-based-editors.md) — Implements a browser-based editor for manipulating images, layers, and SVG assets to produce professional visual content.
- [Direct Canvas Manipulators](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers/direct-canvas-manipulators.md) — Provides a design canvas where users can click, drag, resize, and style elements directly.
- [Multi-Artboard Creators](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-authoring-software/design-tools/document-layout-design/multi-artboard-creators.md) — Supports the creation and management of multiple artboards with configurable dimensions and backgrounds. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Product and Image Mockups](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-authoring-software/design-tools/product-and-image-mockups.md) — Creates high-quality product photos and marketing banners tailored for ecommerce storefronts.
- [Layer and Color Controllers](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palette-management/layer-and-color-controllers.md) — Provides controls for layer stacking and color selection using a palette and eyedropper tool. ([source](https://cdn.jsdelivr.net/gh/palxiao/poster-design@main/README.md))
- [Image Masking](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/image-masking.md) — Provides non-destructive image clipping and transparency control using alpha channel masks.

### Web Development

- [PSD Template Parsers](https://awesome-repositories.com/f/web-development/psd-to-html-conversions/psd-template-parsers.md) — Translates binary PSD design files into editable web-based templates for easy updates.
- [Web Template Conversions](https://awesome-repositories.com/f/web-development/psd-to-html-conversions/web-template-conversions.md) — Provides a specialized converter that parses Photoshop PSD files into editable web-based design templates.

### Content Management & Publishing

- [Social Media Cover Generators](https://awesome-repositories.com/f/content-management-publishing/social-media-cover-generators.md) — Enables the creation of professional image covers and long-form layouts tailored for various social media platforms.
- [User Design Templates](https://awesome-repositories.com/f/content-management-publishing/user-design-templates.md) — Allows users to save and update custom design layouts as templates for future projects. ([source](https://xp.palxp.cn/apidoc/index.html))

### Development Tools & Productivity

- [Undo-Redo State History](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/action-based-state-tracking/undo-redo-state-history.md) — Implements a state history stack to support reversing and reapplying changes to the canvas design.

### Part of an Awesome List

- [Node.js](https://awesome-repositories.com/f/awesome-lists/more/node-js.md) — Listed in the “Node.js 项目” section of the Great Open Source Project awesome list.