Get started with ot.js CDN

MIT licensed

Ot.js: Lightweight, open-source library for 2D/3D browser transformations and compositions.

Tags:
  • operational
  • transformation

Stable version

Copied!

How to start using ot.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with ot.js CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/ot.js/0.0.15/ot-min.js"></script>
</head>
<body>
  <script>
    // Define source and target text
    const source = "Hello, world!";
    const target = "Hi there!";

    // Initialize Ot.js TransformManager
    const transformManager = new OT.TransformManager();

    // Create source and target elements
    const sourceEl = document.createElement("pre");
    const targetEl = document.createElement("pre");

    sourceEl.textContent = source;
    targetEl.textContent = target;

    document.body.appendChild(sourceEl);
    document.body.appendChild(targetEl);

    // Create an empty document fragment
    const fragment = document.createDocumentFragment();

    // Perform transformation using the library
    OT.transform(source, target, {
      filter: new OT.Filter("text/plain"),
    }).then((transform) => {
      // Apply transformation to the source text
      transformManager.applyTransformation(transform, sourceEl, fragment);

      // Update the target text with the transformed result
      targetEl.textContent = transformManager.getTargetText();

      // Append the transformed text to the document
      document.body.appendChild(fragment);
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions