Getting started

Welcome to the Multimodal Editor documentation—a comprehensive guide to building, customizing, and deploying feature-rich annotation interfaces within the SuperAnnotate platform.

Whether dragging and dropping predefined components, coding custom logic in Python, or orchestrating large-scale workflows, this documentation will walk you through every step. You’ll learn how to set up user interfaces that seamlessly blend text, media, and interactive elements, then extend these with dynamic behaviors, automated pipelines, and role-based permissions.

By the end, you’ll have all the tools you need to create influential annotation projects that fit even the most demanding data labeling and evaluation scenarios.

Create or Open a Project

• Create a new project in SuperAnnotate or open an existing one.
• Assign a workflow (or use the default if you don’t need custom roles or statuses).
• Navigate to the UI Builder (sometimes labeled “Annotation UI” in the interface).

This project will serve as your workspace for designing, coding, and previewing your annotation forms.

Design Your UI

Begin by arranging basic components for annotation:

• Open the UI Builder to see a drag-and-drop canvas.
• Choose from the component library (e.g., Text Input, Image, Buttons) and place them onto the canvas.
• Select each component to configure:
  • IDs: Unique identifier for code references.
  • Labels & Help Text: User-facing instructions.
  • Permissions: Control which roles can see or edit each component.
• As an optional step, export your layout as JSON to version-control or reuse later.

You now have a skeleton layout for your interface, which will appear whenever someone opens an item in this project.

Add Optional Python Code

Next, you can make your interface dynamic with inline code:

• Open the Code Editor. By default, you’ll see an __init__.py file with placeholder event handlers.
• Write or modify Python functions that respond to user actions, for example:
  Python

  def on_submit_button_click(path):
      sa.showInfo("Data submitted successfully!")

• Save and Preview to confirm the behavior. This code runs in the browser via Pyodide, so keep your logic lightweight.

Use these event handlers to show pop-up messages, toggle visibility, or call external APIs.

Publish and Test

When your layout and code look good:

• Click “Save” or “Publish” in the UI Builder and Code Editor.
• Open an item in the project to see your new interface in action.
• Interact with components (type in fields, click buttons) to ensure everything works as intended.
• Verify that your event handlers run correctly and that data is saving to the backend.

At this point, you have a fully functional multimodal form that annotators, reviewers, or admins can use.

Extend with Orchestrate (Optional)

For tasks too heavy for the browser-based Python environment:

• Set up an Orchestrate pipeline: create a Dockerized Python script, then expose it via an API endpoint.
• Call the endpoint from your Code Editor using requests or requests.asyncs.
• Automate tasks like batch data processing or advanced validations without blocking the user’s interface.

Orchestrate is perfect when you need more computing power or want to run processes automatically on status changes.