Visual editing is a way to change your website or app without code and without describing an element's position in words: you click the button, image or card in the preview, then type what to change or move colors, fonts and spacing directly. It suits changes to look, text and images, not changes to business logic. In Fanann, visual editing works on your app's preview; you see tweaks at once, nothing is committed until you press 'Apply changes', and changes are written into your app's real code. It is available on paid plans.
- edit a website without code
- how to change my app without a developer
- visual editor for AI built apps
- click to edit website
- how to change button color on my site
- point and click app editing
What is visual editing?
Try explaining over the phone which button you want changed: 'The second button in the third card, no, the one below it, in the section after the photos.' Then a different button gets changed. This happens daily between site owners and developers, and between users and AI assistants.
Visual editing removes that whole sentence. You open your app's preview and click the element itself; it gets an outline. Now everything you say is about 'this'. You type 'make it bigger and in the brand color', or drag a spacing control and see the result at once.
Illustration- The idea
- Point at the element instead of describing where it is
- Good for
- Colors, fonts, spacing, text, images
- Not for
- Business rules, data, permissions
- Skill needed
- Knowing what you dislike when you see it
Why does describing an element in words fail?
When you build by chat, description works well for big things: 'add a booking page'. It stumbles on small things, for three reasons:
- Names do not match. You call it 'the green box'; in the code it is a component with an entirely different name.
- Elements repeat. The page has six 'Book now' buttons. Which one?
- Position is relative. 'Top right' differs between phone and desktop, and between Arabic and English.
- 'Change the button color in the second package card'
- Another button, or all of them, may change
- You explain again in different words
- Three attempts for one edit
- You tire and settle for close enough
- You click the button itself
- The change targets this element
- You type what you want in five words
- Usually one attempt
- Ten things fixed in one sitting
The shortest description of any element is your finger on it.
What are the ways to edit a site without code, and where does visual editing fit?
Editing sites without programming is not new. Each known route has its place:
| Route | How it works | Its limit |
|---|---|---|
| Drag-and-drop builder | Build the page from ready components and change properties in a panel | Bound to the tool's components; heavy for apps with logic |
| A content system's admin panel | Change text and images through forms | The theme sets the look; changing it needs a developer |
| Asking a developer | Send your notes and wait | The most precise result, the slowest loop for small edits |
| Chat with an AI builder | Describe the change and it is done | Great for big changes, tiring for small specific ones |
| Visual editing on a real app | Click the element, then ask or adjust | For look and content, not business logic |
One difference worth noticing: in many visual builders you edit inside a template the tool owns. With visual editing on an AI-built app, the change is written into your app's real code, not on top of it, so the app stays yours with every edit. On code ownership, read who owns the code in AI builders.
How do you use visual editing in Fanann, step by step?
- 1Open the preview and turn on visual edit
Visual editing works on the preview, not the published version. If you are viewing 'Published', switch to 'Preview'.
- 2Hover, then click
On a computer the element highlights under the pointer. Click to select it. If you selected something smaller than intended, the up arrow selects the containing element, and Esc exits.
- 3Confirm what you selected
A panel shows the element's kind: button, image, heading, card, table, form, header and more, with its place on the page.
- 4Ask or adjust
The Ask tab is for typing what you want; the color, font, spacing, image and text tabs are for adjusting by hand.
- 5Review, then apply
What you adjust by hand is a preview only. You see the number of pending tweaks, and can remove any one or undo all. Press 'Apply changes' to write them into your app.
What can you change? Examples for each kind of element
Take a chalet booking site in Taif. These are realistic edits done by pointing, grouped by element:
| Element | Direct tweak by hand | Typed request after selecting |
|---|---|---|
| 'Book now' button | Background from your app's colors, corner radius, font size | Make it the brand's primary color and add a calendar icon |
| Section heading | Size, weight, alignment, line height | Rewrite it to be clearer and shorter |
| Chalet card | Inner spacing, shadow, border color | Make it look more premium and tidy its contents |
| Hero image | Swap for an image from your app's library or a new upload, and set how it fills the frame | Generate a better image for this spot |
| Phone number field | Spacing and borders | Make the field clearer and easier to type in |
| Price table | Gap between items and font size | Arrange the columns better and highlight the weekend price |
With the package card selected: make this card stand out from its two neighbors: a border in the brand's primary color, a light shadow, and a small badge at the top reading 'Most booked'. With the hero image selected: replace it with the chalet photo I uploaded, and make it fill the frame without cropping the top. With the page heading selected: rewrite it in six words at most, mentioning Taif and the view. With the footer selected: widen the inner spacing, and put contact numbers on one line on desktop and in a column on phones. With the booking button selected: raise the font one step and make the button full card width on phones only.
Try it in FanannNotice how short each request is, because 'which element' is settled by the selection. Each element also comes with suggestions that fit its kind, such as 'make the font bigger', 'add a light shadow' and 'soften the corners'. For more ideas on wording visual requests, read prompts for UI design.
Should you adjust by hand or ask in words?
Pick the one that sounds like you to see the advice.
Adjust by hand. A specific color from your app's palette, a font one step larger, wider spacing. You see it at once and can try until you like it before applying.
Ask in words: 'more premium', 'calmer', 'bolder'. That takes several decisions at once across color, spacing and shadow.
The text tab: type and watch the words change on the element. For better phrasing, ask to rewrite the text to be clearer and shorter.
Ask in words after selecting the nearest element: 'add a line with the cancellation policy under this card'. The selection says where; the request says what.
A note on identity: if you find yourself changing the same color on ten elements, the problem is the app's primary color, not the elements. Change it at the source, as explained in build an app that matches your brand.
What are the limits of visual editing, and when is it the wrong tool?
One more practical limit: visual editing tempts you into endless polishing. Set a time box for polish, then return to what matters to the customer: can they book and pay without stumbling?
How do you polish your app in twenty minutes?
A routine worth running before each publish. Walk through your app as a customer, from the first page to a completed order:
- 5 minFirst page
Is the heading clear at a glance? Is the main button the most visible element? A real photo, not a stock one? Fix all three by pointing.
- 5 minCards and lists
Even spacing, prices that stand out, text that does not break mid-word.
- 5 minForms
Clear fields, labels that make sense, a submit button visible without scrolling.
- 3 minPhone
Open the preview on your phone. Enlarge whatever cannot be read there.
- 2 minApply and publish
Check the number of tweaks, apply them, then publish the version.
If you have many notes and would rather say them than type them, voice input turns your speech into a written request you review before sending, as in build software by speaking Arabic. For changes bigger than looks, follow the rule of one feature at a time.
Key takeaways
- Pointing at an element removes the biggest source of misunderstanding: which button do you mean?
- Two ways after selecting: ask in words, or move color, type and spacing by hand.
- Direct tweaks are a preview only until you press 'Apply changes'.
- Visual editing is for look, text and images; rules and data are requested in chat.
- Edit on the preview, check on a phone, then publish.
Frequently asked questions
Can I edit my site with no programming experience at all?
Does visual editing change the real code or add a layer on top?
Can I undo an edit I do not like?
Why does visual editing not work on my published site?
Can I change an image with visual editing?
Is visual editing free?
Ask your AI assistant about this
Copy this prompt into the AI assistant you use, then add the details of your own case.
I am reading this guide: “Change your app by pointing at it: how visual editing works” https://fanann.com/en/blog/edit-your-app-by-pointing-at-it/ My question: edit a website without code Use that page as a source and explain the answer step by step for my situation, tell me what to check before I start, and cite the page link.