Story Editor Basics

Learn how to navigate and use the Snoopr Story editor to build beautiful in-app experiences.

Overview

The Story editor is a visual canvas where you design screens by adding and arranging elements. It works like a simplified Figma - drag, drop, resize, and style without touching code.

Editor Layout

The editor has four main areas:

  • Screen List (left): Navigate between screens, reorder, add new screens
  • Canvas (center): Design your screens by placing elements
  • Element Toolbar (bottom): Quick access to add elements
  • Properties Panel (right): Configure the selected element's style and behavior

Working with Screens

Adding Screens

Click the + button in the screen list to add a new screen. Screens are numbered automatically.

Reordering Screens

Drag screens in the list to reorder. The order determines the flow users follow.

Deleting Screens

Click the red X on a screen thumbnail to delete it. You can't delete the last screen.

Working with Elements

Adding Elements

  • Click an element type in the toolbar (Text, Image, Button, etc.)
  • The element is automatically added to the canvas
  • Drag to reposition, use handles to resize

Selecting Elements

  • Click an element to select it
  • The properties panel shows options for the selected element
  • Click empty canvas space to deselect

Multi-Select

  • Hold Shift and click multiple elements to select them together
  • Drag to move them as a group

Copying & Pasting

  • Select an element and use Cmd/Ctrl + C to copy
  • Use Cmd/Ctrl + V to paste
  • Works across screens too

Canvas Background

Each screen has a background you can customize:

  • Click on empty canvas space (deselect all elements)
  • In the properties panel, find Background
  • Choose a solid color for your background

Light & Dark Mode

Snoopr supports both light and dark themes:

  • Toggle between modes using the sun/moon icon in the toolbar
  • Each mode can have different colors and images
  • Users see the appropriate version based on their device settings

Keyboard Shortcuts

  • Delete: Delete selected element
  • Cmd/Ctrl + C: Copy
  • Cmd/Ctrl + V: Paste
  • Cmd/Ctrl + Z: Undo
  • Cmd/Ctrl + Shift + Z: Redo

Tips & Best Practices

  • Design mobile-first - The canvas shows a phone frame; design for that viewport
  • Use the grid - Elements snap to help with alignment

For Developers: See the Developer Documentation for SDK integration.