Data Science

Machine learning & data science for beginners and experts alike.

What’s the most exciting thing you’ve heard today? Well take that excitement, multiply it by 3, then you’ll be properly prepared to react to this news: mini-tate is now an open sourced project!




You may be thinking “mini-tate? I don’t even know what that is, but it definitely isn’t as exciting as the free donut I got in the break room this morning.” Well… actually you have a point there, donuts are awesome and that should continue to be the highlight of your day. Regardless of whether or not you received free food today, let me tell you a bit more about mini-tate (and open source annotation tools in general) so you’ll see why it’s just as exciting as a glazed chocolate donut.




What is mini-tate?


mini-tate is an open source library for annotating images - that is, drawing boundary boxes over parts of an image and labeling and/or commenting on them. This is a useful exercise in many situations: labeling parts of images for training certain machine learning models (think object detection, facial recognition, etc.), leaving detailed comments on parts of an image you are reviewing such as your company’s new logo, or creating a template for the layout of a document you are creating in a batch process.




Built in and for React (a frontend JavaScript library), mini-tate is easy to install and integrate into your app. Simply install our npm package and add in an <ImageAnnotater /> component to your code to get started. Worried about adding a ton of dependencies to your project? Well we don’t call it “mini”-tate for nothing - this library is indeed quite mini! With only 5 dependencies, mini-tate won't weigh you down.


mini-tate at Alteryx


We didn’t set out to create an image annotation tool originally, instead we were looking for ways to enhance the Image Template tool in Alteryx’s Intelligence Suite (btw - if you haven’t yet used AIS you are missing out and should check out our free trial!) A main feature of the Image Template tool is its ability to let you markup sections of a document so that tools like Image to Text can extract text out of that document in a formatted manner. Since annotation creation is a huge part of the tool, we quickly felt inspired to create our own image annotation library that integrates easily into our established codebase and has the Alteryx design we know and love. We put our heads down and got to work building this tool internally. When it was done, we realized that other projects (internal and external) may want to use it too. It was a pretty easy decision from there to open source mini-tate! You’ll see the library featured in the Image Template tool starting in our 22.3 release.




Getting Started


Ready to use mini-tate? Follow these basic steps to get started:


  1. If you haven’t already, initialize a React project. I recommend following the React docs by using create-react-app.
  2. Install mini-tate into your project: npm i @Alteryx/mini-tate
  3. Import mini-tate into your main file. Add this line to the top of your app.tsx or equivalent: import ImageAnnotater from '@ayx/mini-tate
  4. Replacing the text with your own image link, you can initialize mini-tate:
function App() {
  return (

ReactDOM.render(<App />, document.getElementById('app'));
  1. Start your app: npm start
  2. Annotate away!

If you want to dig into the customizations (e.g. adjust the color of the annotations or register callback functions), check out the docs on our Github page.


Final Thoughts


The world of open source code is vast and beautiful, and we are honored to contribute to it. If you have any ideas, code suggestions, or bugs for mini-tate please feel free to use Github's issues and pull request features to let us know! Or if you want to make it your own, feel free to fork the project and run with it. We can’t wait to see what you do with mini-tate!