Skip to main content

WebPlayer as a WebComponent

Installation​

npm install @car-cutter/wc-webplayer

Usage​

  1. Import and define the custom elements:
import { defineCustomElements } from "@car-cutter/wc-webplayer";

defineCustomElements();
  1. Use the <cc-webplayer> element in your HTML.

Quick start​

/index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>🚗 Demo - Web Components 🌐</title>
  </head>
  <body>
    <script type="module">
      import {
        defineCustomElements,
        DEFAULT_EVENT_PREFIX,
        EVENT_COMPOSITION_LOADED,
      } from "@car-cutter/wc-webplayer";

      function init() {
        defineCustomElements();

        document.addEventListener(
          `${DEFAULT_EVENT_PREFIX}${EVENT_COMPOSITION_LOADED}`,
          () => console.log("Composition loaded")
        );
      }

      init();
    </script>

    <h1>WC App</h1>

    <div style="max-width: 800px; margin-inline: auto">
      <cc-webplayer
        composition-url="https://cdn.car-cutter.com/libs/web-player/v3/demos/composition.json"
        hide-categories="true"
      >
      </cc-webplayer>
    </div>
  </body>
</html>

Next steps​

For more customisation, take a look at available props in the Properties section