Attributes

The Attributes panel is built from sections, and each shape type shows the sections that apply to it. This page describes every section once and says which shapes have it.

• With nothing selected, the same controls set the defaults the active tool will use.
• Every number field accepts a calculation instead of a number, such as 100/3. See Math expressions.

Picking attributes from another shape

Every attribute that shows the eyedropper button can be copied directly from a shape on the board instead of set by hand.

• Operation: click the eyedropper of every attribute you want, or the one on a section header to select all the attributes of that section, then click a shape on the board.
• Result: every selected attribute that the clicked shape has is copied to the selection.
• Tip: this also works while a creation tool is active, so you can pick a style before creating a shape.

Attributes of a multiple selection

With several shapes selected, the panel shows only the sections all of them share. A control shows its value when every selected shape has the same one. When they differ, a field shows ---, and the Locked Ratio, Proportional, and Pin to screen toggles show a short line under their icon. Changing a control applies the new value to every selected shape.

Selection info

Shown by every selection except cameras, which use the Camera section, and a mix of arrows and other shapes. The section is named after the selected shape type. It shows information about the whole shape, or about the selected handles while editing a shape.

All shapes

Shown by every shape.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.

Corners radius

Shown by rectangles, images, videos, tables, file cards, audio shapes, rich text, code text, web embeds, and HTML shapes.

• Corners radius: rounds the corners of the shape.

Locked Ratio

Shown by every shape except text, rich text, text on a path, code text, arrows, file cards, and audio shapes.

• Locked Ratio: keeps the proportion between width and height while resizing.

Proportional

Shown while Locked Ratio is on by shapes with something to scale along with their size: vectors with a stroke or a pattern fill, images with a stroke or a tiled fill, web embeds with a stroke, videos, and HTML shapes. A text shows it whenever it has an outline.

• Proportional: scales the stroke width, dashes, hatching, and tiles along with the shape, so a resized shape keeps its look.

Geometry shapes

Shown by geometry shapes.

• Geometry: switches between rectangle, ellipse, rhombus, and triangle.
• Sweep angle: for ellipses, how much of the full circle the arc covers, from 1 to 360 degrees, turning the shape into an arc or a sector.
• Sweep start angle: for ellipses, where the arc begins. Shown while the sweep angle is below 360.

Arrows

Arrows replace the position, size, and rotation with their own coordinates.

• For arrows that aren't circular:
  • Xs: the horizontal position of the start point.
  • Ys: the vertical position of the start point.
  • Xe: the horizontal position of the end point.
  • Ye: the vertical position of the end point.
• For circular arrows:
  • Xc: the horizontal position of the center point.
  • Yc: the vertical position of the center point.
  • R: the radius of the circle.
  • Arrow angle: how far around the circle the arrow goes.
• Opacity: the transparency of the whole arrow.

Text on a path

Shown instead of position and size.

• Anchor distance along the path: the point along the outline the text is anchored to, measured from the start of the outline.
• Anchor position as a percentage of the path length: the same place, as a share of the outline's length.
• Distance from path: how far the letters sit from the outline. 0 is the normal gap; positive values move the letters away and negative values bring them closer, onto the outline or across it.
• Opacity: the transparency of the whole text.

Frames

Shown by frames that aren't inside a group or a pinned frame.

• Pin to screen: keeps the frame in place on screen while the canvas camera moves.

Info

Shown by a single selected text, rich text, or web embed, as a list you can open at the bottom of the section.

• For text and rich text: Total characters, Word count, Read time, and Max line length (approx chars).
• For web embeds: the Type of content and its URL, with an Open link.

Filter

A filter changes how a shape is drawn without changing the shape itself, by running its image through a chain of SVG filter primitives, such as a blur or a drop shadow, applied in order. Give a shape a filter with Add filter attributes to the shape in the Actions panel. See Shape filters.

Shown by any shape once it has a filter. With several shapes selected, it shows when their chains have the same primitives in the same order.

