Integrate With Your Project in a Couple Minutes

Easy to use with every web-based stack

The fastest and easiest way to add image editing capabilities to your SaaS, website, or web-based app.

Install with NPM

First install the Pintura test version with NPM (or Yarn, or PNPM).

The test version is nearly identical to the full version of Pintura. It doesn't support video editing and adds a watermark on top of the image.

npm install @pqina/pintura

Then import Pintura like shown below.

import '@pqina/pintura/pintura.css';
import { openDefaultEditor } from '@pqina/pintura';

openDefaultEditor({
    src: 'image.jpeg'
});

Next steps

Add framework components Read documentation

Download zip

First download the Pintura test version below.

Download v8.78.1

Then unzip the package and import Pintura.

<link href="pintura.css" rel="stylesheet"/>

<script type="module">
import { openDefaultEditor } from 'pintura.js';

openDefaultEditor({
    src: 'image.jpeg'
});
</script>

Next steps

Open JavaScript project Other example projects Read documentation

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

Framework specific components make Pintura work everywhere

No dependencies

Easy to use components for popular JavaScript frameworks.

First install the React components.

npm install @pqina/react-pintura

Then use Pintura like any other React component.

import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

import '@pqina/pintura/pintura.css';

function App() {
    const [inlineResult, setInlineResult] = useState();

    return (
        <div style="height: 80vh">
            <PinturaEditor
                {...getEditorDefaults()}
                src="image.jpeg"
                onProcess={(res) =>
                    setInlineResult(URL.createObjectURL(res.dest))
                }
            />

            {inlineResult && <img src={inlineResult} alt="" />}
        </div>
    );
}

export default App;

Next steps

Open React project Demo on StackBlitz Read documentation

First install the Vue components.

npm install @pqina/vue-pintura

Then use Pintura like any other Vue component.

<template>
    <div style="height: 80vh">
        <PinturaEditor
            v-bind="editorProps"
            :src="image.jpeg"
            @pintura:process="handleProcess($event)"
        />
    </div>
    <p v-if="inlineResult">
        <img :src="inlineResult" alt="" />
    </p>
</template>
<script>
import { PinturaEditor } from "@pqina/vue-pintura";
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: "App",
    components: {
        PinturaEditor
    },
    methods: {
        handleProcess: function(event) {
            this.inlineResult = URL.createObjectURL(event.detail.dest);
        }
    },
    data() {
        return {
            editorProps: getEditorDefaults()
        }
    }
}
</script>

Next steps

Open Vue project Demo on StackBlitz Read documentation

First install the Angular components.

npm install @pqina/angular-pintura

Then use Pintura like any other Angular component.

<div style="height: 80vh">
    <pintura-editor [src]="src" [options]="options"></pintura-editor>
</div>

import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    constructor(private sanitizer: DomSanitizer) {}

    src: SafeUrl = 'image.jpeg';
    options: any = getEditorDefaults();
}

Next steps

Open Angular project Demo on StackBlitz Read documentation

First install the Svelte components.

npm install @pqina/svelte-pintura

Then use Pintura like any other Svelte component.

<script>
    import '@pqina/pintura/pintura.css';
    import { getEditorDefaults } from '@pqina/pintura';
    import { PinturaEditor } from '@pqina/svelte-pintura';
</script>
<div style="height:80vh">
    <PinturaEditor
        {...getEditorDefaults()}
        src="image.jpeg"
    />
</div>

Next steps

Open Svelte project Demo on StackBlitz Read documentation

First download the jQuery adapter, or install it with npm.

Download jQuery adapter

npm install @pqina/jquery-pintura

Then use Pintura like this.

<head>
    <link rel="stylesheet" href="pintura.css" />
</head>

<div class="editor" style="height: 80vh"></div>

<img class="result" src="" alt="" />

<script src="jquery.js"></script>
<script src="pintura-iife.js"></script>
<script src="useEditorWithJQuery-iife.js"></script>

<script>
useEditorWithJQuery(jQuery, pintura);

var editor = $(".editor").pinturaDefault({
    src: "image.jpeg"
});
</script>

