Visual editor

Click any element, and change it as you see it

Turn on “Visual edit” in the preview, then click a button, a card, an image or a heading. Change its colour, type and spacing with quick controls you see working at once, or write what you want in a sentence. When you press “Apply changes”, Fanann’s AI edits your app’s real code.

Start free How it works

Instant preview before applyingEdits the real codePart of the paid plans

Visual edit

Specialty coffee, delivered freshSubscribe and receive it weeklyButtonSubscribe now

What do you want to change here?

Colour

Radius

2 changes pendingApply changes

How you edit

Point at what you want to change

No more “the second button in the third section”: just click it.

1In words

Select the element and say what you want

Hover over the preview and an outline appears with the element’s name in a plain word: button, image, heading, card. Click to select it, then write the change in the prompt box or pick a suggestion for that kind of element. The request reaches Fanann with the element attached, so it never misses the spot.

Suggestions by element type
Step up to the parent element easily
Works in web and mobile apps

Product cardHome page · cardSelected

What do you want to change in this element?

Apply

Suggestions for this element

Make it more premiumAdd a “New” badgeBigger textAdd a soft shadow

Only this element and what it needs will change

2By hand

Quick controls you see working at once

Colour from your app’s palette first and then a picker, type by size, weight and alignment, spacing and radius with sliders and a clear picture of padding and margin, images replaced from your project’s files, and text edited in place. All of it is a preview until you decide.

Colour, type, spacing and radius
Replace images and edit text
A comfortable bottom sheet on phones

Quick controlsInstant preview before you apply

Your app’s colours

TypeRegularBold18px

Margin 16

Padding 24

Element

Radius

3Applying

One request that edits the real code

Your tweaks collect in a clear bar with an Undo all button. On “Apply changes” they go out as one request: Fanann’s AI edits your app’s code and refreshes the preview. Plainly: applying uses your credits like any other change, and the preview before it changes nothing in your app.

All tweaks in one request
Undo all before applying
Uses credits like any change

Pending changes3 changes on 2 elements

The “Subscribe now” buttonColour → primary · radius → 12
The page headingSize → 32 · bold
The product imageReplaced with one of your files

Fanann’s AI edits your app’s real code; it counts like any change

Apply changesUndo all

Examples

Changes that take a click, not a long message

The main button in your brand colour

Click the button, pick the colour from your app’s palette and move the radius slider. Watch it change, then press “Apply changes”.

Your product photo instead of the placeholder

Click the image and replace it with one from your project’s files, or ask Fanann’s AI to generate a fitting one.

A “more premium” card in one sentence

Select the card and say what you want in your own words, or pick a ready suggestion for that kind of element. Only this element, and what it needs, changes.

“Make it more premium and add a soft shadow”

Who is the visual editor for?

Business owners

You know what you want when you see it, and do not want to explain where an element is.

Designers

You tune spacing, type and colour by hand, and the code follows.

Marketing teams

Change a line of text or an image on a campaign page without waiting for a developer.

Agencies

Work through client feedback in front of them, element by element.

How it works

Three steps to change any element

From your app’s preview inside Fanann.

Turn on “Visual edit”

From the preview toolbar, then click the element.

Tweak or describe

With the quick controls, or in a sentence.

Apply the changes

Fanann edits the code and refreshes the preview.

FAQ

Questions people ask

What is the visual editor in Fanann?

A way to change your app by clicking: select any element in the live preview and change it with quick controls or a sentence describing what you want, and Fanann’s AI applies the change to the app’s code.

Does a visual edit really change the app’s code?

Yes. What you see while editing is an instant preview. On “Apply changes”, Fanann’s AI edits your app’s real files, so the change lives in the code you own and can export.

Does a visual edit use my credits?

The preview does not change your app. Applying the changes is a request Fanann’s AI carries out on the code, and it uses your credits like any change you ask for in chat. That is why your tweaks are collected and sent as one request.

Does the visual editor work with mobile apps?

Yes. You select elements inside the phone frame in the preview just as you do in a web app.

Can I use it from my phone?

Yes. On a phone the editing tools open in a bottom sheet and the selected element stays visible above it.

My app was built before this feature. Will it work?

Yes. Fanann offers “Refresh the preview to enable visual editing”, which rebuilds the preview from your current version; then you select elements as usual.

Which plans include the visual editor?

The visual editor is part of the paid plans.

Works with

Everything in one window

Design to AppA screenshot, a design or a logo becomes a brand board, then an app that follows it.Control CenterRun your app after launch: records, users, files, errors and deployment.Plan modeSmart questions, a plan you can edit, then a build that matches it.

Edit your app by eye.

Click, change and apply: the edit reaches the real code. The visual editor is part of the paid plans.

Start free See pricing