Studio editor

What the Studio editor is for

The Studio editor is the screen where you edit website pages and funnel steps. On the left is a chat with the AI, on the right a live preview of the page. Most changes you write in the chat (change the header colour, add a pricing section) and the AI rewrites the page. Small things — text, form colours, an image, where a button leads — you change directly in the preview without the AI.

Every change is saved to the version history. While the website or funnel has never been published, changes stay in the draft and visitors see them only after publishing.

A published website changes at once

If the website or funnel is already published, every change in the Studio (from the chat or by hand) also shows on the page visitors see as soon as it is saved. You do not need to publish again.

Where to find the editor

1. In the left menu, click Content → Projects and open the project.
2. On a wide screen (from 1200 px), choose the folder icon (Content) in the narrow icon strip on the left. On a narrower screen, click Expand menu on the left of the top bar — a slide-out panel opens.
3. In the content panel, click a page in the Pages section or a step below a funnel in the Funnels section.

For a website page and a funnel step the left column has two tabs above the chat: Builder (chat) and Settings (page settings — see Website and pages).

What I see in the editor

Part	Where it is	What it does
chat	Builder tab on the left	messages with the AI; the field for entering a change; you can drag the divider to the preview (Drag to resize the chat — double-click to reset)
preview	right part	the page as it will look
floating tool bar	bottom centre of the preview	Insert element, Select area, Select element, Edit text
Collapse menu / Expand menu	far left of the top bar	hides or shows the panel with pages and funnels
mode switch	top bar on the left	Preview, Live session in developer mode, Media, Code editor, Other
preview width switch	centre of the top bar	switches Desktop preview → Tablet preview → Mobile preview
Open in a new tab	next to the project name in the top bar	opens the page in the browser
History (clock icon)	top bar on the right next to Publish	version history and undoing changes
Close	far right of the top bar	closes the Studio

While the AI works, the floating bar is hidden, Publish, Code editor and Live session are disabled and you see the progress above the preview. You can still move between pages.

How to edit a page through the chat

1. Open the page or step.
2. In the chat field (Edit the page... e.g. change header color, add a pricing section), write what to change.
3. Press Enter or click Send. (Shift+Enter adds a new line.)
4. Wait until the AI finishes. You see the progress above the preview (Reading page content, Editing page content, Polishing & checking the page…).
5. The preview reloads with the change.

If the server is busy, you see Waiting in queue #… — waiting for a free slot...; the change starts by itself when its turn comes.

You can close the Studio during a change (Close) — the change keeps running on the server and the Studio rejoins it when you open the project again.

With + in the field you can add Attach image, Attach document or Insert a video. With the microphone (Record voice) you can dictate the change.

How to attach images

1. In the chat field, click + → Attach image.
2. In the Images window, drop images onto Drop images here, or click it and choose them — up to 10 at once.
3. Optionally click an image and edit it: Crop or AI edit (as in How to edit an image).
4. Click Add. The images appear above the chat field; for each one you can write what the AI should do with it.
5. Send the chat.

How to attach a document

Attach document opens the Attach documents window: at most 5 files (PDF, Word, Excel, PowerPoint — max 20 MB). Once added, the documents appear above the chat field in the Attached documents list; for each one you can fill in Description and tick Let the AI read the content (only up to 5 MB). Documents are reachable by public link — do not upload confidential files.

How to stop a change and load older messages

Stop a running change with the Stop button in the chat (Generation stopped). The ESC key does not stop generation. After stopping you can send the next message straight away; there is no need to reload the page.

Older messages load when you scroll up or with the Load older messages button.

How to mark exactly what to change

Instead of describing the third section from the top, mark the spot in the preview:

• Select element: in the floating bar, click Select element and then blocks in the preview. Selected blocks appears above the chat field; for each block write your change in What to change here…. You can add an Optional shared note for all blocks… in the chat field. A second click deselects a block, Clear all clears the selection. A selected image has an Edit image icon that opens the image editing window. Send the chat.
• Select area: click Select area; the browser asks for permission to share the screen. Drag to select a region (Drag to select area) — it is attached to the chat as an image. Not available on a phone.

ESC cancels the active tool (Press ESC to cancel); on a phone use the Cancel button.

How to edit text directly on the page

You edit text without the AI and without waiting.

1. In the floating bar, click Edit text (the T icon).
2. Click into the text in the preview and type.
3. Select part of the text — a formatting bar appears above it: Bold (⌘B), Italic (⌘I), Strikethrough, Smaller text, Larger text, Heading font, Body font, Text colour.
4. Switch the mode off with the same icon or the ESC key.

