An iOS framework for easily adding drawings and text to images.
Objective-C Ruby
Clone or download
Latest commit 2c457ec Aug 5, 2016
Failed to load latest commit information.
Docs Update README Jul 22, 2015
Example pod install Jun 8, 2016
jot Fix imports Aug 5, 2015
.gitignore Initial commit May 14, 2015
.slather.yml Update scheme name Aug 5, 2015
.travis.yml Update scheme name Aug 5, 2015
LICENSE Initial commit May 14, 2015 Update README Aug 5, 2015
jot.podspec Update pod version Aug 5, 2015

Open Source at IFTTT

jot Logo

CocoaPods Version Build Status Coverage Status

jot is an easy way to add touch-controlled drawings and text to images in your iOS app.


What's jot for?

Annotating Images

jot is the easiest way to add annotations to images with a touch interface. You can draw arrows or circle important things, as well as add resizable, rotatable text captions, and easily save the notes on top of a image using drawOnImage:.

Whiteboard or Drawing Apps

jot is perfect for quick sketches and notes in your whiteboard or drawing app. It's easy to change the drawing color or stroke width, and when you're done, you can call renderImageOnColor: to save the sketch.


jot is a great solution if you need to collect user signatures through a touch interface. Set the drawingColor to black, set the state to JotViewStateDrawing, and save the signature when the user is done by calling renderImageOnColor:.


jot is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "jot"

Example Project

To run the example project, clone the repo, and run pod install from the Example directory.


Add an instance of JotViewController as a child of your view controller. Adjust the size and layout of JotViewController's view however you'd like.

#import "ExampleViewController.h"
#import <jot/jot.h>

@interface ExampleViewController ()
@property (nonatomic, strong) JotViewController *jotViewController;

@implementation ExampleViewController

- (void)viewDidLoad
    [super viewDidLoad];
    _jotViewController = [JotViewController new];
    self.jotViewController.delegate = self;
    [self addChildViewController:self.jotViewController];
    [self.view addSubview:self.jotViewController.view];
    [self.jotViewController didMoveToParentViewController:self];
    self.jotViewController.view.frame = self.view.frame;

Switch between drawing, text manipulation, and text edit mode.

- (void)switchToDrawMode
	self.jotViewController.state = JotViewStateDrawing;

- (void)switchToTextMode
	self.jotViewController.state = JotViewStateText;

- (void)switchToTextEditMode
	self.jotViewController.state = JotViewStateEditingText;

Clear the drawing.

// Clears text and drawing
[self.jotViewController clearAll];

// Clears only text
[self.jotViewController clearText];

// Clears only drawing
[self.jotViewController clearDrawing];

Image Output

Draw on a background image.

- (UIImage *)imageWithDrawing
	UIImage *myImage = self.imageView.image;
	return [self.jotViewController drawOnImage:myImage];

Draw on a color.

- (UIImage *)imageOnColorWithDrawing
	UIColor *backgroundColor = self.view.backgroundColor;
	return [self.jotViewController renderImageOnColor:backgroundColor];

Draw on a transparent background.

- (UIImage *)imageOnColorWithDrawing
	UIColor *backgroundColor = self.view.backgroundColor;
	return [self.jotViewController renderImage];

Basic Configuration

Text Settings

Change the font.

self.jotViewController.font = [UIFont boldSystemFontOfSize:64.f];

Change the font size.

self.jotViewController.fontSize = 64.f;

Change the text color.

self.jotViewController.textColor = [UIColor redColor];

Set the initial text string.

self.jotViewController.textString = @"Hello World";

Drawing Settings

Change the drawing stroke color.

self.jotViewController.drawingColor = [UIColor magentaColor];

Change the drawing stroke width.

self.jotViewController.drawingStrokeWidth = 10.f;

Make the drawing stroke a constant width, instead of the default dynamically variable width.

self.jotViewController.drawingConstantStrokeWidth = YES;

Advanced Configuration

Text Settings

Set the text to wrap to the width of the view.

self.jotViewController.fitOriginalFontSizeToViewWidth = YES;

Set the text alignment (only applies if text is set to wrap).

self.jotViewController.textAlignment = NSTextAlignmentRight;

Set the text insets (only applies if text is set to wrap).

self.jotViewController.initialTextInsets = UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f);

Set the text editing insets.

self.jotViewController.textEditingInsets = UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f);

Set the text edit view to clip text to the text editing insets (instead of fading out with a gradient).

self.jotViewController.clipBoundsToEditingInsets = YES;



jot is available under the MIT license. See the LICENSE file for more info.

Copyright 2015 IFTTT Inc.