Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Language:

Configure Text Design

VideoEditor SDK supports several configuration options for the text design tool allowing flexible adaptation to different needs and use cases. For a detailed explanation of how to configure different editor views, refer to this guide.

colors#

By default, the editor provides a variety of different colors to customize the color of the text designs. Here, we only provide a small selection of colors as might be sensible for an annotation use case.

canvasActions#

The actions users can perform in the text design tool are configured via the canvasActions property. By default, the editor has all available overlay actions for this tool enabled. For this example CanvasAction.UNDO and CanvasAction.REDO are removed.

File:
import {
  CanvasAction,
  Configuration,
  VESDK,
} from "react-native-videoeditorsdk";


export const videoTextDesignConfigurationExample = async (): Promise<void> => {
  // Add a video from the assets directory.
  const video = require("../../../../assets/vesdk/Skater.mp4");


  // Create a `Configuration` object.
  const configuration: Configuration = {
    textdesign: {
      // By default the editor provides a lot of colors.
      // For this example only a few colors are enabled.
      colors: [
        {
          name: "White",
          color: "#ffffff",
        },
        {
          name: "Black",
          color: "#000000",
        },
      ],


      // By default the editor has all available overlay actions for this tool
      // enabled. For this example `CanvasAction.UNDO` and `CanvasAction.REDO`
      // are removed.
      canvasActions: [
        CanvasAction.ADD,
        CanvasAction.BRING_TO_FRONT,
        CanvasAction.DELETE,
        CanvasAction.INVERT,
      ],
    },
  };


  try {
    // Open the video editor and handle the export as well as any occuring errors.
    const result = await VESDK.openEditor(video, configuration);


    if (result != null) {
      // The user exported a new video successfully and the newly generated video is located at `result.video`.
      console.log(result?.video);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the video.
    console.log(error);
  }
};