• Add filter primitive: appends a primitive to the chain.
  • blur: softens the shape.
  • dropShadow: adds a shadow behind the shape.
  • morphology: thickens or thins the shape's edges.
  • turbulence: generates noise, for textures and distortions.
  • blend: mixes two inputs with a blend mode.
  • composite: combines two inputs by their transparency.
  • displacement: distorts one input using another as a map.
  • colorMatrix: recolors the shape through a color matrix.
  • convolveMatrix: sharpens, embosses, or blurs through a kernel.
  • componentTransfer: remaps each color channel, for contrast and levels.
  • specularLight: adds a shiny lighting highlight.
  • diffuseLight: adds soft lighting.
  • flood: fills the region with one color.
  • offset: shifts the input by a distance.
  • merge: stacks several inputs on top of each other.
  • tile: repeats the input as tiles.
  • image: brings in an external image as an input.
• Filters: the header of the chain, shown once it has a primitive.
  • Filter settings: the region the filter covers, as a percentage of the shape, and the color interpolation it uses.
  • Filter visibility: turns the whole filter on or off without removing it.
  • Remove all filter primitives: clears the chain.
• For each primitive in the chain:
  • Drag handle: moves the primitive up or down the chain.
  • Filter name: click the name to rename the primitive. Until then it shows the primitive's id.
  • Primitive settings: opens the primitive's own values, its inputs, and its Custom Region.
  • Primitive visibility: turns that primitive on or off.
  • Remove filter primitive: deletes it from the chain.

Mask

A mask hides part of a shape: one shape, the mask, decides which area of another shape, the masked shape, stays visible. The mask can use its outline or its brightness, and it can show either the area inside it or the area outside. Give a shape a mask with Add mask attributes to the shape in the Actions panel; see Masks.

Shown by masked shapes and by the shapes used as masks.

• Add mask: lets you click a shape on the board to use it as a mask for the selection.
• Remove as mask: stops the selected shape from masking others.
• Mode: which side of the mask stays visible.
  • inside: only the area covered by the mask shows.
  • outside: only the area around the mask shows.
• Mask type: how the mask shape defines its area. One button shows the current type, and its tooltip names it; click it to switch to the other. New masks start with Geometry.
  • Geometry: uses the mask shape's outline. Fast, and ignores transparency.
  • Luminance: uses the mask shape's brightness, so soft edges and transparency work. Slower. A fully white mask behaves like Geometry; greys reveal in between.
• Show or hide mask: turns all the masks of the selection on or off without removing them.
• Remove mask: removes every mask from the selection.
• Masks: the list of masks of the selection. For each mask:
  • Mask name: click the name to rename it. Masks are named Mask 0, Mask 1, and so on until you do.
  • Select mask shape: selects the mask shape on the board. Hold Shift while you click to add it to the current selection. Hovering this button highlights it.
  • Show or hide mask: turns that mask on or off.
  • Remove mask: removes that mask from the selection.

Stroke

The stroke is the line a shape is drawn with: the outline of a rectangle or an image, the line of a path or an arrow, the border of a frame or a table. These attributes apply to every line the shape draws.

Shown by vectors, arrows, images, videos, file cards, audio shapes, tables, frames, rich text, web embeds, code text, and HTML shapes. Text shapes and PDFs have no stroke.

Basic stroke

Shown by every shape with a Stroke section.

• Stroke style: the kind of line. The style decides which of the controls below appear.
  • No stroke: no line at all. Arrows don't offer it.
  • Solid stroke: a continuous line.
  • Dashed stroke: a line made of dashes.
• Stroke color: the color of the line.
• Stroke opacity: the transparency of the line alone.
• Stroke width: the thickness of the line.

Dashed strokes

Shown while the stroke style is dashed.

• Stroke gap: the space between dashes.
• Stroke dash length: the length of each dash.

Freehand strokes

Shown by vectors, arrows, tables, file cards, and audio shapes, which offer a fourth stroke style.

• Freehand stroke: a line that imitates a hand-drawn one. It adds:
  • Stroke thinning: how much the width varies along the line, from 0 to 1.

Pen pressure

Shown by freehand shapes drawn with a pressure-sensitive pen, while their stroke style is freehand.

• Use pen pressure: varies the width with the pressure recorded while drawing. A shape drawn with a pen starts with it on. Turned off, the width follows the drawing speed instead.

Stroke roughness

Shown by vectors, arrows, tables, file cards, and audio shapes while the stroke is solid or dashed.