• Saving is automatic — shortly after you stop typing, when you leave the text and when you switch the mode off.
• Enter inserts a line break, not a new paragraph. Text pasted from the clipboard loses its formatting.
• Text colour offers the project palette colours, Original colour and Custom colour (adds a colour to the palette with Add).
• Text in the navigation and footer changes on all website pages.
• Text in a form cannot be edited this way — see Forms.
• This feature is not available on a phone.

How to insert a button, form or video

Button or form

On a website page:

1. In the floating bar, click Insert element.
2. Choose Button (Leads somewhere — another step, a form, a purchase or a link.) or Form (Embeds an existing form straight into the page.).
3. The bar shows Pick the spot — …. Click the element in the preview the new element should go next to.
4. A panel opens on the left (Insert button or Insert form into page).
5. Fill it in as in the table and choose the Placement: Before the selected element, After the selected element or Inside the selected element. Optionally a Styling note (optional).
6. Click Add (button) or Insert (form).
7. The element is added to Prepared changes above the chat field. Send the chat (even without text) — the AI inserts it.

Insert button panel (website):

Field	Required	What it means
Button text	yes	the label on the button
What it does	yes	Scroll to a section, Go to a subpage, Start a funnel (field Funnel; offered only when the project has a funnel) or Go to an external site (Address, Open in a new tab)
Target section	with Scroll to a section	click the field (Pick the section on the page) and then the section in the preview; change it with Pick a different section
action target	yes	the section, subpage, funnel or address for the chosen action — without a target the button is not added
Placement	yes	defaults to After the selected element

Insert form into page panel: in Form, choose a form of the project. If the project has none, click Create a form — an Untitled form is created, which you then set up in Forms. Insert is disabled without a chosen form.

On a funnel step it works differently:

1. Click Insert element, choose Button or Form and pick the spot in the preview.
2. The What the button does panel opens (for a form, the Form panel). There is no Placement — the element goes after the selected element.
3. Choose the Action: Continue, Buy a product, Form, Decline the offer or Link. For a form choose How it appears (In the page or Opens on click) and After submitting, continue to.
4. Click Save. The element is added to Prepared changes; send the chat.

More in Funnels.

While the AI runs, the floating bar with Insert element is not shown. Insert element is also disabled while text editing or element selection is on.

Video

1. In the chat field, click + → Insert a video.
2. In the Insert a video into the page window, click Pick a video and choose a video from the Video library.
3. In Where it goes, click Pick a section, or leave The AI picks a place.
4. Optionally switch on Start on its own (the video starts muted) and fill in Styling note (optional).
5. Click Insert. The video is added to Prepared changes; send the chat.

If the library is empty: No ready videos. Upload one in the video library first.

Prepared changes

The Prepared changes panel above the chat field holds inserted buttons, forms, videos and button edits until you send them. Remove any item with Remove; inserted elements also have Edit. At most 8 changes can be prepared at once. Prepared changes are lost when the page is reloaded or the Studio closed.

How to edit a button, image, video or form on the page

Hover over an element in the preview (no tool may be on). A bar appears:

Element	Options	What happens
button or link on a website (also in the menu and footer)	Edit	the Edit button panel; Save or Remove button; the change goes to Prepared changes
button on a funnel step	Edit	the What the button does panel; Save or Clear the button’s action; a button that already leads somewhere is saved at once
image	Edit	the Edit image window (see below)
video	Edit (another video from the library), Add for mobile (a different video on mobile), Merge (cancels the split), Remove (dialog Remove video?, button Delete)	written at once, without the AI
placed form	Colours, Fields, on a funnel step also Action	see Forms

How to edit an image

1. Hover over the image and click Edit.
2. In the Edit image window, choose a mode:
   • Preview — the icons at the top left rotate the image (Rotate left, Rotate right) and flip it (Flip horizontally, Flip vertically),
   • Crop — drag to select the area and click Crop at the bottom right,
   • AI edit — quick options Remove background, Enhance, Studio background, Brighten or your own instruction (Describe how to edit this image…). At the bottom is a collapsible History list of the instructions already applied to this image (read-only).
3. Every edit creates a new version. When the image has several versions, switch between them with the Original and Edited labels above the image.
4. Click Replace — the version currently shown goes onto the page.

• The image is replaced everywhere it is used on the website.
• AI edit uses credits according to its complexity (see AI credits). Cropping, rotating and flipping are free. When you run out of credits you see You have run out of AI credits. Top up to continue.
• If a generation is running, the replacement may fail (The image could not be replaced, so the original was kept…); try again once it finishes.