Next steps

Open jQuery project Demo on StackBlitz Read documentation

Use the custom Alpine Pintura directive.

import {
    appendDefaultEditor,
    dispatchEditorEvents,
} from '../node_modules/@pqina/pintura/pintura.js';

document.addEventListener('alpine:init', () => {
    Alpine.directive(
        'pintura',
        (el, { expression }, { evaluateLater, effect, cleanup }) => {
            // create editor
            const editor = appendDefaultEditor(el);

            // route editor events to element
            const unsubs = dispatchEditorEvents(editor, el);

            // handle prop updates
            const getUpdatedProps = evaluateLater(expression);
            effect(() => {
                getUpdatedProps((props) => {
                    Object.assign(editor, props);
                });
            });

            // clean up editor
            cleanup(() => {
                // destroy editor instance
                editor.destroy();

                // unsub all routed events
                unsubs.forEach((unsub) => unsub());
            });
        }
    );
});

Then use Pintura like in your Alpine pages like shown below.

<div x-data="{ dest: null }">
    <div
        x-pintura="{
            src: 'my-image.jpeg'
        }"
        @pintura:process="(e) => {
            dest = URL.createObjectURL(e.detail.dest);
        }"
    />

    <img x-show="dest" :src="dest" />
</div>

Next steps

Open Alpine project Demo on StackBlitz Read documentation

Example projects to help you get started even faster

Get off to a flying start

Dozens of carefully prepared examples make it easier to see how set up Pintura with your project.

Vanilla

Javascript

A JavaScript example project showing how to set up Pintura in various ways.

Open Demo
Custom Element

An HTML example project showing how to use the Pintura Custom Element.

Open Demo
File Input

An HTML example project showing how to use the Pintura Input Element.

Open Demo

Frameworks

jQuery

An example showing how to use the Pintura jQuery adapter.

Open Demo
React

A ReactJS example project showing how to use Pintura with the Pintura React components.

Open Demo
Vue 2

A basic Vue 2 example project showing how to use Pintura with the Pintura components build for Vue.

Open Demo
Vue 3

A basic Vue 3 example project showing how to use Pintura with the Pintura components build for Vue.

Open Demo
Angular

An Angular example project showing how to use Pintura with the Pintura Angular components.

Open Demo
Svelte

A Svelte example project showing how to use Pintura with the Pintura Svelte components.

Open Demo
SvelteKit

A SvelteKit example project showing how to use Pintura with the Pintura Svelte components.

Open Demo
Alpine

An Alpine example project showing how to use Pintura with Alpine.

Open Demo
NextJS

A React project showing how to install and configure Pintura on NextJS.

Open Demo
Nuxt 2

A Vue example project showing how to install and configure Pintura on Nuxt 2.

Open Demo
Nuxt 3

A Vue example project showing how to install and configure Pintura on Nuxt 3.

Open Demo

Mobile

React Native

A React Native example project showing how to install Pintura on React Native.

Open
Cordova

A JavaScript project showing how to use Pintura with Cordova.

Open
Ionic

An Angular project showing how to install and configure Pintura with Ionic.

Open

File Managers

FilePond

A JavaScript example project showing how to integrate Pintura with FilePond.

Open Demo
Uppy

A JavaScript example project showing how to integrate Pintura with Uppy.

Open Demo
jQuery File Upload

A jQuery example project showing how to integrate Pintura with jQuery File Upload.

Open Demo
Dropzone

A JavaScript example project showing how to integrate Pintura with Dropzone.

Open Demo
React Dropzone

A React project showing how to integrate Pintura with React Dropzone.

Open Demo

Ready to purchase your license?

Purchase below. 60 day money-back guarantee, we refund you in full.

Get access

Integrate With Your Project in a Couple Minutes

Install with NPM

Download zip

Fork example project

Vanilla

Frameworks

Mobile

File Managers

Framework specific components make Pintura work everywhere

Example projects to help you get started even faster

Vanilla

Frameworks

Mobile

File Managers

Ready to purchase your license?