• Stroke roughness: how far the line wanders from the exact shape, as if sketched. Two more options appear when it is greater than 0:
  • Multiple strokes: draws the line twice, as a sketch would.
  • Rough vertices: lets roughness move the corners too.

Closed stroke

Shown by paths, freehand shapes, polylines, and partial ellipses.

• Closed stroke: joins the last point of an open path back to the first.

Stroke curve smoothing

Shown by paths, freehand shapes, and polylines.

• Stroke curve smoothing: how much the shape's line is smoothed as it is drawn, whatever its stroke style.
  • The line is drawn through the shape's points. Smoothing pulls each point of the drawn line toward the one before it, by the amount you set.
  • At 0 the line goes through every point as recorded, small wobbles included.
  • Higher values remove the wobbles and give a calmer line. The trade is that sharp corners get rounded, since the line cuts across them.
  • It changes only how the line is drawn. The points of the shape stay where they are, so you can change it at any time, in either direction.

Custom offset

Shown by vertical, horizontal, diagonal, and circular arrows.

• Custom offset: gives the offset lines their own style instead of the arrow's. Offset lines are the thin lines that join the arrow to its two ends after you drag its middle.

Fill

The fill is what covers the inside of a shape: a flat color, a hand-drawn hatch pattern, a gradient, or a picture.

Shown by vectors, images, videos, documents, file cards, audio shapes, tables, frames, rich text, web embeds, HTML shapes, and code text. Arrows and text shapes have no fill.

Basic fill

Shown by every shape with a Fill section except videos, documents, web embeds, and HTML shapes. Frames, rich text, file cards, audio shapes, and tables offer only these. Code text offers only the color and the opacity: its box is always a flat color, and the color also chooses the syntax palette. EPUB documents show a color control for their pages and surround, with white pages while the color is transparent. PDFs and comic books have no Fill color control, including in mixed selections.

• Fill style: the kind of fill. The style decides which of the controls below appear.
  • No fill: the inside stays empty.
  • Solid fill: one flat color.

Fill color

Fill opacity

Hatched fills

Shown by vectors and images as three more fill styles. Fill color then colors the strokes.

• Hachure fill: parallel hand-drawn strokes.
• Zigzag fill: one continuous zigzag stroke.
• Crosshatch fill: two sets of crossing strokes.
• For these three fills:
  • Fill background color: a flat color under the strokes.
  • Fill background opacity: the transparency of that background.
  • Fill roughness: how far the strokes wander from straight lines.
  • Infill thickness: the thickness of the strokes.
  • Infill gap: the space between strokes.
  • Infill angle: the direction of the strokes.

Gradient fills

Shown by vectors and images as two more fill styles. Their stops and points show with one shape selected.

• Linear gradient fill: colors blending along a line.
• Radial gradient fill: colors blending out from a center.
• For both gradients:
  • Gradient color: the color of the selected stop.
  • Gradient opacity: the transparency of the selected stop.
  • Gradient offset: where along the gradient the selected stop sits.
  • Spread: what fills the shape beyond the gradient's ends.
    • Extend: the first and last colors continue outward.
    • Reflect: the gradient runs back and forth, mirrored each time.
    • Repeat: the gradient starts over from the first color each time.
• For linear gradient fills only:
  • X1: the horizontal position of the start point.
  • Y1: the vertical position of the start point.
  • X2: the horizontal position of the end point.
  • Y2: the vertical position of the end point.
• For radial gradient fills only:
  • Cx: the horizontal position of the circle's center.
  • Cy: the vertical position of the circle's center.
  • W: the width of the circle.
  • H: the height of the circle.
  • After you double-click the gradient handle:
    • Fx: the horizontal position of the brightest point.
    • Fy: the vertical position of the brightest point.

Image fills

Shown by vectors and images as one more fill style. On vectors it also adds the Paste from clipboard, Source file eyedropper, and Info of the Image file section.

• Image fill: a picture painted inside the shape. Its controls:
  • Replace: chooses another image file.
  • W and H: the width and height of the image, in board units. A new image fill keeps the image's proportions and covers the shape. On images, they set the size of each tile.
  • Lock image proportions: keeps the image's proportions when changing the width or height, or when resizing the shape. With it off, the image stretches with the shape.
  • Image fill rotation: the angle of the image, from -360 to 360 degrees. Vectors only.
  • Tiles: repeats the image across the shape. Without it, the image is painted once and the rest of the shape stays empty.
  • Position: drag the handle at the center of the image to move it. Vectors only.

