Design Canvas

The Design Canvas is the primary workspace environment, where all application development activities take place, including designing pages, managing data sources, configuring services, and testing the application.

The Studio interface is organized into several functional areas, each serving a specific role in the development workflow. Navigation panels provide access to project resources such as pages, variables, and services, while the central canvas is used to visually design and structure the user interface. Supporting panels allow developers to configure properties, manage styling, inspect page structure, and monitor application behavior during testing.

The following sections walk through each part of the Studio interface and explain its purpose and usage.

Top Toolbar

The Top Toolbar is the primary control strip of the Studio and provides quick access to the most frequently used actions during development. It allows developers to view and control, design modes, manage project structure, preview the application, track changes, export builds, deploy, and access job notifications and profile settings, without leaving the workspace.

Below is a detailed walkthrough of each functional area of the Top Toolbar from left to right.

1. Recent Items

This section gives you a listing and access of the recently engaged items like, pages, partials, databses, APIs, Java services, and Files.

2. Workspace Mode Selector (Canvas / Code / Variables)

At the left side of the toolbar, the workspace mode selector allows developers to switch between different views of the current page.

Canvas This is the visual design mode where UI components can be placed, resized, and configured. It is the default workspace used for layout and interaction design.

Code In the next section you get to choose between three modes:

• Markup: This view provides access to the underlying structure of the page in the WaveMaker Markup language

• Script: This is where you write any frontend scripting if necessary

• Styles: This mode is useful when developers need finer control over styles through CSS.

Variables and Actions The Variables are managed in a dialogue. This section is used to configure API call methods, data binding , and other application workflows data exchange between UI and backend.

4. Save Status Indicator

A small status indicator shows whether the project is saved or has pending changes. This helps developers confirm that changes are persisted.

5. Preview

The Preview allows developers to run the application instantly in an adjacent tab in the same browser window. This provides immediate feedback without requiring a full deployment.

6. Version Control and Change Management

The version control menu provides options related to managing project changes.

Typical actions include:

• Pull Changes: Fetch updates from the repository

• Push Changes : Upload local changes

• View Changes : Inspect modified files

• Commit History : View previous commits

• Push to External Repository : Sync with an external Git repository

This functionality integrates source control directly into the development environment, allowing teams to manage versions without leaving the Studio.

7. Export and Build Options

The export menu provides options to generate project artifacts in different formats.

Export options provided are:

Project Sources as ZIP : Download full project source

Angular Project ZIP : Export frontend in Angular format

React Project ZIP : Export frontend in React format

WAR Package : Export deployable server artifact

Shell to Workspace : Export into another environment

8. Deployment

The Deploy option allows publishing the application to a runtime environment.

9. Project Notifications

The notifications panel displays updates related to the project.

This includes:

• Build progress
• Deployment status
• Job execution results
• Test run status

10. Profile and Account Menu

The profile menu provides access to user-related options such as:

• Viewing account details

• Switching Accounts

• Logging out

• Accessing Studio information

Primary Navigation Bar

The Primary Left Navigation Bar is the main entry point to all project resources such as pages, Components, Page tree structure, Databases, java services, APIs, settings, and Style workspace. It organizes the application into logical sections so developers can easily switch between UI, data, and configuration.

Secondary Navigation Bar

The Secondary Navigation Bar appears after selecting a section in the primary navigation and lists the items within that category. It allows quick navigation between pages, components, APIs, or services.

Pages

The Pages section lists all application screens and reusable views. Selecting a page loads it into the Canvas where its layout and behavior can be edited.

Tree View Page Structure

The Tree View provides a hierarchical representation of all widgets in the current page. It is useful for selecting hidden elements, reordering components, and understanding layout structure in complex pages.

Database

The Database section provides access to databases, their tables, and schemas, connected to the application.

Java Services

Java Services allow developers to implement backend logic using Java within the WaveMaker environment. They are used for business logic, data processing, or integrations that require server-side execution. All Java services present or used in the application are listed as endpoints in this section

Imported APIs

The Imported APIs section lists external REST services integrated into the application. These APIs can be imported using an open API swagger file, webservices, or websockets, and so on.

Settings

The Settings section contains project-level configurations such as general application properties, security settings, environment profiles, and localization settings. It is used to control application behavior and deployment configuration.

Style Workspace

