How to Use Visual Edits in Noca App Builder
Visual Edits
Click any element on your canvas and change it directly
Noca gives you a few ways to edit a project. This guide covers visual edits, where you click an element on your canvas and change it right there. In this example, we rename a heading to Welcome and swap in a background image on a vendor onboarding portal, updating live as we go.
Watch & Learn
Follow these steps to make visual edits:
Steps:
1
Toggle visual edits
- Open your project and go to the Preview tab
- Click Visual edits in the top toolbar
2
Click the element you want to edit
- Click any element on your canvas
- Noca loads that element into the Properties panel on the left
3
Edit the text
- Change the text in the Text Content field
- We changed the heading to Welcome and it updates in the canvas in real time
4
Style the element
- Adjust the font, size, color, weight, case, line height, units, and text align
- Set letter spacing, background, the spacing around the element, borders, and effects
- Every element you click gives you its own set of controls
5
Add a background image
- Select an element that can hold an image
- In the Background section, click Choose Image and pick the image you want
-
6
Apply to one element or all repeated elements
- Noca asks whether to make the change to every matching element
- Click Only this one to change the single element, or All repeated elements to change every copy
-
Back to top