Editor API

iOS and macOS

Requires: iOS 18, macOS 15, Xcode with Swift 6.3.

1 Install

dependencies: [
    .package(url: "<package URL from your early-access email>", from: "0.1.0"),
],
targets: [
    .target(name: "App", dependencies: [
        .product(name: "PandaTextView", package: "PandaTextView"),
    ]),
]

2 Create the view

The view for UIKit and AppKit, as a Swift package.

import PandaTextView

let fonts = try PandaTextFontCollection(fontFamilies: [
    [.bundledTTF("NotoSans-Regular"), .bundledTTF("NotoSans-Bold")],
])
let textView = PandaTextView(frame: .zero, fontCollection: fonts, pixelSize: 17)
textView.string = "Hello PandaText"

Android

Requires: Android 8 (API 26) or later; arm64-v8a and x86_64.

1 Install

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url = uri("<repository URL from your early-access email>") }
    }
}

dependencies {
    implementation("dev.pandatext:PandaTextView:0.1.0")
}

2 Create the view

The view for Android, in Kotlin.

val font = Font(fontBytes)
val family = FontFamily(listOf(font))
val collection = FontCollection(listOf(family))

val textView = PandaTextView(context)
textView.fontCollection = collection
textView.text = "Hello PandaText"

Web

Requires: Chrome, Edge, Safari and Firefox. A bundler or any server that serves files over HTTP.

1 Install

npm install @pandatext/core @pandatext/textview

// vite.config.ts
export default defineConfig({
  optimizeDeps: { exclude: ["@pandatext/core", "@pandatext/textview"] },
});

2 Create the view

The view for any page in Chrome, Safari and Firefox. It fills its container, so give #editor a height. It paints no background: set one in CSS on the container if you need it.

import { createPandaText } from "@pandatext/core";
import { PandaTextView } from "@pandatext/textview";
import "@pandatext/textview/PandaTextView.css";

const textEngine = await createPandaText();
const font = textEngine.createFontFromBytes(fontBytes);
const fontCollection = textEngine.createCollectionFromFonts([font]);

const textView = new PandaTextView({ textEngine, fontCollection, text: "Hello PandaText" });
textView.mount(document.querySelector("#editor"));

React

Requires: The web requirements above. The React example uses React 19.

1 Install

npm install @pandatext/core @pandatext/textview

2 Create the view

The web view inside a React component. No wrapper package needed.

import { useEffect, useRef } from "react";
import { createPandaText } from "@pandatext/core";
import { PandaTextView } from "@pandatext/textview";
import "@pandatext/textview/PandaTextView.css";

export function Editor({ fontBytes }: { fontBytes: Uint8Array }) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    let view: PandaTextView | undefined;
    let unmounted = false;
    createPandaText().then((textEngine) => {
      if (unmounted || !ref.current) return;
      const fontCollection = textEngine.createCollectionFromFonts([textEngine.createFontFromBytes(fontBytes)]);
      view = new PandaTextView({ textEngine, fontCollection, text: "Hello PandaText" });
      view.mount(ref.current);
    });
    return () => {
      unmounted = true;
      const fontCollection = view?.fontCollection;
      view?.destroy();
      fontCollection?.destroy();
    };
  }, [fontBytes]);
  return <div ref={ref} style={{ height: 400 }} />;
}

Requires: tldraw 5.

1 Install

npm install @pandatext/tldraw @pandatext/textview @pandatext/core tldraw

2 Create the view

A PandaText text shape for a tldraw 5 canvas.

import { Tldraw } from "tldraw";
import { PandaTextShapeUtil, loadPandaText } from "@pandatext/tldraw";
import "@pandatext/tldraw/PandaTextShape.css";

await loadPandaText();

<Tldraw
  shapeUtils={[PandaTextShapeUtil]}
  onMount={(editor) =>
    editor.createShape({ type: "panda-text", x: 100, y: 100, props: { text: "Hello PandaText" } })
  }
/>

Electron

Requires: Electron, and the web requirements above.

1 Install

npm install @pandatext/core @pandatext/textview

const allowed = new Set(["clipboard-read", "clipboard-sanitized-write"]);
session.defaultSession.setPermissionRequestHandler((_contents, permission, callback) =>
  callback(allowed.has(permission)),
);
session.defaultSession.setPermissionCheckHandler((_contents, permission) => allowed.has(permission));

2 Create the view

In the renderer, create the view as on the web. Edit menu items call the view.

import { createPandaText } from "@pandatext/core";
import { PandaTextView } from "@pandatext/textview";
import "@pandatext/textview/PandaTextView.css";

const textEngine = await createPandaText();
const font = textEngine.createFontFromBytes(fontBytes);
const fontCollection = textEngine.createCollectionFromFonts([font]);

const textView = new PandaTextView({ textEngine, fontCollection, text: "Hello PandaText" });
textView.mount(document.querySelector("#editor"));

// Edit menu items (Undo, Redo, Select All) go through the view:
textView.performEditAction("undo");

Flutter

Requires: Flutter 3.41 or later (Dart 3.10); macOS 15, iOS 18, Android 8, Linux and the web.

1 Install

dependencies:
  pandatext:
    git:
      url: <repository URL from your early-access email>

flutter:
  assets:
    - fonts/NotoSans-Regular.ttf
    - fonts/NotoSans-Bold.ttf

2 Create the view

The same editor as a Flutter widget.

import 'package:pandatext/pandatext.dart';

final fonts = PandaTextFontCollection([
  PandaTextFontFamily([PandaTextFont.fromBytes(regularBytes), PandaTextFont.fromBytes(boldBytes)]),
]);

PandaTextView(fonts: fonts, text: 'Hello PandaText', fontSize: 16)

React Native

Requires: React Native 0.82 or later (the New Architecture), iOS 18, Android API 26.

1 Install

npm install @pandatext/react-native
cd ios && pod install

2 Create the view

One component over the native iOS and Android views.

import { PandaTextView } from "@pandatext/react-native";

<PandaTextView
  style={{ flex: 1 }}
  fonts={[["NotoSans-Regular"]]}
  text="Hello PandaText"
/>

Expo

Requires: An Expo development build (not Expo Go).

1 Install

npx expo install @pandatext/react-native expo-font

{
  "expo": {
    "plugins": [
      "@pandatext/react-native",
      ["expo-font", { "fonts": ["./fonts/NotoSans-Regular.ttf", "./fonts/NotoSans-Bold.ttf"] }]
    ]
  }
}

2 Create the view

The same React Native component, in your Expo app.

import { PandaTextView } from "@pandatext/react-native";

<PandaTextView
  style={{ flex: 1 }}
  fonts={[["NotoSans-Regular", "NotoSans-Bold"]]}
  text="Hello PandaText"
/>