The Canvas Tab is your primary workspace for building the frontend of your app in Devize. It is where you design pages, create reusable components, and define how your app looks and behaves. The Canvas Tab is structured around two main elements: Pages and Components.

Key Elements of the Canvas Tab

Pages

Pages are the foundation of your app's user interface. Each page represents a unique view or screen within your app, such as a homepage, dashboard, or login page.

Inside each page, you can configure:

Layers: UI elements like buttons, text, and containers.

Workflows: Logic that drives app behavior (e.g., navigation, API calls).

Utilities: Tools like state variables that manage dynamic data and shared functions.

Components

Components are reusable building blocks for your app’s interface. They allow you to design modular, repeatable UI elements such as navigation bars, cards, or form elements.

Like pages, components include:

Layers: Define the structure and style of the component.

Workflows: Handle logic specific to the component.

Utilities: Manage dynamic behavior or reusable functions within the component.

How the Canvas Tab Works

Start with Pages
Create the main screens of your app. Drag and drop UI elements, connect data, and define workflows.

Build Reusable Components
Design components that can be reused across multiple pages, ensuring consistency and efficiency.

Enhance with Layers, Workflows, and Utilities
Inside each page or component, you’ll define the UI structure with layers, manage app logic with workflows, and handle dynamic data or reusable functions with utilities.

What’s Next?

This introduction serves as a high-level overview of the Canvas Tab. Dive deeper into the specific topics by clicking from the links below