The Style Workspace is used to manage themes, global styles, and component styles. It ensures consistent visual design across the application and allows centralized styling changes.

Canvas

The Canvas is the main visual design surface in the focal center of the whole UI, where UI components are placed, arranged, and laid out. It shows a live representation of the page layout and allows drag-and-drop editing of components and prefabs.

Properties Panel

The Properties Panel shows configuration options for the selected component. It allows developers to modify appearance, layout, data binding, and event behavior. It also provides controls for adjusting responsive behaviour for various types of device screens.

Component Breadcrumb

The Component Breadcrumb below the canvas, displays the hierarchy of the selected component. Showing its parent containers and layout structure. It helps developers understand nesting and quickly navigate to higher-level containers.

Bottom Toolbar

The Bottom Toolbar provides debugging and runtime information such as logs, console output, and network activity. It helps developers diagnose errors, inspect API calls, and troubleshoot application behavior during testing. It also provides a file explorer, to explore and locate any file in the project structure.

To explore the Design Canvas in a guided visual tour and see how the Canvas is laid out, we invite you to watch the complete Design Canvas walkthrough video below.

Design Canvas

View on Academy

00:00: Welcome to the Design Canvas walkthrough.

00:03: When you open or create a project this workspace becomes your primary development environment.

00:08: From here, you can design Pages connect data sources configure services and test your application all within a single interface. The studio is organized into clearly defined areas each designed to support a specific part of the development workflow in this tour. We'll walk through each section of the interface and understand how they work together to help you build applications efficiently.

00:33: At the top of the workspace is the top toolbar.

00:37: This is your Control Center for working with the project allowing you to switch views preview the application manage source control export builds deploy applications and monitor project activity.

00:50: Let's explore each section of the toolbar from left to right.

00:54: The Recent Items section gives you quick access to the resources you 've been working on recently. This includes pages, partial views, databases, APIs, Java services, and files.

01:06: It 's a convenient way to jump back into frequently used parts of your project without navigating through multiple panels.

01:13: In the Canvas you, visually design the interface by dragging and dropping components and at the same time design the layout.

01:21: In the code viewer, you can access the underlying code responsible for the Page's appearance and behaviour.

01:28: The markup section allows you to view and edit the underlying structure of the page.

01:33: This is where you can work directly with the elements that define how the layout and components are organized.

01:40: The Script section is used to add frontend logic to your page.Here, you can write code to handle interactions, control behavior, and respond to events within the application.

01:51: The Styles section gives you finer control over the appearance of your page.Here, you can work with CSS to customize layout, spacing, colors, and other visual details.

02:02: You can access your defined Variables and Actions to configure data flows, API calls, and interactions between the UI and backend.

02:11: Let's take a look at the variable dialogue.

02:14: On the left we have the Page level and Application variables listed.

02:18: And on the main section the configurable fields of the selected variables are provided.

02:22: Let's click on New Variable to create a variable.

02:26: Here you are provided with all the options to create various types of Variables, namely, Database Crud, Imported APIs, Databse APIs, Web Services, Java Serices, Security Services and Model variable.

02:41: And in Action types we find, Navigation, Login, Logout, Timer, and Notification actions

02:49: The Save Status Indicator shows whether your project is saved or if there are pending changes.

02:54: This helps you keep track of your work and ensures that your latest updates are safely stored.

03:00: The preview option allows you to run the application instantly in another table.

03:05: This is useful for testing navigation verifying layouts and confirming that your application behaves as expected without needing a full deployment.

03:15: The Version Control menu helps you manage changes to your project.

03:19: You can pull updates from a repository, push your changes, view modifications, review commit history, or synchronize with an external repository.

03:29: These tools make it easy to collaborate with team members and keep your project versions organized.

03:35: the export menu provides options to generate project builds in different formats

03:41: You can download the project sources export front end builds, or generate deployable artifacts.

03:48: These options are useful for archiving projects sharing builds or deploying applications in different environments.

03:56: The Deploy option allows you to publish your application to a runtime environment. With just a few steps, you can make your application accessible to users.

04:06: The Project Notification panel keeps you informed about project activity. Here you can monitor build progress, deployment status, job execution results, and test runs. This helps you stay aware of background jobs runnin

04:20: The Profile menu provides access to account-related options. From

04:24: here, you can view your account details, switch accounts, log out, or access information about the Studio environment.

