Image Editor

Description

A handy content creation tool that lets you browse, edit, and download images using the free image gallery API Lorem Picsum.

Gallery

Editor

Prerequisites

• Node: v20.14.0 (recommended)
• NPM: 10.8.2 (recommended)
• Playwright (run npx playwright install)

Run Locally

Clone the project

git clone https://github.com/zaikinv/synthesia-image-editor.git

Go to the project directory

cd synthesia-image-editor

Install dependencies

npm i

Start the server

npm run dev

Open http://localhost:5173/ in your browser.

Configuration

See the src/config.js file for the application configuration.

Example:

const appConfig = {
  apiBaseUrl: 'https://picsum.photos',
  editor: {
    enabledControls: [
      'width', 
      'height', 
      'grayscale', 
      'blur'
    ],
  },
  gallery: {
    imagesPerPage: 10,
    imagePreviewWidth: 300,
    imagePreviewHeight: 200,
    showMeta: [
      'author', 
      'url'
    ],
  },
};

Build for Production

npm run build

Also available on Vercel: Synthesia Image Editor.

Run Production Preview

npm run preview

Open http://localhost:4173/ in your browser.

Storybook

npm run storybook

Open http://localhost:6006/ in your browser.

Also available on Vercel: Synthesia Image Editor Storybook.

Unit Tests

Unit

npm run test:unit

E2E

Headless mode

Playwright installation is required. Check Prerequisites before running.

npm run test:e2e

UI mode

Playwright installation is required. Check Prerequisites before running.

npm run test:e2e-ui