CanvasEditor

This is a creator of posters. Available features:

✨ Add background from disk

✨ Add image from disk and customize its size and position

✨ Add text and customize the color, position and available area of the text

✨ Download PNG image (1080px by 1350px)

✨ Not satisfied of your poster? Reset and start again!

$LiveDemo:$ GitHub Pages

Video presentation

TODO

Web vitals

🚀 Ultra fast (0.4s Speed Index, LCP and FCP)

🚀 344kB bundle size

Setup

Prerequisites

• Node.js v22.13.1
• pnpm v9.x

Install fresh packages:

pnpm i --frozen-lockfile

Running

Dev server

pnpm dev

Building for production and running production server

pnpm build
pnpm preview

Application will be built in dist directory.

Testing

pnpm test

Deploy

This repository is configured with Continuous Deployment strategy, that means that every time you push changes to main branch, GitHub Pages will be deployed.

Tech stack

• React.js 18
• Tailwind 4.x
• Canvg - for drawing SVG files on canvas
• TypeScript

Dev stack

• Vite
• Vitest
• Eslint
• Prettier
• SVGR - loading SVG files as React components