Navigating the Project Editor

Whether you're building a touchscreen exhibit for a natural history museum, a self-guided tour for an art gallery, or an interactive kiosk for a visitor center, everything starts here: the Zibit project editor. Before you dive into designing moments and wiring up flows, it helps to know where things live. This tutorial walks you through the key areas of the editor interface so you can move around with confidence from day one.

Getting to the My Projects Dashboard

The My Projects dashboard is your home base in Zibit. From here, you can see every project you have access to — whether it's an interactive museum exhibit, a digital signage loop, or an educational kiosk experience.

When you're ready to dive in, click "Create new project" to start something fresh, or open an existing project by clicking its name. You can also manage collaborators or access project settings using the action controls next to each project card.

The My Projects dashboard showing a list of existing projects including 'My First Project', 'Editor Tour Demo', and 'Moments Demo', with a 'Create new project' button in the top area. — The My Projects dashboard — your starting point for all Zibit projects.

Exploring the Moments Graph

This is the Moments view — the visual heart of your project. Each card on the canvas represents a moment (a screen your audience will see), and the lines connecting them are flows that define how visitors move from one moment to the next.

For example, a museum kiosk might have a Welcome moment that flows into an Explore the Exhibit moment when a visitor taps a button. You can scroll and drag around the canvas to get a feel for the structure. Nothing here is permanent — you can add, rearrange, or delete moments at any time.

The Zibit Moments graph canvas showing two moment cards labeled Welcome and Explore the Exhibit, connected by a flow line, with an Add new moment button in the toolbar — The Moments graph shows your project's screens and how visitors navigate between them.

Getting to Know the Project Sidebar

You're now inside your project. On the left, you'll see the project sidebar — your home base for everything in this project. It gives you quick access to Moments, Collections, Files, Styles, Deployments, and Settings.

Right now you're looking at the Moments view, which shows the flow between screens in your experience. You can see two moments already listed — "Welcome" and "Explore the Exhibit" — connected by a flow. Don't worry if yours looks different; you can add, remove, and rearrange moments at any time.

The Zibit project editor showing a sidebar with navigation links and a Moments view displaying two connected moments labeled Welcome and Explore the Exhibit — The project sidebar and Moments view for the Editor Tour Demo project

Exploring Your Moments and Views

This is the Moments & views panel — your project's central map. Each moment appears as its own section, with its views listed underneath. Right now you can see two moments: Welcome and Explore the Exhibit. Think of moments as the individual screens a visitor moves through, and views as the tailored layouts for each display those screens appear on.

From here you can add new moments using Add new moment, or attach additional views to an existing moment with Add new view. Don't worry about getting everything perfect now — you can reorder, rename, and restructure your moments at any time.

The Moments and views panel in list mode, showing two moments — Welcome and Explore the Exhibit — each with their associated views listed below them, alongside buttons to add new moments and views. — List mode shows each moment and its views stacked vertically for easy scanning.

Exploring Your Project in Graph Mode

This is the Moments view — your bird's-eye view of the entire project. Each card represents a moment (a screen your visitors will see), and the arrows between them show the flows, or navigation paths, connecting them. For example, a museum kiosk might flow from a "Welcome" moment to an "Explore the Exhibit" moment when a visitor taps a button.

Use the zoom controls to get a closer look at individual moments, or pan around the canvas to see the full picture. The minimap in the bottom-right corner keeps you oriented as your project grows. Don't worry — you can rearrange moments on this canvas at any time without affecting how your experience works.

Graph mode showing two moments — Welcome and Explore the Exhibit — connected by a directional arrow, with a minimap in the bottom-right corner and zoom controls visible — The Moments view shows all your project's screens and the flows between them.

Preview Your Project

When you're ready to see your project as visitors will experience it, click the "Preview" button in the top-right corner of the editor. This opens a full, interactive preview of your project in a new browser tab — so you can test your flows, tap through moments, and check that everything looks and feels right without leaving your workspace.

Preview is great for a quick sanity check before sending your project to a display — for example, confirming that a welcome screen flows correctly into your exhibit's main menu. Don't worry, opening a preview doesn't publish or change anything in your project.

You now have a solid feel for the project editor and how its pieces fit together. From here, the real creative work begins — building out moments, connecting flows, and designing experiences your visitors will love. Here are some great next steps to explore:

Add your first moment — Open the Moments & views panel and create a new moment to start shaping your experience's structure.
Connect moments with flows — Use the moments graph to draw navigation paths between moments and define how visitors move through your project.
Drop in your first component — Open a moment's view and drag in a text block, image, or button to start building your layout.
Apply a style set — Head to your project settings to attach a style set and give your experience a consistent look and feel across every moment.
Preview on your target display — Use Preview mode to see your project through a visitor's eyes and make sure everything feels right at your chosen screen resolution.