• Stars
    star
    351
  • Rank 120,906 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A disappearing drawing tool for your screen.

Telestrator

Download the latest release

An on-screen drawing tool (aka a "telestrator") by @steveruizok.

This app is in active development! More soon.

Usage

When open, the app sits on top of your screen as a transparent always-on-top window. When activated, your cursor will interact with the app. When not activated, your cursor will pass through to the windows beneath it.

  • To view the app's toolbar, move your cursor into the lower left corner of your screen.
  • To activate the app, select a color or tool. You can now begin drawing.
  • To deactivate the app (and release your cursor), press Escape.

Keyboard Shortcuts

  • Command + Option + Z to activate the app.
  • Escape to deactivate the app.
  • E for ellipse tool.
  • R for rectangle tool.
  • A for arrow tool.
  • D for draw tool.
  • 1 through 6 to select colors.
  • Command + 1 through Command + 3 to select sizes.
  • Command + E to clear the screen.
  • Command + F to toggle fading.
  • Command + Z to undo.
  • Command + Shift + Z to redo.
  • Clear screen and release pointer with Command + Shift + E.

You can also activate the app at any time by pressing Command + Option + Z.

Tips and Tricks

  • Double click the drawing tool to toggle between ink-style drawing and solid drawing.

Roadmap

A loose idea of the features planned for development.

  • Alert user to deactivate shortcut on first activation.
  • In-app updates.
  • Preferences menu.
  • Customize global shortcut.
  • Customize sizes.
  • Customize colors.
  • Customize background color (e.g. chroma key).
  • Customize toolbar location (e.g. left, right, bottom, top).
  • Add as menu icon instead of dock icon.

Developing

This is an Electron app. If you're set up to do web dev then you'll be able to easily build the app from source. Clone this repo and run yarn install and yarn dev or yarn build just like you would with a regular web project.

More Repositories

1

perfect-freehand

Draw perfect pressure-sensitive freehand lines.
HTML
3,435
star
2

perfect-arrows

Draw perfect arrows between points and shapes.
TypeScript
2,515
star
3

state-designer

State management with statecharts.
HTML
619
star
4

perfect-cursors

Perfect interpolation for multiplayer cursors.
TypeScript
494
star
5

globs

A globs-based vector editor.
TypeScript
237
star
6

perfect-freehand-dart

Draw perfect freehand lines—in Flutter.
Dart
236
star
7

rko

A state manager with undo, redo and persistence.
TypeScript
211
star
8

gotcha

Turn your Framer prototype into its own live developer spec.
CoffeeScript
114
star
9

liquorstore

A reactive store.
TypeScript
107
star
10

kdtype

A typing game for kids.
TypeScript
71
star
11

trashly

A reactive store.
TypeScript
53
star
12

polyclip-js

A JavaScript implementation of the Greiner-Hormann clipping algorithm.
TypeScript
47
star
13

arrows-playground

A canvas-based arrows playground.
TypeScript
37
star
14

state-designer-ide

A design environment for State Designer.
TypeScript
34
star
15

framer-moreutils

Expand Utils with some handy helper functions.
JavaScript
31
star
16

framework

A general-purpose component kit for Framer.
JavaScript
30
star
17

fontloader

Painlessly, reliably load local and web fonts into Framer prototypes.
CoffeeScript
30
star
18

arena-2022

An isometric game.
TypeScript
25
star
19

finder-toolbar-shortcuts

Easy shortcuts for Finder's toolbar.
Rich Text Format
25
star
20

react-motion-asteroids

An astroids-like game in React using Framer Motion.
TypeScript
24
star
21

personal-blog

A personal blog.
TypeScript
24
star
22

figma-plugin-perfect-freehand

A Figma plugin for drawing perfect freehand strokes.
TypeScript
24
star
23

replisketch

A collaborative drawing app built with Replicache.
TypeScript
19
star
24

framer-tools

