Core Concepts - Documentation

Everything in PaneFlow follows from one three-level structure and one rule about how it behaves across slides. Five minutes here will make the rest of the editor self-explanatory.

#The Hierarchy

A PaneFlow project is built from three levels:

Panes are your slides. Every project is a sequence of panes the viewer navigates through.
Blocks are containers placed on a pane's grid. They give your layout its structure - a hero area, a sidebar card, a footer strip.
Elements are the content inside blocks: text, images, videos, shapes, charts, custom code, 3D device mockups, groups, and background images or videos.

In the editor, the left sidebar mirrors this exactly: the pane list on top, and inside each pane a layer tree of its blocks and their elements.

#The Grid

Each pane has its own grid, 3x3 by default (configurable per pane, up to 16x16). Blocks snap to grid cells and can span any number of columns and rows - a single block can fill the whole pane. Blocks on the same pane never overlap.

The grid keeps layouts clean, but it does not constrain your content: inside a block, elements are positioned freely in pixels, and they can extend beyond the block edges.

#One Block, Many Panes

This is the idea that makes PaneFlow different, and it is worth slowing down for.

A block is not tied to a single pane. You can place the same block on several panes, at a different grid position and size on each. When the viewer navigates between those panes, PaneFlow automatically animates the block from one placement to the other - the hero image that fills slide one smoothly shrinks into a corner thumbnail on slide two. No keyframes, no timeline: you just describe where things are on each pane, and PaneFlow animates the difference.

To reuse a block on another pane, select it and press CTRLC ("Copy Block Reference"), then right-click an empty grid cell on the target pane and choose "Paste Block Reference".

Blocks that appear on only one pane instead enter and exit with a direction you pick ("Enter & Exit" in block settings): from the left, the bottom-right, a fade, and so on.

#Shared Content, Per-Pane Layout

When a block lives on several panes, what is shared and what can differ?

Shared everywhere (content): the elements themselves and their styling - text and fonts, image sources, colors, fills, borders, animation type. Change a headline's wording or color and it changes on every pane.
Per pane (layout): the block's grid placement, and each element's position (X/Y), scale, rotation, and opacity. These can be different on every pane.

The per-pane part is what drives motion. Give a text element opacity 0 on pane one and opacity 1 on pane two, and it fades in during navigation. Move it 200px and it glides. Scale it down and it shrinks. Any layout difference between two panes becomes an animated transition between them.

A few practical consequences:

Editing content once updates it everywhere - by design. If two panes need different text, use two separate elements (or two separate blocks).
Elements sized with "Relative (%)" scale automatically when their block is bigger or smaller on another pane. Elements sized with "Fixed (px)" keep their pixel size - to fit them into a smaller block, adjust their Scale on that pane (scale is per-pane, so the change animates).
Text and custom code are special: their width and height can also differ per pane. All other elements share one size everywhere and resize per pane through Scale.

#Design Pixels, Fluid Output

You design on a fixed canvas, 1920x1080 by default (configurable in Project Settings). Every position, size, and font size in the editor is in plain pixels - think Figma or Keynote.

The rendered slideshow is fully fluid: embed it in any container and everything scales proportionally, from a phone screen to a conference display. You never deal with breakpoints or responsive units - that conversion happens automatically at render and export time.

#Where Things Live in the Editor

Left sidebar: Project Settings, the pane list, and the layer tree of blocks and elements for each pane.
Canvas: your current pane. Click to select, drag to move, double-click text to edit in place.
Right sidebar: settings for whatever is selected - the project, a pane, a block, or an element. Selection drives everything: if you are looking for a control, select the thing it applies to.

#Next

The Editor - a tour of where everything lives
Transitions & Morphing - the block reuse idea, in depth
Text - the most-used element, in detail