JavaScript Image Editor with Pintura example project

Demo

Installation

NodeJS

If it's not already installed we need to install Node.js

Then we install the project dependencies by running npm install in a terminal window. This will install @pqina/pintura and a local node server.

Run npm start to start a local test server at http://localhost:8080

Manually

1. Download the Pintura package.
2. We only need the pintura.css stylesheet and the pintura.js JavaScript file.
3. Update the url after the import statement so it points to the downloaded JavaScript file.
4. Update the stylesheet tag so it links to the downloaded Pintura stylesheet file.

Questions

Feel free to reach out using the contact form on the Pintura product page.

Other example projects

JavaScript:

• JavaScript
• PinturaInput
• CustomElement

Frameworks:

• jQuery
• Alpine
• Angular
• Vue 2
• Vue 3
• Nuxt 2
• Nuxt 3
• Svelte
• SvelteKit
• React
• React TypeScript
• NextJS
• React Native
• React Native TypeScript
• Cordova
• Capacitor
• Ionic 6

File upload libraries:

• FilePond
• jQuery File Upload
• React Dropzone
• Dropzone
• Uppy

License

This projects uses a test version of Pintura. This version of Pintura will show a watermark in the editor and on generated images.

Purchase a license at https://pqina.nl/pintura to use Pintura in production.