Svelte Image Editor, Powered by Pintura SDK

Pintura Image Editor by PQINA

Pintura Image Editor is pretty sick! If you need any sort of image editor in your application, use Pintura for a 10,000 hour head start.

Wes Bos Full Stack JavaScript Developer

Ready to meet all your project requirements

Everything you need in one package

Pintura for Svelte packs everything your users need to edit images. Powered by web technology it can easily be integrated in your Svelte project.

Fixed crop aspect ratio

Supports free cropping, setting a fixed aspect ratio, and showing a list of ratios to choose from. Crop aspect ratio can be dynamically updated at any time.
Extendable image support

Loads all file formats supported by the client browser: JPEG, PNG, GIF, WEBP, BMP, and SVG. Extend to load HEIC, PDF, or other formats when needed.
Supports various input methods

Is ready for all interaction methods, supports mouse wheel, keyboard, touchpad, and intuitive multi-touch interaction.
Overlay crop guides

Add any guide to the crop util to show where the user should crop. Used to illustrate bleed margins, indicate circular profile picture boundaries, or show specialised masks.
Useful helper components

Includes a Modal component, an Inline page component, and an Overlay component. Package also includes headless image manipulation for manipulating images on a server or away from the users view.
Responsive and accessible

Scales to best fit the available space. Interact with touch, mouse, and keyboard. Works great on mobile, tablet, and desktop.

Control language and icons in the user interface
Undo, redo, and reset actions
Toggle individual editor controls
Output binary image and/or editor state
Add annotations to images
Store editor state to resume editing at a later time
Rotate, z-order, flip, and duplicate shapes
Enter multiline text and align to left, center, or right
Create text boxes, text lines, and auto height text shapes
Automatically apply watermarks
Apply styles with CSS Custom Properties
Use custom fonts, set custom shape colors, and dropdown options
Set predefined shapes and control shape editing rules
Switch between bright and dark theme with two CSS Custom Properties
Control image brightness, contrast, exposure, saturation, clarity, and gamma.
Apply a dark or bright vignette
Render different frame styles around images
Set a target output image size
Manualy resizing of images
Automatically render in a modal
Render as overlay on top of an existing image
Render as inline editor right in the webpage
Load file objects, blobs, URLs, and dataURLs
Load canvas elements and image tags
Multi-touch interaction on mobile
Supports keyboard navigation
Load raster images like GIFs, PNGs, WEBPs, JPEGs and BMPs
Automatically corrects photo orientation
Copy JPEG EXIF data to output image
Transform input images to other image formats
Supports custom load logic to load HEIC or other image formats
Compress JPEG and WEBP images
Set different arrow start and end styles
Preserve transparency when editing and saving PNGs
Easily integrate with third party file upload libraries
Enable or disable aspect ratio dropdown
Customize crop aspect ratio dropdown options
Add stickers to editor with drag drop
Makes optimal use of different viewport sizes
Supports tree shaking for minimal bundle sizes
Great selection of default image filters
Tested successfully on fast and slow devices

How to add the Image Editor to your Svelte project

it only takes one npm install

Svelte Image Editor is powered by Pintura and includes everything you need in your project to edit images.

Integrate Pintura in your Svelte project using your favorite package manager.

npm install @pqina/svelte-pintura @pqina/pintura

Use this Svelte example project as a reference.

Alternatively download Pintura as a zip.

App.svelte

I spent weeks writing my own editor and it still sucked and was buggy. Was blown away at how easy it was to integrate Pintura Image Editor into our existing app! Within 2 hours I was done.

Steve Lamb CTO - Scribeware