04:33: Moving to the left side of the workspace, you 'll find the Primary Navigation Bar.

04:39: This panel is your gateway to all project resources, including pages, components, databases, Java services, APIs, settings, and the Style workspace.

04:51: It organizes the project into logical sections so you can quickly move between UI design, data configuration, and application settings.

05:01: When you select a section in the Primary Navigation Bar, the Secondary Navigation Bar displays the items within that category.

05:09: This makes it easy to navigate between pages, components, services, or APIs without losing your place in the workflow.

05:19: The Pages section lists all screens and reusable views in the application.

05:24: Selecting a page loads it into the Canvas, where you can edit its layout, components, and behavior

05:32: The tree view displays the hierarchical structure of all components on the current page.

05:38: it helps you understand how elements are nested select hidden components and reorganize layouts more easily, especially in complex Pages

05:48: The Database section provides access to the databases connected to your project, along with their tables and schemas.

05:55: From here, you can import and connect database, and explore the tables, their fields, and the relationships defined between them in the selected database.

06:05: Here we see the listing of all the Java services in the project Java services allow you to implement back-end logic within the application.

06:14: These services can process data integrate with external systems or perform business, logic and are exposed as endpoints that can be used throughout the project.

06:25: the imported apis section lists external services integrated into the application

06:31: apis can be imported using open API specifications web services or other protocols making it easy to connect your application to external data sources.

06:41: We can also see the endpoint listings generated by wavemaker whenever we add a database or import Java services.

06:49: the setting section contains project level configurations such as application properties security settings environment profiles and localization options

07:00: these settings help configure how the application behaves and how it is deployed.

07:05: Let us explore to one step deeper into what settings preview.

07:10: We 'll begin with the General settings, which define the core properties of your application.

07:16: At the top, you can see essential project information such as the application name, project shell, creation date, last accessed date, and the current version.

07:27: These fields help you track and manage the application over time.

07:32: Default language of the App, Landing page definition, Copyright information, follows.

07:38: Additional settings allow you to configure display formats, control whether the application should prefer the browser 's language, and define the file types that users are allowed to upload. On the technical side, you can configure the package prefix, choose the Java version used by the project, and enable features such as API composition or code formatting.

08:00: Together, these settings establish the identity, behavior, and runtime characteristics of your application.

08:08: Next we have profile configuration, which manages environment specific settings for your application.

08:14: You have development and deployment configurations.

08:17: Underdevelopment configurations you have database rest web socket security app environment oauth 2.0 and build options configurations in the application settings.

08:30: And you have corresponding configuration settings for prefabs if you have any.

08:36: This area is organized into sections such as SSL, Safeguards, and Truststore, along with broader configuration options for authentication and authorization.

08:47: The Style Workspace allows you to manage themes, global styles, and component styling.

08:54: This ensures consistent visual design across the application and makes it easier to apply branding or design changes centrally.

09:02: At the center of the interface is the Canvas, the focal point of the Studio.

09:06: This is where you visually design your application by dragging and dropping, arranging, and configuring components and prefabs.

09:15: The Canvas provides a live representation of your page layout, helping you see changes instantly as you build.

09:23: On the right side of the workspace, you'll find the properties panel this panel changes dynamically based on the component you select on the canvas.

09:32: It allows you to control the components appearance layout alignment spacing and visibility, as well as configure data binding events and runtime Behavior

09:44: In addition, it provides context specific settings such as data set configuration for data components or layout controls for layout components like container helping you precisely define. How each element looks and functions within the page.

09:59: Below the Canvas, the Component Breadcrumb shows the hierarchy of the selected component.

10:05: It helps you understand nesting and quickly navigate to parent containers when working with complex layouts.

10:12: The Bottom Toolbar provides tools to inspect and manage your application during development.

10:18: It includes a File Explorer for navigating and locating files within the project,

10:24: followed by the Logs panel, where you can monitor runtime messages and troubleshoot issues.

10:30: Additionally, a three-dot menu provides, a keyboard shortcuts list, quick access to globally scoped CSS and JavaScript files, and a developer debugger to inspect execution and diagnose problems.

10:44: And with that, we conclude our Design Canvas tour.

10:47: You should now feel comfortable navigating the Studio UI and understanding how the different parts of the Design Canvas are organized and work together.