When initializing the Rubric Editor, there are three UI variants to choose from. The variant controls how the editing experience is presented to the user.

The differences between these variants are explained below:

1. 'Default' variant

In the default variant, the Rubric Editor renders a template selection list directly in the page, organized by rubric type (for example, essay or short response). Once the user selects a template, the editor form replaces the list, with a back button allowing them to return to template selection.

This variant is best suited for dedicated rubric authoring pages where the editor is the primary focus of the interface. It gives authors the most visual space to work with and makes template browsing a first-class part of the workflow.

To use the default variant, either omit the variant option entirely, or set it to "default":

const editor = await app.createEditor({
    variant: "default"
});

Code example: initializing the Rubric Editor with the default variant.

2. 'Modal' variant

In the modal variant, a button is rendered in the host page that opens the Rubric Editor inside a dialog overlay. The button label adapts automatically, displaying "Create rubric" when no rubric exists, or "Edit [type] rubric" when editing an existing one. Inside the modal, a dropdown allows users to switch between rubric types, and Save and Cancel buttons appear in the footer.

This variant is ideal when the Rubric Editor needs to coexist alongside other content on the page without taking up space. It keeps the host UI uncluttered and lets authors open the editor on demand. In this variant, all template groups are flattened into a single dropdown selector, simplifying rubric type selection.

To use the modal variant:

const editor = await app.createEditor({
    variant: "modal"
});

Code example: initializing the Rubric Editor with the modal variant.

3. 'Dropdown' variant

In the dropdown variant, the Rubric Editor form is rendered inline on the page, with a dropdown selector at the top of the form instead of the full template list. On initialization, it immediately loads the first available template (or the existing rubric if one has been provided), presenting the form without requiring an explicit template selection step.

This variant works well in streamlined workflows where you want the editor embedded directly in the page but do not need the full template browsing experience. It reduces the number of clicks needed to begin editing and is a good fit when the available rubric types have already been narrowed down via the rubric_templates configuration option.

To use the dropdown variant:

const editor = await app.createEditor({
    variant: "dropdown"
});

Code example: initializing the Rubric Editor with the dropdown variant.