Visibility configuration

The visibility configuration in Wized allows you to dynamically show or remove elements from the DOM based on real-time data. Unlike CSS properties like display: none, this configuration removes the element from the DOM entirely until the specified condition is met.

This feature enables highly flexible and reactive user interfaces, adapting instantly to changes in requests, variables, cookies, URL parameters, inputs, and more.

Note

For this configuration to work, the element must be present in the DOM by default. If it has display: none in Webflow, Wized won't be able to apply the configuration.

How does It work?

When you apply visibility to an element, Wized evaluates the condition that you written in the function editor. If the condition returns true, the element appears in the DOM. If it returns false, the element is completely removed.

Key features:

• Fully dynamic → Elements appear and disappear based on real-time data.
• DOM removal → Unlike display: none, the element is not just hidden it is completely removed from the DOM.
• reactivity → Wized continuously monitors changes in requests, variables, inputs, and other data sources to update visibility instantly.

---

How to set up visibility

1. Select the Element

In the Elements Panel, click on the element you want to show or hide dynamically.

---

2. Apply the visibility configuration

In the right panel, locate the visibility section and open the function editor to define your condition.

---

3. Define a condition

Write a condition that determines when the element should be visible.

For example, to show an error message only if the login request failed:

return r.loginRequest.status !== 200 && r.loginRequest.hasRequested;

---

Practical use cases

Here are some common scenarios where visibility is useful:

Show an admin only button

Use case: Show an "edit content" button only for administrators.

return r.getUserData.data.role === 'admin';

---

Show a loading spinner until data is ready

Use case: Display a loading spinner while an API request is in progress.

return r.productRequest.isRequesting; // Hide the spinner once data is loaded.

---

Show an error message if a form submission fails

Use case: Display an error message only if a form submission fails.

return r.formSubmission.status !== 200 && r.formSubmission.hasRequested;

---

Common mistakes & how to fix them

Error: The element doesn’t appear even when the condition is true

• Problem: The data source (e.g., request, variable) may not be available when the condition is first evaluated.
• Solution: Ensure the request or variable is initialized before checking visibility.

---

Error: Using display: none instead of the visibility configuration

• Problem: Some users may mistakenly apply display: none in CSS, thinking it works the same way.
• Solution: visibility configuration removes elements from the DOM, while CSS only hides them.

---

Error: Condition does not return a boolean

• Problem: Wized expects the condition to return true or false, but sometimes users forget to return a value.
• Solution: Ensure your condition evaluates to a boolean.

---

Why removing an element from the DOM?

Unlike simply changing an element’s CSS display property, Wized’s visibility configuration completely removes the element from the DOM. This behavior offers several advantages and considerations:

Benefits of removing an element from the DOM

1. Performance optimization:

   • Elements removed from the DOM are not processed by the browser, reducing memory usage and improving page performance.
   • This is especially useful when dealing with large lists, complex UI components, or elements that should only be present under specific conditions.

2. Security & data protection:

   • Sensitive content (such as admin-only sections) is completely removed from the page’s structure, making it harder to access via browser inspection or JavaScript manipulations.

3. Accurate event & state management:

   • Elements that do not exist in the DOM cannot trigger JavaScript event listeners, reducing unnecessary event bindings and preventing unwanted interactions.

When Not to use visibility configuration

While removing elements from the DOM is beneficial in many cases, there are scenarios where modifying inline styles (e.g., setting display: none) is more appropriate:

• When animations/transitions are needed:
  If you want an element to smoothly appear/disappear (e.g., with a fade-in effect), modifying opacity or display via inline styles allows for smooth CSS animations.

• When the element should retain state:
  If hiding an element should not reset its internal state (e.g., form inputs retaining user data when toggled), using display: none is preferable.

• For elements frequently toggled:
  If visibility needs to change rapidly (such as dropdown menus, tooltips, or modal windows), keeping the element in the DOM and toggling styles is more efficient than constantly adding/removing it.

Choosing between visibility and Inline Styles

Feature	visibility Configuration (Removes from DOM)	Inline Styles (display: none)
Performance	✅ Better for heavy UI elements	❌ Still loaded in the DOM
Security	✅ Hides sensitive data completely	❌ Can be revealed via DevTools
State Retention	❌ Resets internal states	✅ Preserves state when hidden
Animations	❌ Not possible without reloading	✅ Allows smooth transitions
Use Case	Best for conditional UI logic	Best for temporary UI toggling