Our A-Frame library allows you to use Zappar's best-in-class AR technology with content built using the aforementioned 3D rendering platform.


You can use this library by downloading a standalone zip containing the necessary files, by linking to our CDN, or by installing from NPM for use in a webpack project.

You can find the respective download links and installation instructions here.

Standalone Download

Once downloaded, unzip into your web project and reference from your HTML like this:

<script src="zappar-aframe.js"></script>


You can reference the zappar.js library from your HTML like this:

<script src="https://libs.zappar.com/zappar-aframe/*/zappar-aframe.js"></script>

* Version number can be found on the Downloads and SDKs page.

NPM Webpack Module

Run the following NPM command inside your project directory:

npm install --save @zappar/zappar-aframe

Then import the library into your JavaScript or TypeScript files:

import * as ZapparAFrame from "@zappar/zappar-aframe";

The final step is to add this necessary entry to your webpack rules:

module.exports = {
  module: {
    rules: [
        test: /zcv\.wasm$/,
        type: "javascript/auto",
        loader: "file-loader"


You can integrate the Zappar library with an existing A-Frame scene. A typical project may look like this. The remainder of this document goes into more detail about each of the component elements of this example.

              <a-asset-item id="target-file" src="myTarget.zpt"/>

          <a-entity camera zappar-camera></a-entity>

          <a-entity zappar-image="#target-file">
              <!-- YOUR 3D CONTENT GOES HERE -->

You may also be interested in:

zapcode branded_zapcode i