This introduction section describes the user interface and how to work with documents.


The Keyshape application’s user interface has bars and panels. The picture below shows them.

Tools has tools to draw and edit objects.

Document Tabs has a Home tab and tabs for documents that you have opened. The Home tab has shortcut links to recently opened documents and templates.

Toolbar has buttons to modify nodes and objects, and buttons for snapping and previewing.

Property Panel can be used to set properties for selected objects.

Log Panel displays errors and warnings, such as missing images and fonts. It also displays compatibility issues.

Time Controls manage the time and playback of the animation.

Timeline displays keyframes for objects.

Object Tree displays all objects as a tree structure.

Media Panel is used to manage bitmap images.

Interface Tips

  • You can change values in numeric input fields by dragging with the mouse over the up and down arrows. Holding down the shift or alt key modifies the change rate.
  • When you move the mouse cursor to be over the canvas, the canvas will automatically receive focus so that keyboard shortcuts can be used.

Creating New Documents

The easiest way to create a new document is to select a template on the Home tab. Alternatively, you can create a new document by choosing File > New.

Once you have created the document, you can adjust its dimensions, frame rate and title by selecting the document object in Object Tree.

Opening Existing Documents

The Home tab lists recently opened documents so you can easily go back to earlier works. To open other documents, choose File > Open and select a file.

You can open Keyhape or SVG documents. Note that some SVG features, such as CSS stylesheets, masks and filters, are not supported.

If the document has linked images, then you will be asked to grant permissions to access their folders.

If the document has missing images or fonts, then the log panel will display them. Select the log lines to see which objects were affected.

Saving Documents

You can save your work as a Keyshape document, which contains all objects and embedded images in one file.

By default, Keyshape documents are stored and compressed as standard zip archives. The file extension is .keyshape.

It is also possible to save uncompressed plain text Keyshape documents. Their file extension is .keyshapex. Plain text files are great for version control systems, third party tools, and manual tweaking but they are also larger. To keep their file size small, avoid embedded images and converting text to paths.

Keyshape documents are based on the standard SVG file format with few custom additions, like animations.

Managing Document Properties

You can modify the following document properties by selecting the document object in Object Tree.

  • Document Dimensions - the width and height of the document in pixels. These determine the size of the drawing area. Set them to 0 for a boundless document.
  • Opacity - the opacity of the whole document.
  • Background - the background color of the document. By default, the background color is transparent black. If you change it, remember to change the alpha value to make the color visible.
  • Fps - the frame rate is used only as a guide for animations. It is not used in the final presentation when the document is viewed in a web browser. If you export the document as an animated GIF or MPEG-4, then the document frame rate can be used as the frame rate of the exported file.
  • Title - the title of the document.
  • Browser Preview and Compatibility - the format to use when Preview in Browser is selected. Also, browser compatibility is checked against this format.

Panning and Zooming

There are several ways to pan the canvas:

  • Drag on the canvas with the Hand tool.
  • Press down the space bar to quickly access the Hand tool and drag on the canvas.
  • Use two-finger scrolling on the trackpad.
  • Use the mouse wheel to pan the document vertically. Shift-mouse wheel pans horizontally.

The canvas can be zoomed:

  • Use the Zoom tool to zoom in and out the document. Click to zoom in and Option-click to zoom out.
  • Select an area with the Zoom tool to zoom in to that area.
  • Use Option + two-finger slide to zoom in and out.
  • Use pinch gestures to zoom in and out.
  • If you have a mouse with a scroll wheel, then hold down the Option key and use the mouse wheel to zoom in and out.