Getting started

Overview

SSHOW is a browser-based editor for designing scenes and bringing them to life with motion. This guide walks you through every part of the canvas.

Whether you're building a presentation, a short animated story, or an interactive showcase, SSHOW gives you precise design tools, a transition engine that animates between scenes automatically, and a timeline for keyframing motion inside one — in your browser, or in the desktop Studio app.

Create in six steps

The shortest path from a blank canvas to a finished piece.

  1. 1

    Add a scene

    Every project is a sequence of scenes. Set the canvas size once and it applies to all of them.

  2. 2

    Draw your objects

    Use the toolbar to add shapes, text, images, and media to the canvas.

  3. 3

    Style them

    Apply fills, strokes, and effects from the inspector to give each object its look.

  4. 4

    Add motion

    Duplicate a scene, move things around, and SSHOW animates the difference as a transition — or switch to Animation mode and keyframe the movement inside a single scene.

  5. 5

    Save your work

    Click Save in the top bar to store your project. There's no autosave, and SSHOW warns you before you leave with unsaved changes.

  6. 6

    Share or export

    Publish a play link or export to video, PDF, image, and more.

The editor at a glance

Six regions make up the editor. You'll spend most of your time moving between them.

The SSHOW editor with six numbered callouts: 1 the toolbar on top, 2 the canvas in the centre, 3 the Scenes panel and 4 the Objects panel on the left, 5 the inspector on the right, and 6 the Design / Animation switcher in the header.
The editor's six surfaces, numbered to match the list below.
1Toolbar (top)
Every creation tool — select, shapes, text, image, media. Covered in Tools & shortcuts.
2Canvas (center)
Your live workspace. Pan with the Move tool, zoom with the controls at the bottom-right.
3Scenes (left)
The ordered list of scenes. Add, duplicate, reorder, and search them here.
4Objects (lower-left)
The layer list for the active scene. Select, rename, reorder, lock, and hide objects.
5Inspector (right)
Properties for the current selection — size, transform, fills, strokes, effects, and motion.
6Design / Animation (top-left)
The mode switcher. Design is normal editing; Animation turns the Objects panel into a timeline so edits are recorded as keyframes — see the Animation guide.

Note A menu button at the top-left of the toolbar opens the project menu — Save a Copy, Import, Export, and SSHOW (about and settings). That's where the Import and Export panels mentioned throughout these guides are launched.

The right rail

The buttons in the top-right corner open the project-level panels — and the last one plays your project.

Seven icons in the top-right rail: a motion curve, a tag, a notes book, a sparkle, a light bulb, a magnifier, and a play triangle.
Left to right: Motion, Variables, Notes, AI, Plugins, Search, and Play.
Motion
Opens the Motion panel to shape a scene's transition — see the Motion guide.
Variables
Opens the Variables panel to define reusable values — see the Variables guide.
Notes
Opens project and per-scene notes — see Tools & Shortcuts.
AI
Opens the AI Assistant to create or edit by describing what you want — see the AI guide.
Plugins
Opens the Plugins panel to run an installed plugin, or import a .sshowplugin file — see the Plugins guide.
Search
Opens search and replace across the whole project — text, layer names, scene names, and notes.
Play
Enters Play mode to present the project full-screen — see Present & share.

Explore the guide

Design fundamentals Scenes, objects, and the styling system that gives everything its look — fills, strokes, and effects. Tools & shortcuts The toolbar holds every creation tool. Most have a single-key shortcut so you can switch without leaving the canvas. Variables Reusable values you define once and reference anywhere in text with double-brace tokens. Import Bring an existing PowerPoint deck, PDF, SVG, or Lottie animation into SSHOW as a fully editable project — every page becomes a scene you can keep designing. Transitions Motion in SSHOW is built on transitions: animate between two scenes and the engine figures out the in-between for you. Animation Every scene has its own clock. Switch to Animation mode and keyframe any property — position, colour, text, even path shape — then play it back exactly as it will present. Presenting Play your scenes full-screen with transitions — the way your audience sees them. Export & share Take your project out of SSHOW as a document, an image, a video, or the native editable file. Interaction Triggers and actions that make your scenes respond to clicks, hovers, and more. In active development. AI Assistant An AI assistant that builds and edits scenes from a prompt, and generates images on the canvas. Available now, in beta. Editor plugins Plugins add panels to the editor. Import a .sshowplugin file to install one, then click it in the list to run it. Figma plugin Move designs between Figma and SSHOW — export selected frames to an editable .sshow file, or drop a .sshow back onto the Figma canvas. Plugin API The full surface a plugin talks to the editor through. Every call is asynchronous, and the document only changes through actions. MCP server Let an AI assistant work inside the project you have open — reading scenes, editing objects, and checking its work by sight, all over the Model Context Protocol.