Embedded content

Shown by shapes that host a web page. The page owns its own background, so the Fill section offers these two controls instead of a fill style.

• Scale: how big the page thinks its window is, from 0.1 to 100. At 1 the page lays itself out for the shape's own size. Lower it to fit more of the page, drawn smaller; raise it to enlarge text and controls that come out too small.
• Fill opacity: the transparency of the page.

Image file

Shown by images, inside their Fill section, since the picture is the fill.

• Replace: swaps the picture for another image file from your device. The shape keeps its width and takes the new file's proportions.
• Paste from clipboard: replaces the picture with an image copied to the clipboard.
• Eyedropper of Source file: copies the file of another shape so both share it. See Sharing a picture between shapes.
• Info, a read-only list about the file:
  • Size: the file size.
  • Image layers size: for a picture painted in the image editor, the size of its layers.
  • File type: the file format.
  • Source file: the name of the file as it was added.
  • Resolution: the size in pixels.
  • URL: for a picture imported from a web address, that address.
  • Icon, Collection, Author, and License: for an icon placed from the icon library, where it came from, with Copy attribution to copy the credit line.

Video file

Shown by videos, inside their Fill section, since the video is the fill.

• Replace: swaps the video for another video file from your device. The shape keeps its width and takes the new file's proportions.
• Eyedropper of Source file: copies the file of another video so both share it, each with its own clip. See Sharing a video between shapes.
• Fill opacity: the transparency of the video.
• Info, a read-only list about the file:
  • Size: the file size.
  • File type: the file format.
  • Source file: the name of the file as it was added.
  • Resolution: the size in pixels.
  • Duration: the length of the video.
  • Overall bitrate, Video bitrate, and Audio bitrate: how much data per second the file, its video track, and its audio track use.
  • FPS: the frames per second.
  • Audio: whether the file has an audio track.
  • Provider, Source, and Video id: for a provider video such as YouTube, where it is hosted and its address.

PDF file

The Fill section keeps the file controls, opacity, and information for documents. EPUB e-books also show Page color. PDFs and comic books keep their original page colors and a transparent surround.

• Replace document: choose a PDF, EPUB or comic book file from your device (Add document for an empty shape). The box keeps its size and reading starts at the beginning of the new file. Replacing a PDF removes its annotations.
• Fill opacity: the transparency of the document.
• Info, a read-only list about the file:
  • Size: the file size.
  • File type: the file format.
  • Source file: the name of the file as it was added.
  • Pages: the page count.
  • PDF type: whether the document is text-based, image-based, scanned, mixed, or unknown.

Text Style

The text style is the typography of a shape's text: which typeface it uses, how big it is, and how it sits inside its box.

Shown by:

• text and text on a path
• geometry shapes and arrows with a label
• frames, file cards, and audio shapes, for their name
• code text, and HTML shapes and camera lens panes for their code panel

Rich text formats its text inline instead.

Typography

Shown by every shape with a Text Style section.

Font style and family

Font variant

Font size

Letter spacing

Line height

Shown by text and code text, by vectors and arrows for their label, and by HTML shapes and camera lens panes while their code panel is open.

• Line height: the space between lines.

Horizontal alignment

Shown by text, and by vectors and arrows for their label.

• Horizontal alignment: where the lines sit across the box.
  • Align left
  • Align center
  • Align right

Vertical alignment

Shown by geometry shapes for their label.

• Vertical alignment: where the text block sits down the box.
  • Align top
  • Align middle
  • Align bottom

Flip text

Shown by text on a path only.

• Flip text: moves the text to the other side of the path.

Text Fill

The text fill is the color inside the characters. With no fill, only the outline remains, if there is one.

Shown by text, text on a path, file cards, audio shapes, and by geometry shapes and arrows with a label.

EPUB e-books use Text Fill to set the color of their characters.

• Text fill style: whether the characters are filled. The style decides which of the controls below appear.
  • No fill: the characters are hollow.
  • Solid fill: the characters are filled with one flat color.