How to go back to an earlier version

This is how you undo a change the AI or you made — for example when the AI broke the page. The Studio keeps versions of the website and of each funnel separately: after every AI change, after a manual edit and on restore. Manual edits of the same place within 10 minutes are merged into one version.

How to undo the last change

1. Open the page or step.
2. In the top bar on the right, click the clock icon (History).
3. In the History panel, click Undo last change at the top.
4. Confirm Restore.

How to restore any version

1. Open History.
2. Versions are grouped by day (Today, Yesterday, date). Each has a label: Starting point, Manual edit, AI generation or Restore; the newest is Current. Load more versions with Load more.
3. At a version, click Preview — a full screen Preview — … opens. Nothing changes.
4. If it is the right version, click Restore and confirm Restore in the Restore this version? dialog.

You see Restored: …. Nothing is deleted — everything newer stays on the list as its own version. You can name a version with the pencil icon (Rename version, field Name, Save).

Restoring also affects the published website

If the website or funnel is published, restoring a version also changes what visitors see.

A restore brings back the whole website (or the whole funnel), not just one page. The History icon is not shown in SEO and settings and on narrow screens (below 600 px). If you see This deployment keeps no version history., history is not available for this installation.

How to see the page as a visitor

• Width: click the width switch in the centre of the top bar — each click switches to the next one (desktop, tablet 768 px, mobile 390 px). The choice applies to the whole project and returns to desktop when the page is reloaded. It is disabled while editing text and not shown below 900 px width.
• In the browser: click Open in a new tab next to the project name. If the project has a domain, choose Open on the custom domain or Open on the Doubleros address.

An unpublished page opens with the bar Preview — this is not published yet, only you can see it. The preview link is valid for 15 minutes — do not send it to a customer; make the page public via Publishing.

What the Studio looks like on a phone

On a narrow screen (below 900 px) the Studio always shows only one surface at a time. Below the top bar is a row of tabs: Builder (chat), Preview and Settings (the names change with what is open). Open the navigation with projects and pages with Expand menu on the left of the top bar; it closes after you pick something.

• The preview tab shows a spinner while generation runs (Generation in progress) and a dot when the preview has changed (The preview has changed). After an ordinary change you switch to the preview yourself.
• When a website is built for the first time, the Studio switches to the preview by itself once it is done. When selecting an element it goes to the preview and, after the selection, back to the chat.
• On a phone, Enter in the chat does not send the message — use the Send button.

Not available on a phone: the preview width switch, Select area, Edit text, the mode switch (Media, Code editor, Other), dragging the chat width and History (below 600 px). Select element and Insert element work.

The Media, Code editor and Live session modes

Mode	For whom	What it does
Media	everyone	the website's images — see Website and pages
Code editor	advanced users	Project files — editing sections, the layout (shell of every page), design.css, site.json by hand; saved with the Save button in the editor header; errors are underlined
Live session	only after switching on Developer mode in Project settings and SEO	a terminal with the AI over the project itself; costs money while it is open; end it with End session → End session
Other	everyone	opens the project's SEO and settings

The code editor and live session are not available while generation runs. For funnel steps there is no live session yet (A live session for funnel steps is not available on the server yet.). Developer mode is remembered by the browser — it applies to all projects in that browser.

Who can use the editor

What you want to do	Permission needed
see the preview and version history	Projects → View
edit website pages, restore versions	Projects → Edit
edit funnel steps	Funnels → Edit

Common questions and problems with the editor

"Generation failed, please try again". The change did not go through. Send it again.

"Waiting in queue #… — waiting for a free slot...". The server is busy with other changes. Wait; the change starts by itself.

The AI broke my page. Undo the change with History → Undo last change — see How to go back to an earlier version.

The tool bar disappeared. An AI change is running, or the live session or cropping is on.

I inserted a button but it is not on the page. The button is in Prepared changes. Send the chat.

"Up to 8 changes can be prepared at once — run them first." Send the chat, then prepare more.

"Some changes did not go through — they are still prepared, try running them again." Send the chat again.

"The video could not be changed — the page has moved on." Reload the preview and try again.

I do not see the mode switch. You are on a phone, or the AI service is not available at the moment.

I see the changes but customers do not. The website or funnel has not been published yet — the changes are in the draft. Publish it (Publishing). On a website that is already published, changes show at once.

I closed the Studio during a change. The change keeps running. When you open the project, the Studio rejoins it.

Related

• Website and pages
• Funnels
• Forms
• Publishing
• Project settings and SEO
• AI credits