When creating a project, select HTML.

The HTML editor is very versatile and can include several types of media.

You can use the native HTML editor to customize the way your data rows render in the labeling interface. You can use this guide to understand how the HTML editor works, how to set up an HTML labeling project, and common configurations for the HTML editor.

​
Import HTML data

To learn how to prepare and format your HTML data for importing to Labelbox, see Import HTML data. You have two options for uploading to Labelbox:
  1. Store your HTML files in your cloud storage and send Labelbox a JSON file containing URL links to the HTML files (recommended)
  2. Upload the HTML files directly to Labelbox
Note: To label a webpage, you must save it as an HTML file. Direct linking to web pages via a URL is not supported.
Please take a look at the Common HTML editor configurations section below to explore ways to configure your import file to render your data in the editor.

​
Supported annotation types

Create (or reuse) an ontology for your labeling project. The table below shows the annotation types that are supported for labeling HTML data. Click through the links in the table to view the import and export formats for each classification type. Note: You can use Model-assisted labeling to import classifications as prelabels to your HTML data rows.
FeatureImport formatExport format
Radio classificationSee payloadSee payload
Checklist classificationSee payloadSee payload
Free-form text classificationSee payloadSee payload
Note: HTML files are rendered in Labelbox as an iframe with the sandbox attribute. This means that scripts, pop-ups, and third-party API calls are blocked.

​
Custom HTML editor configurations

You can leverage the HTML format to customize the way your data appears in the labeling interface. Here are some common configurations our customers set up using the HTML editor.

​
Compare and rank products

Add CSS to your HTML file to display objects side-by-side in a grid container. This is helpful for ranking or comparing multiple products in the labeling interface. To do this, ensure your CSS display property is set to grid.

A custom HTML that can pull in information to compare products