Package contents

Public test packages

The following packages are available on npm for testing purposes.

@pqina/pintura
@pqina/react-pintura
@pqina/vue-pintura
@pqina/svelte-pintura
@pqina/angular-pintura
@pqina/filepond-plugin-image-editor

You can install the @pqina/pintura package like shown below.

npm install @pqina/pintura

The test version @pqina/pintura will render a watermark on top of the editor and generated images. It is available for testing purposes only.

The private and downloadable package will not overlay a watermark.

Private npm packages

The PQINA private npm hosts the following packages.

@pqina/pintura
@pqina/pintura-video

Example projects are available on GitHub

Locale files are available in the package, but can also be imported from @pqina/pintura/locale/<locale_code>

Installing private npm packages

Create a new file in your project root folder and name it .npmrc

Copy the contents below to the file

@pqina:registry=https://npm.pqina.nl/
//npm.pqina.nl/:_authToken=$PQINA_NPM_TOKEN

Replace $PQINA_NPM_TOKEN with your private pqina npm token as shown on the customer portal under your license details.

Pqina scoped packages are now automatically installed from the PQINA repository.

Sometimes the package manager will stick to the test version, in that situation you can try the following before re-installing:

Run npm uninstall @pqina/pintura.
Remove the node_modules folder and package_lock.json file.
Reinstall @pqina/pintura

Prevent accidental installation of test version

To prevent installation of the test version we can use the @pqina/package-has-origin npm package.

By running the check in a prebuild script we can make sure that the production build always uses the production version of Pintura.

If it finds the package wasn't installed from npm.pqina.nl it will throw an error and the build will not run.

// package.json
{
    "scripts": {
        "prebuild": "npx @pqina/package-has-origin @pqina/pintura npm.pqina.nl",
        "build": "echo \"Running build\" && exit 1"
    }
}

Downloadable Pintura package

The downloadable product package contains the following folders and files.

The package folder contains the Pintura JavaScript Module, IIFE, and UMD builds as well as the stylesheet and the TypeScript declaration file.

The package folder also contains the locale folder that has all exposes all the different language packs. Note that if your locale isn't available in the default pack you can duplicate and edit the files to support different locales.

README.md
CHANGELOG.md
package
- pintura.css
- pintura.module.css
- pintura.js
- pintura.d.ts
- pintura-iife.js
- pintura-umd.js
- locale
  - en_GB
  - de_DE
  - es_ES
  - fr_FR
  - pt_PT
  - hi_IN
  - ko_KR
  - it_IT
  - nb_NO
  - nl_NL
  - sv_SE
  - ja_JP
  - zh_CN
  - ru_RU

Search

Package contents

Public test packages

Private npm packages

Installing private npm packages

Prevent accidental installation of test version

Downloadable Pintura package

Example projects and components on GitHub

JavaScript

Frameworks

Integrations

Components

Adapters