Skip to content


Switch branches/tags

Latest commit

* Wrap Annotation History with an interface toggle

* Show draft for disabled annotation history

* Fix history title check

* Fix displaying Draft in Annotation History

* Fix showing annotation history

* Fix typo

Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Label Studio Frontend · GitHub build npm audit

GitHub release · ☀️

WebsiteDocsTwitterJoin Slack Community

Label Studio is an open-source, configurable data annotation tool. ✌️

Frontend, as its name suggests, is the frontend library developed using 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.


npm install @heartexlabs/label-studio


With Webpack

import LabelStudio from 'label-studio';
import 'label-studio/build/static/css/main.css';


<!-- 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('label-studio', {
    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: {
      annotations: [],
      predictions: [],
      id: 1,
      data: {
        image: ""

    onLabelStudioLoad: function(LS) {
      var c = LS.annotationStore.addAnnotation({
        userGenerate: true


  1. Clone the repository

    git clone
    # or: git clone
    cd label-studio-frontend
  2. Install required dependencies

    npm install
  3. Start the development server

    npm run start
  4. Check different ways to initiate the development server config & task data in src/env/development.js, changing the data variable is a good place to start.

  5. After you make changes and ready to use it in production, you need to create a production build

    npm run build-bundle

    Now you have one .js file and one .css file in the build/static/ directory

Label Studio for Teams, Startups, and Enterprises 🏢

Label Studio for Teams is our enterprise edition (cloud & on-prem), that includes a data manager, high-quality baseline models, active learning, collaborators support, and more. Please visit the website to learn more.


Project Description
label-studio Server part, distributed as a pip package
label-studio-frontend Frontend part, written in JavaScript and React, can be embedded into your application
label-studio-converter Encode labels into the format of your favorite machine learning library
label-studio-transformers Transformers library connected and configured for use with label studio


This software is licensed under the Apache 2.0 LICENSE © Heartex. 2020