Text fill color

Shown with solid text fill.

• Text fill color: the color of the characters.

Text fill opacity

Shown with solid text fill.

• Text fill opacity: the transparency of that color.

Text Outline

The text outline is the line drawn around each character, over or behind its fill.

Shown by text, text on a path, file cards, audio shapes, and by geometry shapes and arrows with a label.

• Text stroke style: whether the characters have an outline. The style decides which of the controls below appear.
  • No stroke: no outline.
  • Solid stroke: a continuous outline.
• For solid strokes only:
  • Text stroke color: the color of the outline.
  • Text stroke opacity: the transparency of the outline.
  • Text stroke width: the thickness of the outline.
  • Over Fill: draws the outline over the fill instead of behind it, so it covers part of each character. Texts, arrows, and geometry shapes have it, while the text has a fill.

Cover

Live content, such as a playing video, an embedded web page, or an interactive HTML shape, uses more of your device's resources than a drawing. Activation decides when the content wakes up, and the cover is the still image the shape shows while it rests.

Live content cannot be drawn by the board itself, so capturing a cover from it, or baking it into an image, works by letting the browser take a screenshot of the tab. The browser asks for that permission once per session, and the view moves to the shape for an instant so the screenshot has it as large as possible.

Shown by videos, web embeds, and HTML shapes.

• Activation: when the content runs.
  • Active: runs whenever the shape is visible.
  • Auto: runs when the device has capacity for it.
  • Manual: waits for a click on the shape, and goes back to rest when the shape leaves the visible canvas.
  • On devices with little memory, web embeds and HTML shapes wait for a click whatever their Activation. In the Player, phones and tablets always wait for a tap.
• Cover: the image shown while the content rests.
  • Capture: takes the cover from the content itself.
  • Choose image: uses an image file from your device as the cover.
  • Paste image from clipboard: uses the image in the clipboard as the cover.
  • Remove cover: clears the cover. Shown once the shape has a cover.
  • Once the shape has a cover, Capture reads Recapture and Choose image reads Replace. Capture works with one shape selected, and puts a running shape to rest.
• For provider videos only:
  • Hide player interface in captures: replays the video silently before capturing, so the player's controls and overlays fade out of the cover.

Cropping Info

Cropping shows only a window of an image or video and hides the rest, without losing it. While you crop, this section gives the window as numbers, measured over the full, uncropped media.

Shown by images and videos while cropping.

• X: the distance from the left edge of the full media to the window.
• Y: the distance from the top edge of the full media to the window.
• W: the width of the window.
• H: the height of the window.

Warping Info

Warping distorts an image or video by moving its four corners independently, so a flat picture can be laid onto a slanted surface or into a perspective. Drag a corner handle on the board to warp, and double-click a handle to reset that corner. This section gives the corners as numbers: each has a horizontal and a vertical value from 0 to 1, where 0 and 1 are the edges of the shape's box.

Shown by images and videos while cropping, together with Cropping Info.

• Top left: the horizontal and vertical position of the top left corner.
• Top right: the horizontal and vertical position of the top right corner.
• Bottom left: the horizontal and vertical position of the bottom left corner.
• Bottom right: the horizontal and vertical position of the bottom right corner.

Code

Code text shows code with syntax highlighting and editing aids for the language it holds. These attributes set the language and how the editor looks; the typography of the code comes from the Text Style section.

Shown by code text, and by HTML shapes and camera lens panes when their code panel is open.

• Language: the language used for syntax highlighting: Plain text, JavaScript, HTML, CSS, JSON, Python, or Markdown. HTML shapes always use HTML.
• Background: the background color of the source panel. Shown by HTML shapes and camera lens panes; the box of code text is colored in its Fill section.
• Line numbers: shows a number beside each line. Shown while the gutter is on.
• Line wrapping: wraps long lines instead of scrolling sideways.
• Gutter: shows the strip with line numbers, fold markers, and error markers beside the code. Hidden, the code keeps its place.
• Scale: shrinks or enlarges the whole source panel beside the shape, from 0.1 to 4. Shown for a selected HTML shape or camera lens pane.

Arrow Style

