HTML

You can use the native HTML editor to customize the way your data rows render in the labeling interface. 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.

Create an HTML project

1. To create a new HTML project, go to Annotate and select + New project

2. From the project setup screen, select HTML as the Data type. Then, follow the prompts to finish setting up your project.

3. Add your HTML data to your project. 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 will need to save it as an HTML file. Direct linking to web pages via a URL is not supported.
      See the Common HTML editor configurations section below to explore ways to configure your import file to render your data in the editor.
4. 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.

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.

LbHtmlApi

For more customization, Labelbox offers a small LbHtmlApi library that you can add as a script tag to the head section of your HTML file.

To request access to this library, contact customer support.