Custom editor overview
You can create a custom editor to suit the needs of your labeling tasks. Explore some of our open-source custom editors here.
A Minimal Example
<script src="https://api.labelbox.com/static/labeling-api.js"></script>
<div id="form"></div>
<script>
function label(label){
Labelbox.setLabelForAsset(label).then(() => {
Labelbox.fetchNextAssetToLabel();
});
}
Labelbox.currentAsset().subscribe((asset) => {
if (asset){
drawItem(asset.data);
}
})
function drawItem(dataToLabel){
const labelForm = `
<img src="${dataToLabel}" style="width: 300px;"></img>
<div style="display: flex;">
<button onclick="label('bad')">Bad Quality</button>
<button onclick="label('good')">Good Quality</button>
</div>
`;
document.querySelector('#form').innerHTML = labelForm;
}
</script>
Labelbox Pluggable Interface Architecture
Labelbox allows the use of custom label editors. Custom label editors minimally define a labeling ontology and can be configured to look and feel like a labeling interface. A minimal custom editor imports labeling-api.js
and uses the fetch
and submit
functions to integrate with Labelbox. While Labelbox makes it simple to do basic labeling of images and text, there are a variety of other data types such as point clouds, maps, videos or medical DICOM imagery that require bespoke labeling interfaces. With this in mind, Labelbox is designed to facilitate the creation, installation, and maintenance of custom labeling frontends.

Using labeling-api.js
To develop a Labelbox frontend, import labeling-api.js
and use the 2 APIs described below to fetch
the next data and then submit
the label against the data. Note that multiple data can be loaded in a single fetch
if a row in the CSV file contains an array of data pointers.
Attach the Labelbox Client Side API
<script src="https://api.labelbox.com/static/labeling-api.js"></script>
Get a row to label
Labelbox.fetchNextAssetToLabel().then((dataToLabel) => {
// ... Put all your drawing logic into Labelbox.currentAsset() as seen in the examples.
// this function will emit a new asset to that stream
});
Save the label for a row
Labelbox.setLabelForAsset(label); // labels the asset currently on the screen
Hello World Example
Try it in your browser (The project must be setup first)
Full Example
<script src="https://api.labelbox.com/static/labeling-api.js"></script>
<div id="form"></div>
<script>
function label(label){
Labelbox.setLabelForAsset(label).then(() => {
Labelbox.fetchNextAssetToLabel();
});
}
Labelbox.currentAsset().subscribe((asset) => {
if (asset){
drawItem(asset.data);
}
})
function drawItem(dataToLabel){
const labelForm = `
<img src="${dataToLabel}" style="width: 300px;"></img>
<div style="display: flex;">
<button onclick="label('bad')">Bad Quality</button>
<button onclick="label('good')">Good Quality</button>
</div>
`;
document.querySelector('#form').innerHTML = labelForm;
}
</script>
Full API Reference
Reference Interfaces
Image classification interface source code

Text classification interface source code

Local Development of custom editors
Custom editors are developed locally. Once the custom editor is ready to use, you can install it in Labelbox by pointing to a hosted version of the editor.
Run localhost server
- Start the localhost server in a directory containing your custom editor frontend files. For example, run the server inside
custom-interfaces/hello-world
to run the hello world custom editor locally.python -m SimpleHTTPServer
- Open your browser and navigate to the
localhost
endpoint provided by the server. - Customize the labeling frontend by making changes to
index.html
. - Restart the server and refresh the browser to see the updates.

Installing a custom labeling frontend in labelbox.com
When you are ready to use your custom editor on Labelbox, upload your index.html
file to a cloud service that exposes a URL for Labelbox to fetch the file. If you don’t have a hosting service on-hand, you can quickly get setup with Now from Zeit.
Quick start: custom editor hosting with Now
- Create an account at Zeit, download and install Now here: https://zeit.co/download
- With Now installed, navigate to the directory with your custom editor (where your
index.html
is located) and launch Now in your terminal by typingnow
. The Now service will provide a link to your hosted labeling interface file. - Within the Labeling Interface menu of the Settings tab of your Labelbox project, choose Custom and paste the link in the URL to labeling frontend field as shown in the video below.