The arrow style is the shape of an arrow's ends, how it travels between them, and what its label shows.

Shown by arrows and while an arrow or measure tool is active.

• Start marker: the end drawn at the start of the arrow.
  • No start marker
  • Arrow
  • Circle
  • Triangle
  • Inverted triangle
  • Square
  • Diamond
  • Bar
• Start marker size: the size of the start marker.
• End marker: the end drawn at the tip of the arrow.
  • No end marker
  • Arrow
  • Circle
  • Triangle
  • Inverted triangle
  • Square
  • Diamond
  • Bar
• End marker size: the size of the end marker. Shown while there is an end marker.
• Marker size ratio lock: changes both marker sizes by the same amount when you change one of them.
• Arrow type: how the arrow travels between its ends.
  • free: a straight line between its two ends, which you can bend into a curve by dragging its middle.
  • vertical: a vertical arrow. Dragging its middle shifts it sideways, and thin offset lines join it to its two ends.
  • horizontal: a horizontal arrow. Dragging its middle shifts it up or down, and thin offset lines join it to its two ends.
  • diagonal: a straight arrow in the direction of its two ends. Dragging its middle shifts it sideways, and thin offset lines join it to its two ends.
  • circular: an arc. Offered once at least one selected arrow is circular.
  • elbow: a path made of horizontal and vertical segments.
  • bezier: a smooth curve.
  • custom: a path you draw point by point.
• For free, vertical, horizontal, diagonal, and circular arrows only:
  • Label source: what the label shows: custom text, the measured distance, or the measured angle.
  • Text decimals: how many decimals the measured value shows, from 0 to 5. Shown while the label shows a distance or an angle.

Secondary Stroke

Shown by vertical, horizontal, diagonal, and circular arrows when Custom offset is on. It styles the offset lines that join the arrow to its two ends.

• Secondary stroke style: the kind of line.
  • Freehand stroke
  • Solid stroke
  • Dashed stroke
• Secondary stroke color: the color of the extra lines.
• Secondary stroke opacity: their transparency.
• Secondary stroke width: their thickness.
• For solid and dashed lines only:
  • Secondary stroke roughness: how far the lines wander from the exact path. Two more options appear when it is greater than 0:
    • Multiple strokes: draws the lines twice.
    • Rough vertices: lets roughness move the corners too.
• For dashed lines only:
  • Secondary stroke gap: the space between dashes.
  • Secondary stroke dash length: the length of each dash.
• For freehand lines only:
  • Stroke thinning: how much their width varies.

Content styles

A rich text shape has its own text editor, where you write paragraphs, headings, lists, links, and code blocks. This section works in two ways. With no text selected, it sets the styles of the whole shape. With some text selected in the editor, it is called Selection styles and changes only that text.

Shown by rich text.

With no selection

The section sets the styles of the whole shape.

• Content opacity: the transparency of all the text.
• Regular Text, a group with the settings of body text:
  • Font style: the family of typefaces.
  • Font family: the typeface.
  • Font variant: the weight or slant.
  • Line height: the space between lines.
  • Font color: the color of body text.
  • Font size: the size of body text.
  • Heading 1 color: the color of level 1 headings.
  • Heading 1 font size scale: their size relative to body text.
  • Heading 2 color: the color of level 2 headings.
  • Heading 2 font size scale: their size relative to body text.
  • Heading 3 color: the color of level 3 headings.
  • Heading 3 font size scale: their size relative to body text.
  • Highlight color: the background color of highlighted text.
• Code Text, a group with the settings of code blocks:
  • Font style: the family of typefaces.
  • Font family: the typeface.
  • Font variant: the weight or slant.
  • Line height: the space between lines.
  • Font size: the size of code text.
  • Code block background color: the background behind code blocks.
  • Block language: the language of the code block the cursor is in. Shown while the cursor is in one.

With text selected

The section is called Selection styles and changes only the selected text.

• Text color: the color of the selected text.
• Highlight color: the background color behind the selected text. Shown when that text is highlighted.
• Font style: the font style of the selected text.

Controls

These controls set the player interface and the playback of the shape's video.

Shown by videos.

