The editor UI doesn't show or the labels aren't working?

When using any of the bare editor factory methods we need to manually load all the editor dependencies we're going to use. This allows us to customize and streamline the editor so it doesn't load anything we don't need.

Alternatively we can use the default factories, these automatically load the complete editor codebase. Internally all these factories use the getEditorDefaults export.

The code snippet below shows the imports used by the default factories and it should help pick and choose which parts of the editor we need to build our custom editor.

To show the UI we need to at least register a single plugin with setPlugins, set the core locale property to { ...locale_en_gb }, set the imageReader, and then load an image source by setting the src property.

Please note that if the editor parent element doesn't have a height the editor won't render.

import {
    // Image editor
    appendEditor,
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    createDefaultShapePreprocessor,

    // The plugins we want to use
    plugin_crop,
    plugin_filter,
    plugin_finetune,
    plugin_annotate,
    plugin_decorate,
    plugin_sticker,
    plugin_frame,
    plugin_redact,
    plugin_resize,

    // The method used to register the plugins
    setPlugins,

    // The core ui, markup editor, and plugin locale objects
    locale_en_gb,
    markup_editor_locale_en_gb,
    plugin_crop_locale_en_gb,
    plugin_filter_locale_en_gb,
    plugin_finetune_locale_en_gb,
    plugin_frame_locale_en_gb,
    plugin_redact_locale_en_gb,
    plugin_resize_locale_en_gb,
    plugin_decorate_locale_en_gb,
    plugin_annotate_locale_en_gb,
    plugin_sticker_locale_en_gb,

    // Import the default properties
    markup_editor_defaults,
    plugin_filter_defaults,
    plugin_finetune_defaults,
    plugin_frame_defaults,
} from './pintura/module/pintura.js';

// The plugins we want to load
setPlugins(
    plugin_crop,
    plugin_filter,
    plugin_finetune,
    plugin_annotate,
    plugin_decorate,
    plugin_sticker,
    plugin_frame,
    plugin_redact,
    plugin_resize
);

appendEditor('.my-editor', {
    // The source to load
    src: 'image.jpeg',

    // This reads the src, turns it into a file, and gets metadata info
    imageReader: createDefaultImageReader(),

    // This receives the file, metadata, and imageState and generates the output image
    imageWriter: createDefaultImageWriter(),

    // This is needed on older browsers to correctly orient JPEGs
    imageOrienter: createDefaultImageOrienter(),

    // This handles complex shapes like arrows and frames, it's also possible to add custom shape preprocessors
    shapePreprocessor: createDefaultShapePreprocessor(),

    // Let's have stickers stick to the image instead of being decorative shapes
    stickerStickToImage: true,

    // Set the Markup Editor defaults
    ...markup_editor_defaults,

    // Set Finetune plugin defaults
    ...plugin_finetune_defaults,

    // Set Filter plugin defaults
    ...plugin_filter_defaults,

    // Set Frame plugin defaults
    ...plugin_frame_defaults,

    // Set editor english locale
    locale: {
        ...locale_en_gb,
        ...markup_editor_locale_en_gb,
        ...plugin_crop_locale_en_gb,
        ...plugin_filter_locale_en_gb,
        ...plugin_finetune_locale_en_gb,
        ...plugin_frame_locale_en_gb,
        ...plugin_redact_locale_en_gb,
        ...plugin_resize_locale_en_gb,
        ...plugin_decorate_locale_en_gb,
        ...plugin_annotate_locale_en_gb,
        ...plugin_sticker_locale_en_gb,
    },
});