Images and drawings
Pictures from your device or the clipboard, and drawings made with a pen, shapes, text and inks, kept in the document and synced like the words around them.
An image is a block of its own, between the paragraphs. A drawing is a block too: a canvas, as wide as the text, that holds strokes, shapes, text and pictures. Both sync with the rest of the document, so everyone with it open sees the same picture.
Images
Section titled “Images”Adding an image
Section titled “Adding an image”- Paste it on the web: a screenshot or a copied picture becomes an image block after the block the caret is in. With the caret in a table cell, the image joins the cell; with the caret in a drawing, it goes into the drawing (below).
- Image in the slash menu (also found by typing
photoorpicture) opens the file picker of your browser or your phone and adds the image after the block the caret is in. In a table cell, the cell menu has Image as well (Tables).
Phones cannot paste images yet: Image is the way to add one there.
Where an image is kept
Section titled “Where an image is kept”An image of 256 KB or less is kept inside the document. It syncs with the words and shows offline.
A larger image is uploaded while you are signed in and online, and the document keeps its address: every device fetches the picture from there. When the upload cannot happen (you are offline or signed out, or it fails), the image is kept inside the document instead, where it stays. A large picture kept inside makes every copy of the document larger, so big pictures are best added while you are online. Offline and sync explains signing in and syncing.
A plain box stands in for an image until it has loaded, and stays when the picture cannot be fetched.
Moving, resizing and removing
Section titled “Moving, resizing and removing”- Move an image with its grip in the margin, like any block (Writing and formatting).
- Resize it with the round knob at its bottom-right corner, which shows when the pointer is over the image or the image is selected. Drag it to change the width, from 32 pixels up to the width of the text; the height follows.
- Remove it by clicking it and pressing
BackspaceorDelete, or with Delete block in its grip’s menu, which asks first.
Drawings
Section titled “Drawings”Making a drawing
Section titled “Making a drawing”Drawing in the slash menu (also found by typing sketch or pen) adds a drawing 240 pixels tall after the block the caret is in, with the pen already in hand. The ink is your accent colour until you pick another.
The drawing tools
Section titled “The drawing tools”While the caret is in a drawing, its tools sit above its top-right corner:
| Tool | What it does |
|---|---|
| The lock and the pen | While nothing draws, a lock: Unlock the drawing and draw picks up the pen. While the pen draws, its button is filled, and Lock the drawing puts it down. While a shape, the text tool or the eraser is in hand, Draw with the pen switches to the pen |
| Shapes | Line, Arrow, Rectangle, Ellipse, Triangle, Diamond and Star. Drag from one corner of the shape to the other |
| Text | A size of 12, 16, 24, 32, 48 or 64 px. Then press where the words go and type |
| Ink colour | Accent, Black, Grey, Red, Orange, Yellow, Green, Blue and Purple. The button shows the ink, and a new colour applies to the tool in hand |
| Download the drawing as an image | Saves the drawing as a PNG file, on the web |
| Erase: remove what is pressed | The eraser. Each press removes the topmost thing under it: a stroke, a shape, a text or a picture. Put the eraser down stops |
| Clear the drawing | Removes everything in the drawing, after asking (Clear the drawing?, then Clear). An empty drawing clears without asking, and undo brings a cleared drawing back |
Escape puts any tool down, and undo takes back strokes like any other edit.
Straight lines and even shapes
Section titled “Straight lines and even shapes”Hold Shift while you draw:
| Tool | With Shift |
|---|---|
| The pen | A straight segment from where Shift went down, snapped to horizontal, vertical or diagonal |
| Line and Arrow | Snapped to horizontal, vertical or diagonal |
| Rectangle, Ellipse, Triangle, Diamond and Star | A square box: a square, a circle, an even star |
Text on a drawing
Section titled “Text on a drawing”Pick a size from Text, press where the words go, and type: the line sits level with the point you pressed. Backspace takes back a letter. Enter places the line and starts the next one under it, and Enter on an empty line ends the typing. Escape places the words and puts the tool down, and a press anywhere else places them too. Placed text can be erased, but not edited.
Pictures in a drawing
Section titled “Pictures in a drawing”On the web, paste an image while the caret is in a drawing and it lands in the drawing’s top-left corner at its own size, with handles:
- drag the picture to move it;
- drag a corner to resize it (
Shiftkeeps its proportions); - drag the round knob above it to rotate it (
Shiftturns it in steps of 15 degrees).
Enter locks the picture in, and so does a press anywhere else; Escape locks it in and puts the tool down; Backspace or Delete removes it. When a picture that is not rotated locks in, any part of it outside the drawing is cropped away, and a picture wholly outside is removed. Once locked in, a picture stays where it is; the eraser can remove it.
A drawing’s size
Section titled “A drawing’s size”The small bar in the middle of a drawing’s bottom edge is its resize grip. Drag it to make the drawing taller or shorter, from 40 to 2,000 pixels.
On a phone
Section titled “On a phone”The pen, the shapes and the eraser work with a finger. Shift needs a hardware keyboard, and the download works on the web only for now.
Drawing together and exports
Section titled “Drawing together and exports”Several people can draw in one drawing at the same time, and every stroke is kept. An HTML export includes drawings as vector pictures; Markdown and Typst have no form for them and leave them out, and an .ent file keeps them (Import and export).