• Timeline: shows the video's timeline under it.
• Player: shows the playback buttons.
• Isolate clip: makes the player over the shape show only the clip between the start and end times, as if the rest of the video did not exist. Shown while Timeline is on.
• Internal Player: uses the video's own controls, the provider's or the browser's, instead of Irakasi's.
• Mini Player: shows the compact version of the playback buttons. Shown while Player is on.
• Playback buttons: the same controls the shape draws on the board.
  • Play to start: rewinds to the start of the clip.
  • Play: starts or pauses playback.
  • Play to end: jumps to the end of the clip.
  • Repeat: plays the clip again when it ends.
• Tst: the time where the clip starts.
• Ten: the time where the clip ends.
• T: the current time. When the clip does not start at zero, it splits in two:
  • Tab: the absolute time, counted from the start of the whole video.
  • Tre: the relative time, counted from the start of the clip.
• Playback rate: the speed of the video, as a multiplier.
• Volume: the volume of the video.

Table settings

A table is a grid of rows and columns shown through a scrollable window: the shape's box is the window, and the grid inside can be larger than it. These settings apply to the whole table. Selecting cells replaces the panel with the cell sections described on the Tables page.

Shown by tables when the whole table is selected.

• For empty tables only:
  • Rows: how many equal rows fill the box.
  • Columns: how many equal columns fill the box.
• Default row height: the height new rows get.
• Default column width: the width new columns get.
• Content scale: zooms rows, columns, and text inside the window together, without changing their sizes.
• Typography, a group with the default text settings of every cell. A cell can override them from its own section.
  • Table font category: the family of typefaces.
    • Sans Serif
    • Serif
    • Handwriting
    • Mono
    • Display
  • Table font family: the typeface, within the chosen category.
  • Table font variant: the weight or slant of that typeface.
  • Table line height: the space between lines.
  • Table text color: the color of body text.
  • Table font size: the size of body text.
  • Heading 1 color: the color of level 1 headings.
  • Heading 1 size: their size relative to body text.
  • Heading 2 color: the color of level 2 headings.
  • Heading 2 size: their size relative to body text.
  • Heading 3 color: the color of level 3 headings.
  • Heading 3 size: their size relative to body text.
  • Table highlight: the background color of highlighted text.

Camera

A camera shape marks a specific area of the board. You can then take images of that area, or guide the canvas camera to it.

Shown by cameras.

• Name: the camera's name, as listed in the Cameras tab of the Side panel. Each camera needs its own name, so a name that another camera already has is refused.
• Exported image width: the width, in pixels, of images and videos captured through this camera.
• Exported image height: their height, in pixels.
• Aspect ratio: the proportion of the camera. Type it as a ratio, such as 16 or 16/9, or as a decimal number. The width stays and the height follows.
• Locked Ratio: keeps that proportion while resizing. With it on, changing one exported image size changes the other too. With it off, the camera takes the new proportion.
• X: the horizontal position of the frame on the board.
• Y: the vertical position of the frame.
• W: the width of the frame.
• H: the height of the frame.
• Zoom: the export size divided by the size on the board. Raising it shrinks the camera on the board around its pivot, and the shapes parented to it scale along.
• Opacity: the transparency of the camera's outline on the board.
• Camera color: the color of that outline.

Lens

The lens is the stack of shader filters a camera applies to what it films.

Shown by cameras. Its controls are described in Cameras, and the filters in Camera filters.

HTML options

An HTML shape runs a self-contained web page, with its HTML, CSS, and JavaScript, on the board. These options control the source panel that shows and edits that code next to the shape. The code itself is edited in that panel on the board, its look is set in the Code section, and its activation in the Cover section.

Shown by HTML shapes.

• Show code: opens the source panel with the shape's HTML next to it.
• Code position: which side of the shape the source panel sits on. Shown while Show code is on.
  • Top
  • Bottom
  • Left
  • Right
• Animated HTML detected: a warning that the page keeps moving while it runs, which costs more than a still page. On a crowded board, animated pages get fewer places to run.
  • When it's checked: while the page runs, a couple of seconds after it loads and then from time to time, sooner after you click or type in it.
  • What counts as moving: a CSS animation that repeats forever, redrawing 30 or more times a second, a timer that fires more often than once a second, or a playing video or sound. Animated images, such as GIFs, don't count.
  • Remembered: the result is saved with the shape, so it applies the next time the page wakes. Code with no scripts, animations, or media is never checked and never warns.

