App Overview

When you open a Lightwell project, the App Overview is what you're presented with first. The App Overview displays all of your screens in your project. 

You can organize the screens in order by dragging them around, duplicating screens, and editing the names of each screen. Clicking on a screen opens up the Editor.

The Editor

The Lightwell Editor comprises four main sections to help you create, edit, plan, and prototype your app. These four main sections are: Canvas, Tools Panel, Tools Control, and Manager Panel.


The Canvas is the main workspace in Lightwell. Here is where all of the contents of your screen will be displayed. It will be sized to one of the phone or tablet sizes. You can change the device size with the Device dropdown above the canvas. 

The lower right corner of the Canvas will tell you which device you're currently viewing your content as and how big that device is.

Tools Panel

The Tools Panel is on the left side of the Editor and is a hierarchical list of all of the layers, actions, and interactions in your screen. You can switch between the Layout Panel, Action Panel, and Prototype Panel to add and edit each respectively.

Tools Control

The Tools Control are on the right side of the Editor and consists of details and properties that you can add, remove, and modify. The Tools Control will adapt to show you the details about what you currently have selected, and hide everything else.

Manager Panel

The Manager Panel is visible at the bottom part of the Editor, below the Canvas. Depending on which Tool is selected, you will see a corresponding Manager with additional controls to create and edit layers, actions and interactions.

  • Layers will show a Sprite Manager for image sequence animations
  • Animations Manager will show a timeline for animation keyframes
  • Interactions Manager will show the logic flow for your interactions
Did this answer your question?