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 the private npm package

Npm

Before installing the production version make sure to remove the existing package and clear the npm cache.

Run npm uninstall @pqina/pintura
Run npm cache clean
Add a .npmrc file with the following content.
```
@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. Or you can use npm environment variables in your .npmrc file to better secure your private token.
Run npm install @pqina/pintura

To determine if the production version is installed you can open the node_modules directory and navigate to the @pqina/pintura package. The package.json file should have its publishConfig property set to https://npm.pqina.nl.

How to prevent accidental installation of test version?

Yarn

If you're using Yarn 1.x, we recommend updating to at least v2. Alternatively please see this GitHub issue on using private npm registries with Yarn 1.x.

Before installing the production version make sure to remove the existing package and clear the Yarn cache.

Run yarn remove @pqina/pintura
Run yarn cache clean
Add a .yarnrc.yml file wit the following content.
```
npmScopes:
  pqina:
    npmRegistryServer: "https://npm.pqina.nl/"
    npmAlwaysAuth: true
    npmAuthToken: ${PQINA_NPM_TOKEN}
```
Replace ${PQINA_NPM_TOKEN} with your private pqina npm token as shown on the customer portal under your license details. Or you can use npm environment variables in your .npmrc file to better secure your private token.
Run yarn add @pqina/pintura

To determine if the production version is installed you can run yarn npm info @pqina/pintura. This command will log information about the installed package. The package should have its publishConfig property set to https://npm.pqina.nl.

How to prevent accidental installation of test version?

Pnpm

Before installing the production version make sure to remove the existing package and clear the Pnpm cache.

Run pnpm remove @pqina/pintura
Run pnpm cache delete
Run pnpm store prune
Add a .npmrc file wit the following content.
```
@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. Or you can use npm environment variables in your .npmrc file to better secure your private token.
Run pnpm add @pqina/pintura

How to prevent accidental installation of test version?

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 the private npm package

Npm

Yarn

Pnpm

Prevent accidental installation of test version

Downloadable Pintura package

Example projects and components on GitHub

JavaScript

Frameworks

Integrations

Components

Adapters