Adding and Editing Views

Views are where your project comes to life visually. Whether you're designing a welcome screen for a museum kiosk, laying out a gallery caption display, or building an interactive timeline for an educational exhibit, views give you precise control over how each moment looks on screen. In Zibit, every moment can have one or more views — each tailored to a specific display — and the grid canvas makes it easy to arrange components exactly where you want them.

Open a View from the Moments Graph

You're now looking at the moments graph — the visual map of your project's structure. Each card here represents a moment, a single screen or state in your experience. You can see your "Welcome" moment already waiting for you.

To start editing its layout, find the moment card and click into its view. This takes you into the view editor, where you'll arrange components, set backgrounds, and design exactly what your audience sees on the display.

The Zibit moments graph showing a project called Views Demo with a single moment card labeled Welcome, along with toolbar buttons for Preview and Add new moment — The moments graph for the Views Demo project, showing the Welcome moment ready to edit

Arranging Components on the Canvas

This is the View Editor — your visual workspace for designing how a moment looks on screen. The canvas uses a grid to help you place and align components (like text, images, buttons, and video) with precision. Click "Add component" to bring elements onto the canvas, then drag them into position.

You can adjust the grid at any time using "Grid settings", and nothing is locked in — components can be moved, resized, or removed whenever you need to make changes. Use "Preview" to see how your view will look on the target display before publishing.

The Zibit View Editor showing an empty canvas grid with toolbar buttons including Add component, Preview, and Grid settings — The View Editor canvas — drag and arrange components to design your moment's layout

Add a Component to Your View

With your view open in the editor, click "Add component" to open the component picker. You'll see a range of building blocks — from "Text" and "Image" to "Video", "3D Model", and interactive elements like "Button" and "Carousel". Choose the type that fits what you want to show, and it'll be placed on your canvas ready to configure.

For a museum exhibit, you might start with an "Image" or "Video" to anchor the experience, then layer in "Text" for context or a "Button" to guide visitors to the next moment. Don't worry about choosing perfectly — you can add, remove, and rearrange components at any time.

The Add component popover is open in the Zibit view editor, displaying a grid of component type buttons including Container, Card, Text, Separator, Image, Video, Audio, 3D Model, Timeline, Timeline Event, Button, Hotspot, Highlight, Carousel, and Header. — The component picker lets you choose what to place on your view's canvas.

Add a Text Component to Your View

You've placed a Text component onto the canvas — great start! The component is now live on the grid, and you can see it labeled "Text on canvas" in the editor. Click the component to select it, then use the "Text content" panel to type in your message, whether that's a welcome greeting, an exhibit title, or a call-to-action for visitors.

Don't worry about getting the wording perfect right now — you can update the text content at any time. Once it's selected, you'll also find styling options nearby to adjust how the text looks across your display.

The Zibit View Editor showing a Text component placed on the grid canvas with a 'Welcome' heading displayed inside it, alongside canvas toolbar options and a sidebar panel. — A Text component placed and ready to edit on the view canvas.

Work with a Selected Component

When you click a component on the canvas, it becomes selected and a quick actions toolbar appears nearby. From here you can quickly Edit the content, adjust the Layer controls, Lock it in place, add Comments, Duplicate it, or Delete it — all without leaving the canvas.

You'll also see resize handles around the edges and corners of the component. Drag any handle to resize it to fit your layout. Don't worry about getting things perfect right away — you can reposition, resize, or delete any component at any time.

A text component selected on the Zibit canvas editor, surrounded by resize handles and a quick actions toolbar showing edit, layer, lock, comment, duplicate, and delete options — The quick actions toolbar appears whenever a component is selected

You've got the foundation you need to start designing rich, polished moments in Zibit. From here, there's a lot more you can do to bring your experience to life — and everything you've set up can be adjusted at any time.

Add more component types: Explore images, videos, and buttons in the component picker to build richer, more interactive moments.
Set up multiple views for different displays: Create separate views within the same moment to tailor the layout for different screen sizes or orientations.
Link moments with flows: Connect your moments together so visitors can navigate through your experience in a meaningful sequence.
Apply a style set: Use a style set to apply consistent typography and colors across your entire project — perfect for matching your institution's brand.
Explore collections: If your experience displays repeating content like artwork details or event listings, connect a collection to pull in structured data automatically.