The 10Web AI Editor is an interactive website editing environment where you can preview your website, ask AI to make changes, edit selected elements, review code changes, manage pages and posts, and publish updates to your live website.
You can use the AI Editor to make changes by chatting with AI, editing elements visually, adjusting your website theme, importing designs, reviewing previous changes, and restoring earlier versions when needed.
Before you begin
Before using the AI Editor, make sure your website has already been created or regenerated with 10Web AI. Once the website is available in the editor, you can start making changes using AI prompts, visual editing tools, code editing, or global theme settings.
Note:
AI editing requests sent through the AI chat, use AI credits from your subscription plan.
Website menu
In the top left corner of the AI Editor, click your website name to open the website menu. From this menu, you can access your dashboard, view AI credit usage, regenerate the website, and manage appearance and notification settings.
Go to dashboard
Click Go to dashboard to open your 10Web Dashboard.
AI credit usage
The AI credit usage section shows how many AI credits have been used from your subscription plan. Each AI request costs 1 credit.
Regenerate website
Use Regenerate to rebuild the entire website with AI. This option is useful when you want to start over and create a new AI-generated version of the website.
To regenerate your website:
- Click your website name in the top left corner.
- Click Regenerate.
- Review the confirmation message.
- Type Regenerate in the confirmation field.
- Click Regenerate website.
Important:
Regenerating the website resets your WordPress website, removes all chat history and AI-driven changes, and rebuilds the entire website from scratch. This action is for regenerating the whole website, not individual pages or sections.
Appearance
Use Appearance to change the AI Editor interface mode. You can choose between:
- System
- Light
- Dark
Notifications
Use Notifications to manage sound and browser notifications for AI tasks.
You can set the generation complete sound to:
- First generation
- Always
- Never
You can also enable browser notifications to receive an alert when 10Web AI completes a task.
Editor modes
The top toolbar lets you switch between previewing, editing code, visually editing the page, and managing the website theme.
Preview mode
Preview mode is selected by default. It lets you preview the website as visitors will see it.
Code mode
Code mode opens the website code editor. You can browse website files and make code-level changes to the website.
Important:
Code mode is intended for users who are comfortable editing code. Code changes can affect your website layout, design, or functionality.
Edit mode
Edit mode opens the Visual Editor. From the Visual Editor, you can select elements directly on the page and edit them. For example, you can select text and update its style, or select an image and replace it.
You can also open the Visual Editor by clicking the Edit button at the bottom of the AI chat panel.
Note:
For detailed instructions on editing selected elements, see our Visual Editor article.
Theme settings
Click the theme icon to manage your website theme. From the theme panel, you can edit the current theme or choose a different theme.
The theme panel lets you update:
- Colors
- Fonts
- Radius
- Shadow
Radius options include None, Small, Medium, and Large. Shadow options include None, Small, Medium, Large, Solid, and Custom.
Click Change theme to open the available themes. Theme previews show colors, typography, and button styles so you can choose the design direction that best fits your website.
Note:
Theme changes are applied globally across your website. For example, changing the radius updates radius styling throughout the site, not only on the currently selected page or element.
Navigate pages and posts
Use the page/post selector in the top toolbar to switch between website pages and posts.
- Click the content type dropdown.
- Choose Pages or Posts.
- Open the next dropdown to view the available pages or posts.
- Click the page or post you want to load in the editor.
Click the Refresh page icon next to the selector to reload the currently opened page or post in the editor.
Preview your website
The AI Editor includes preview controls for checking how your website looks on different screen sizes.
You can:
- Switch between desktop and mobile preview.
- Open the website in full-screen preview.
To exit full-screen preview, press Esc on your keyboard or click the blue exit full-screen icon at the top of the screen.
Use the AI chat
The AI chat panel is where you can ask AI to make changes to your website. You can type your request or use voice input.
For example, you can ask AI to:
- Change text on a page
- Generate or replace an image
- Create a new page
- Add a new section to the current page
- Update layout, content, or design
The chat panel also shows AI-generated changes, manual edit results, and modification cards. These cards can include options to preview the change, open the code diff, or restore a previous version.
Ask for quick changes to a selected element
When you select an element in the Visual Editor, you can use Ask for quick changes to send that specific element as context to AI.
Once an element is selected, it appears in the chat input. This helps AI understand which element you want to update.
Note:
The Edit button at the bottom of the chat panel opens the same Visual Editor as the Edit option in the top toolbar.
Add references for AI
Click the + icon in the chat panel to add references for AI. These references help AI better understand what you want to create or recreate.
Import from Figma
Use Import from Figma to create or update a page based on a Figma design. This option is mainly used for adding new pages, but it can also be used to update the currently opened page.
To import from Figma:
- Open your design in Figma.
- Click the specific page you want AI to use.
- Copy the URL of that selected page.
- Return to the AI Editor.
- Click + > Import from Figma.
- Paste the Figma page link.
Important:
Make sure to copy the URL of the specific Figma page you want to import. If you paste the general Figma project or file link, the import may fail or may not use the expected design.
Code snippet
Use Code snippet to provide code as a reference for AI.
Note:
Code snippets are used as references for AI. The pasted code is not inserted directly into your website. AI uses the snippet to recreate a similar section, layout, or design in your website.
Take a screenshot
Use Take a screenshot to capture a visual reference from an open browser tab, window, or your entire screen. After you choose what to share, the screenshot is added to the chat so AI can use it as a reference.
Attach media
Use Attach media to upload an image reference. AI can use the image to help create or update sections, layouts, images, or design styles.
Review changes
After AI or manual edits are applied, the chat panel shows a modification card. Depending on the change, the card may include:
- Preview
- Code diff
- Restore
Preview a change
Click Preview to preview the website after that modification.
View code diff
Click Code diff to review the code changes made by a specific modification.
The Code diff view first shows the list of modified files. Each file appears as a collapsible item. Open a file to review the exact code changes.
Removed code is highlighted in red, and added code is highlighted in green. Click Back to preview to return to the website preview.
Restore a modification
Click Restore on a modification card to restore that version of the website.
Use history
Click the history icon in the top toolbar to open the history panel. The history panel shows unpublished edits and previous AI or manual modifications.
Click a history item to preview that version of the website. When previewing a previous version, a Restore this version button appears at the top right of the editor.
To restore a previous version:
- Click the history icon in the top toolbar.
- Select the version you want to review.
- Preview the selected version.
- Click Restore this version.
Click Back to latest to return to the latest version without restoring.
Important:
Restoring a version rolls the website back to that specific point in history.
Open WordPress shortcuts
Click the WordPress icon in the top toolbar to open WordPress shortcuts.
The menu includes:
- WP admin
- Form submissions
- Posts
Each option redirects you to the related section in the WordPress dashboard.
Save and publish changes
Saving and publishing are separate actions in the AI Editor.
Click Save to save manual changes made in the editor. Click Publish to publish saved changes to the live website.
Note:
The Publish button is global. It publishes all saved, unpublished changes across the website, not only the currently opened page or post.
For example, if you manually change text in the Visual Editor or Code mode, click Save first. Then click Publish to push the saved changes live.
To publish your changes:
- Make your changes in the AI Editor.
- Click Save.
- Click Publish.
- Click Publish changes.
Important:
If you make manual edits and try to switch view, change page, change mode, or leave without saving, the AI Editor will ask whether you want to save your changes. If you leave without saving, your recent edits will be lost.