HTML State

HTML State shows the settings an HTML shape's source code defines, such as a title, a color, or an image, as controls. Changing one updates the running page and is saved with that copy of the shape. See Configuring a shape.

Shown by a single selected HTML shape that has saved fields, named files, or accepts attached files.

• Fields: one row per saved value, in the order the shape saved them, each with the control that fits its value.
  • Text: a text field.
  • Number: a number field.
  • Toggle: an on or off switch, with the custom icon when the code declares one.
  • Color: a color picker, for text values that hold an opaque color when the field's name has the word "color" or "colour" in it, such as bgColor. Translucent colors, and colors under other names, stay as text.
  • JSON: a JSON editor, for objects and lists. A value that cannot be edited as JSON is shown disabled with an explanation.
• Files: one row per attached file, showing its reference name, a file button, the file name, and its size. The reference name is the one the code uses and cannot be changed here.
  • Replace: the file button; click it to swap the file for another one from your device. Its tooltip names the file by its reference name.
  • Paste image from clipboard: for image files, replaces the file with the image in the clipboard.
  • Remove: deletes the file.
  • Attach file: adds a new file, up to twelve in total.
• Remove and Attach file need the shape's code to accept additional files. Every attached file can always be replaced.

In the Player, and on any board you cannot edit, HTML shapes stay interactive but nothing entered in them is saved.

Document controls

In the Attributes panel, Document controls chooses how to display the pages and moves through the document. The file and its details live in the Fill section.

Shown by a single selected document.

• Single page: switching keeps the current page and your place in it.
  • Off (default): scroll through pages arranged one under another.
  • On: show one complete page, fitted and centered in the box, and use the controls to turn pages.
• First page: goes to the first page.
• Previous page: goes back one page.
• Jump to page: the number of the page in view, next to the page count; type a number to go to that page.
• Next page: goes forward one page.
• Last page: goes to the last page.

File

A file card holds any file, such as a 3D model, an archive, a document, or a picture you only want to store, and shows it as a card with an icon, its name, and its size. This section sets the card's icon and its file, and lists the file's details.

Shown by file cards.

• Icon: the picture on the card and the color of its icons.
  • Choose icon, the button with the card's current icon: picks an image from your device to show instead of the file-type icon. Once there is one it reads Replace icon.
  • Paste icon from clipboard: uses the image in the clipboard.
  • Remove custom icon: goes back to the file-type icon.
  • Icon color: the color of the file-type icon and of the Open and Download buttons. New cards start with a slate tone that suits the current theme. A custom image keeps its own colors, and an executable file keeps its caution icon and takes no custom icon.
• File: the file behind the card.
  • Replace file: swaps the file for another one from your device, of any kind. The card keeps its size, styling, and custom icon. A name you never changed follows the new file; a renamed one stays. One undo restores the previous file, on every selected card.
  • Paste image as file: uses the image in the clipboard as the file.
• Info, a read-only group about the file, shown with a single card selected:
  • Original file name: the name of the file as it was added.
  • File type: its format, such as application/pdf.
  • Size: its size.
  • Upload date: when it was added to the board.

Audio Settings

An audio shape plays an audio file from a card with a play button and the sound's waveform. This section sets the part of the file it plays, how loud it is, its color, and its file, and lists the file's details.

Shown by audio shapes.

• Clip start and Clip end: where the clip starts and ends in the file, in seconds.
• Volume: how loud the sound is, from 0 to 1.
• Icon color: the color of the waveform and the play button, beside Volume.
• File: the file behind the card.
  • Replace audio: swaps the file for another audio file and keeps the card's size and style. A name you never changed follows the new file; a renamed one stays. A clip that no longer fits the new file is shortened, with a notice.
  • Record audio: records your microphone into the card instead. See Recording.
  • Record and add: records your microphone and adds the take after the card's sound. Works with one card selected whose sound is 15 minutes or shorter.
• Info, a read-only group about the file, shown with a single card selected:
  • Original file name: the name of the file as it was added.
  • File type: its format.
  • Size: its size.
  • Duration: how long the sound is.