Image Editor App for React and Svelte

Bootstrap your image editor with the help of this SPA created for React and Svelte codebases. Define the editor options you want to enable, and translate your app through props:

// Import the relevant component
import { ImageEditor } from '@components/ImageEditor.tsx'
import ImageEditor from '@components/ImageEditor.svelte'

// Call the component with the following props
<ImageEditor
    // Define which options should be visible in what order
    availableOptions={[
        'crop',
        'filter',
        'text',
        'adjustments',
        'templates'
    ]}

    // Optionally define translations
    cropLabel="Crop"
    filterLabel="Filter"
    ...
/>

Functionality

This application comes with the following functionalities:

• Apply Crop: Crop parts off from your images with the helf of the crop tool.
• Use Filters: Use predefined filters to change the style of your images with a click.
• Make Adjustments: Adjust the brightness, saturation, or hue of your images. Create different filters with the help of sliders.
• Create Templates: Create templates from adjustments to make them reusable with new images.
• Translatable: Translate the app through props to make it available for a wider audience.

Code Quality

Apart from the above-mentioned functionalities, the application was written with code quality in mind, meaning it’s:

• Responsive design: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops. A collapsible sidebar menu helps with keeping the main content in focus.
• Multiple framework support: The application is created in both React and Svelte, meaning you’ll get two different implementation with this product, so you can use it with different tech stacks.
• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the application, making it easy to change your color theme, font sizes, or spacing. The app also comes with multiple themes.
• Cross-browser compatible: The app was tested on major browsers (Chrome, Firefox, Edge) to ensure cross-browser compatibility.