Frontend library

Frontend, as its name suggests, is the frontend library based on React and mobx-state-tree, distributed as an NPM package. You can include it in your applications and provide data annotation support to your users. It can be granularly customized and extended.

Its repository is located at


npm install label-studio


<!-- Theme included stylesheets -->
<link href="" rel="stylesheet">

<!-- Main Label Studio library -->
<script src=""></script>


Instantiate a new Label Studio object with a selector for the div that should become the editor.

<!-- Include Label Studio stylesheet -->
<link href="" rel="stylesheet">

<!-- Create the Label Studio container -->
<div id="label-studio"></div>

<!-- Include the Label Studio library -->
<script src=""></script>

<!-- Initialize Label Studio -->
  var labelStudio = new LabelStudio('editor', {
    config: `
        <Image name="img" value="$image"></Image>
        <RectangleLabels name="tag" toName="img">
          <Label value="Hello"></Label>
          <Label value="World"></Label>  

    interfaces: [

    user: {
      pk: 1,
      firstName: "James",
      lastName: "Dean"

    task: {
      completions: [],
      predictions: [],
      id: 1,
      data: {
        image: ""
    onLabelStudioLoad: function(LS) {
      var c = LS.completionStore.addCompletion({
        userGenerate: true

You can use Playground to test out different types of config.

To see all the available options for the initialization of LabelStudio, please check the Reference.