Do good stuff fast in Framer X from the command line.
JavaScript
18
star
25

framer-controller

Control a Framer X component through overrides.
TypeScript
18
star
26

framer-button

A customizable button class for Framer prototypes.
CoffeeScript
15
star
27

tetris-react-state-designer

A Tetris implementation using React and State Designer.
TypeScript
14
star
28

framer-sublime-text

A Framer UI / Color Scheme / Syntax for Sublime Text
14
star
29

brush-engine

A brush engine for the browser.
TypeScript
13
star
30

together

A multiplayer experience.
TypeScript
13
star
31

inventory-react-state-designer

An inventory system in React and State Designer.
TypeScript
12
star
32

framer-md

A Material Design UI kit for Framer.
JavaScript
12
star
33

short-story

Small, self-contained interactive component demos.
JavaScript
12
star
34

framer-icon

Create SVG icons using this very simple module.
CoffeeScript
10
star
35

react-turtle

Turtle Graphics for React.
JavaScript
10
star
36

olc_rust_sketches

Learning rust with the olc Pixel Game Engine.
Rust
10
star
37

gnrng

A minimal seeded random number generator.
TypeScript
10
star
38

ActionLayer

An ActionLayer extends Layer, adding properties and functions designed to simplify managing events in Framer.
CoffeeScript
9
star
39

react-decal

A miniature canvas game engine in React.
TypeScript
9
star
40

quick-docs

Docs, quick.
JavaScript
8
star
41

framer-layout

Layout with grids in Framer.
CoffeeScript
8
star
42

arena-game

A tactical combat game in React.
TypeScript
6
star
43

react-use-maho

A state management tool based on statecharts.
TypeScript
6
star
44

snowcraft

Snowcraft brood war by Steve Ruiz.
TypeScript
6
star
45

FocusComponent

Control events among a group of layers.
CoffeeScript
5
star
46

state-designer-examples

Created with CodeSandbox
TypeScript
5
star
47

flow-docs

Docs for the flow component
JavaScript
4
star
48

MonokaiFade

Example of the monokai.nl-style fade effect.
TypeScript
3
star
49

perfect-freehand-signature

A pressure-based vector signature component.
3
star
50

learn-docs

Docs for the Learn Design System
JavaScript
3
star
51

bendy-arrows-playground

Created with CodeSandbox
TypeScript
3
star
52

short-story-sjs

Beautiful component previews for design, docs and demos.
TypeScript
2
star
53

unstyled-challenge

Design the web with strict limits on style.
JavaScript
2
star
54

steveruizok.github.io

UI/UX Portfolio
CSS
2
star
55

react-iso-engine

Isometric world engine written in React.
TypeScript
2
star
56

docs-mdx-cms

JavaScript
2
star
57

nextjs-content-starter

A Next.js static site with MDX.
TypeScript
2
star
58

brushy-brushy

TypeScript
2
star
59

stencil-refuge

App running on Refuge Restrooms API, built in Stencil.
JavaScript
1
star
60

emoji-picker-site

A tiny site for emoji picking.
CSS
1
star
61

st-lookbook

Webcomponents for previewing other components.
TypeScript
1
star
62

stencil-router-redux-demo

An example stencil project with stencil-router and stencil-redux working together.
HTML
1
star
63

framer-atomic-tutorial

Designing with progressive complexity, step-by-step in Framer.
JavaScript
1
star
64

react-use-three

React Hooks for three.js
TypeScript
1
star
65

docs-sites

Collection of small docs sites.
JavaScript
1
star
66

ds-docs-starter

A starter for design system documentation.
JavaScript
1
star
67

component-preview

A micro storybook-like environment for previewing components.
TypeScript
1
star
68

exp-apollo-hooks-todo

Apollo's todo list example with Apollo hooks.
JavaScript
1
star
69

framer-loupe-data

Nice website for designing with data at Framer Loupe.
JavaScript
1
star