Once your website is generated by AI, you will enter the Kanorio website editor. This is your primary workspace for modifying website content: editing text, swapping images, checking layouts across devices, and preparing for publication—all can be done here.
Don't worry if there are many buttons at first. Just remember one principle: If you want to change something, click on it. The editor will display the corresponding settings based on the content you select.
The toolbar at the top of the screen is called the Topbar.
↶ Undo, ↷ Redo buttons, along with Version History (to preview and restore versions from the past 30 days).When the window is narrow, the right-side buttons show only icons; hover over them to see their names. On mobile, the Topbar retains the back button, undo/redo, and device/mode toggles; the bottom navigation bar holds "Publish, Modules, Layout, Pages" and "More" (tap to access Design, Brand, and Version History).
You don't need to memorize every button. Simply look for the corresponding function in the toolbar when you need to complete a task.
The center is your website preview. It shows the page as your visitors will see it, rather than code or complex settings.
As you modify text, images, layouts, or design in the panels, the preview updates instantly. This "what you see is what you get" approach is known as WYSIWYG.
Hover over a module in the preview to see a thin outline, the module name in the top-left, and "Edit" or "⋯" (more actions like move up/down, move to page, duplicate, hide, or delete) in the top-right.
Clicking a module's name or "Edit" opens the corresponding editing panel on the right. Different modules have different fields, for example:
You don't need to leave the page. On desktop, the panel docks to the right, and the preview adjusts. On narrower screens, the desktop site scales down (zoom ratio shown in the bottom-right) while maintaining the desktop layout.
The module currently being edited is highlighted with a blue outline and an "Editing" label. If you scroll the module out of view, a "Back to [Module Name]" button appears at the bottom of the preview.
When editing existing modules, the panel header shows "Saving... → Saved" and ↶ Undo / ↷ Redo buttons. Simply close the panel when finished. For new modules selected from the directory, click "Add to site" at the bottom.
↶ Undo in the panel or Topbar.If you're unsure which category a module belongs to, just click it; the editor will show the available settings.
This guide covers the workspace. To accomplish specific tasks, read the corresponding guides:
Visitors view your site on various devices. The editor provides three previews:
This relates to Responsive Web Design (RWD). The site adjusts its layout automatically, but you should still check for long text, cropped images, or button accessibility.
Switch to mobile preview at least once before publishing. Many visitors access social links via mobile, making the mobile experience critical.
When editing on mobile, you can still switch devices in the toolbar. Tablet and desktop views will scale to fit the screen. If text is too small, click the zoom ratio in the bottom-right to view at "Actual size," scroll to see details, and click again to return to "Fit."
Some settings can be adjusted per device, such as "Items per row." Select the device icon next to the field title to adjust and preview simultaneously.
On mobile or narrow tablets, the editing panel covers the preview. Tap "Preview" in the panel header to collapse it and see the site with unsaved changes; tap "Back to edit" to return.
Toggle between light and dark previews in the toolbar to check text contrast, images, and brand colors.
For example, light gray text on a light background might be hard to read in dark mode. If you find issues, adjust your brand colors, fonts, or appearance mode in "Design".
Modifying existing modules, headers, and footers auto-saves to drafts. Dragging, hiding, or deleting modules also saves immediately. Global changes in "Design" or "Brand" panels require clicking "Save."
Note the difference:
"Saved" does not mean "Live." Always click "Publish" in the top-right after finishing your changes.
For details (including undo/redo and 30-day history), read: Drafts and publishing and Publishing your site for the first time.
Once familiar with the basics, explore these features:
Don't feel pressured to set everything up on day one. Start with your homepage and contact info, then expand.
If your content is nearly ready, check the mobile preview and read Publishing your site for the first time to set your URL and go live.
Yes. Editing existing modules, headers, and footers, as well as dragging, hiding, or deleting modules, auto-saves to drafts. Adding new modules (requires "Add to site") and global settings in "Design" or "Brand" (requires "Save") need manual confirmation. If uploading images, wait for completion before closing the page.
If you close the tab or lose connection while saving, changes are kept in your browser's local storage and will be pushed when you reopen the editor. If the site was modified elsewhere in the meantime, you will be asked whether to apply your changes.
Changes are saved to drafts first. Open "Publish" from the toolbar to sync your current draft to the live site.
Yes. The editor supports mobile, tablet, and desktop. On mobile, back and undo/redo are at the top; publish, modules, layout, pages, and "More" (Design, Brand, History) are at the bottom.
Content, layout, and brand settings are accurate in the preview. Some external services or tracking tools may only load on the live site, so check your live URL after publishing.
Deletion requires confirmation. If you just made a mistake, use ↶ Undo in the Topbar (or ⌘Z / Ctrl+Z) to revert. If you've refreshed or left the page, use "Version History" to restore from the last 30 days (see Drafts and publishing). If you just want to hide content temporarily, use "Hide."
AI features use credits from your plan and may be affected by service status. Check your remaining credits in "Usage" and try again later. Standard text and image editing do not use AI credits.