ChanTan Studio DocsClick-to-Edit Text, Colours and Photos in ChanTan Studio
Change wording, colours and pictures by clicking them in the preview: text and colour edits are free, every edit is undoable, and the AI isn't needed.
You don't have to ask the AI for every small change. Click straight onto a word, a colour or a photo in your preview and change it yourself.
Text and colour edits are free. Uploading your own photo is free too. Only generating a brand-new photo with AI costs credits, and the price is shown before you confirm.
1. Turn on direct editing
In the preview toolbar, press the pencil — its label is "Edit text, colors & photos directly".
A green bar appears across the top: "Click text to type · click a photo to swap it · pick colors — saves straight to your code".
To leave direct editing, press "Cancel" on the right-hand side of that same green bar (or press the pencil again). Cancel only turns the mode off — every edit you already saved stays exactly where it is.
2. Point at what you want to change
Hovering over anything editable outlines it with a dashed green box. Clicking it gives it a solid green outline and a small floating toolbar.
3. Change the words
Click directly on the letters — clicking the empty space next to them doesn't count. A cursor appears where you clicked and you type in place.
Then press "✓ Save" to keep it, or "✕" to throw the change away.
A heading split over two lines is treated as two separate pieces of text — you edit the line you clicked, and the other is left alone.
4. Change a colour
Selecting anything editable also shows a colour toolbar with two rows of swatches:
- "A" = the text colour
- "BG" = the background colour
Each row shows your own project's brand colours, read live from your design, plus a rainbow button that opens your system colour picker for any custom colour.
The colour changes instantly as a preview. It's only written into your app when you press "✓ Save"; "✕" puts the old colour back. Only the colour changes — size, alignment and spacing stay exactly as they were.
5. Replace a photo with your own (free)
Click a photo and the toolbar shows "⬆ Replace" and "✨ Generate".
Press "⬆ Replace" to open your file picker and choose a picture.
| Accepted files | PNG, JPG/JPEG, WebP, GIF, AVIF |
| Maximum size | 15 MB |
| Cost | Free — the sheet says so: "Or upload your own photo — free" |
You see "Uploading your photo…" then "Photo replaced". The preview refreshes itself once when the file has landed (within about 12 seconds at worst), so you shouldn't need to refresh by hand.
6. Or generate a new photo with AI (costs credits)
Press "✨ Generate" and a sheet opens:
- Describe it. For example: "a cozy coffee shop interior, warm light". At least 2 characters.
- Pick a quality. Two cards, each showing its price in credits:
- "Standard" — "Quick & good quality" — about 14 seconds
- "Premium" — "Best quality, great with text" — about 32 seconds
- Press "Generate". A real elapsed-time bar runs through "Composing the scene…", "Painting the details…", "Finishing up…".
- Decide. You see the old and new side by side, labelled "Now" and "New", with "Use this photo", "Try another" and "Change the description".
⚠️ You are charged the moment the photo is created — not when you accept it. Pressing "Try another" is a second charge, and cancelling after seeing a photo does not refund it. A message tells you at the moment it happens: "{n} credits charged for this photo". Nothing is charged if the generation fails.
With today's settings that's 1 credit for "Standard" and 22 credits for "Premium". The prices are worked out live from your account, so the number printed on the card is always the truth — trust it over any figure quoted anywhere else.
✅ Done! You see "Saved — your change is in the code", and the change is visible in your app immediately.
These are real changes to your app, not preview tricks. And every direct edit saves a full version of your project before it writes anything — so the normal "Undo" button puts it back exactly, including the actual photo.
What you can and can't change this way
Click-to-edit is deliberately narrow. It changes the words you can see, the text colour, the background colour, and photos. That's the whole list.
Everything else goes in the chat:
- Layout, spacing, alignment, text size
- Adding, removing or reordering sections and pages
- Animations and movement
- Buttons' behaviour, links, forms
- Anything driven by your data
When you click something it can't safely change, it refuses instead of guessing:
| Message | What to do |
|---|---|
| "This text comes from data — ask for the change in the chat." | That word is filled in from a list your app saves. Change the record under "Manage ▾" → "Database", or type the change in the chat |
| "This element's styling is dynamic — ask for the change in the chat." | Type the colour change in the chat |
| "This changed since you opened it — reopen and try again." | Refresh the preview, click the item again, redo the edit |
| "Couldn't apply that edit — ask for the change in the chat instead." | Describe it in the chat |
| "This image isn't part of your project — ask for the change in the chat." | That photo comes from another website. Ask in the chat |
| "This file is managed by Chantan — ask in chat to change it." | Ask in the chat |
| "A build is running — try again when it finishes." | Wait for the build to finish |
⚠️ There is no "Ask AI" button anywhere. Older versions of these messages mentioned one; it never existed. "Ask in the chat" simply means: type your request into the chat box on the left and send it.
Upload problems
| Message | What to do |
|---|---|
| "Please choose an image file (PNG, JPG, WebP…)." | Pick a real image file |
| "That image is over 15 MB — please choose a smaller one." | Crop or compress it first |
| "That file doesn't look like an image — please choose a PNG, JPG or WebP." | Re-save the file as PNG or JPG |
| "Couldn't process that image — try a plain PNG or JPG (animated images aren't supported)." | Use a still image |
| "Could not save the image. Try again." | Retry — it isn't a problem with your file |
| "Slow down a moment — too many edits." | You hit the limit of 40 edits per minute. Pause a few seconds |
If you replaced a photo and still see the old one after ~12 seconds, press "Refresh preview". If it's still stale, restart the preview from "Version History".
Honest limits
- You can't edit while the AI is building. The pencil switches itself off, and any edit that slips through is refused — so your click and the AI's work can never fight over the same file.
- Editing is blocked while you're viewing an old version, on purpose.
- If the pencil isn't there, this particular preview hasn't reported that it has editable parts — older projects show a plain arrow tool instead, which describes what you clicked and drops that description into the chat box for you. Waking or restarting the preview sometimes brings the pencil back. You'll never get a pencil that does nothing.
- A few messages stay in English in every studio language: the small floating toolbar on photos ("⬆ Replace", "✨ Generate"), the "this can't be edited here" refusal messages, and the upload error messages. The green bar, the photo sheet and the quality names are translated. Everything works; only that wording is untranslated.