Skip to main content

Understanding the Editor

The Docsio editor is where you review, refine, and manage your documentation after it has been generated. It is a three-panel workspace designed to let you make changes through the AI agent and see the results instantly.

Editor Layout​

The editor is divided into three main areas:

1. Left Panel: File Tree​

The left sidebar shows all of your documentation pages organized by category. Categories appear as collapsible folders and include:

  • Getting Started -- Quickstart, installation, and configuration pages
  • Features -- Individual feature documentation
  • API Reference -- API overview, authentication, and endpoint docs (if applicable)
  • Integrations -- Third-party integration pages (if applicable)
  • Guides -- How-to guides, examples, FAQ, and other reference pages

Click any page in the tree to navigate the preview to that page. You can also create new pages and delete existing ones directly from the file tree.

2. Center Panel: AI Agent Chat​

The center panel is an AI agent that can make any change to your documentation site. Instead of manually editing Markdown files or configuration, you describe what you want in plain English and the agent handles the implementation.

The agent has full access to your documentation project. It can read, write, and delete files, search across your content, and run commands -- all reflected instantly in the live preview.

3. Right Panel: Live Preview​

The right panel shows a live preview of your published documentation site. It renders exactly as your visitors will see it, including your branding, navigation, and styling.

When the agent makes changes -- updating a page, adjusting colors, modifying the navbar -- the preview refreshes automatically. You see the result of every change in real time without needing to rebuild or reload.

The AI Agent​

The AI agent is the primary way you interact with your docs in the editor. Here is what it can do:

Content Changes​

  • Rewrite, expand, or shorten existing pages
  • Add entirely new documentation pages
  • Remove pages you do not need
  • Add code examples, tables, callouts, and other formatting

Design and Branding​

  • Change your primary color and color scheme
  • Update fonts and typography
  • Customize CSS for specific elements or the entire site
  • Adjust spacing, layout, and visual hierarchy
  • Update the navbar with new links
  • Restructure the sidebar navigation
  • Rename pages and categories
  • Reorganize content across sections

Site Configuration​

  • Modify site-wide settings (title, tagline, footer)
  • Install packages or plugins
  • Adjust any Docusaurus configuration

Suggestion Prompts​

When the chat is empty, the agent shows six suggestion prompts to help you get started:

  • Change brand colors -- Adjust your site's color scheme to match your brand
  • Add a new page -- Create additional documentation pages
  • Rewrite content -- Improve existing page content
  • Update navbar -- Add links or modify navigation
  • Custom CSS -- Fine-tune the visual design
  • Add code examples -- Include practical code samples in your docs

Click any suggestion to use it as a starting prompt, or type your own request.

Status Indicators​

As the agent works, you will see real-time status indicators in the chat:

  • "Thinking..." -- The agent is reasoning about your request and deciding what changes to make
  • "Working..." -- The agent is actively making changes to your site

For each file operation, an inline status shows what the agent is doing:

  • Reading [filename]... / Read [filename] -- The agent is reading a file to understand its current content
  • Writing [filename]... / Updated [filename] -- The agent is modifying a file
  • Removing [filename]... / Removed [filename] -- The agent is deleting a file
  • Scanning project files... / Scanned project files -- The agent is listing directory contents
  • Searching for "[query]"... / Searched for "[query]" -- The agent is searching across your content

Each status indicator includes a spinner while in progress and a checkmark when complete, so you always know where the agent is in its work.

Upload files for reference

You can upload images and documents to the agent using the upload button in the chat input.

  • Images (PNG, JPG, etc.) are added to your site's static assets and can be referenced in any page
  • Documents (PDF, DOCX, TXT, MD) have their text extracted and shared with the agent as context, so it can use that content to write or improve your docs

Toggling Panels​

The editor header includes toggle buttons for the Files panel and the Agent panel. You can hide either panel to give more screen space to the preview or the agent, depending on what you are working on at the moment.

Publishing from the Editor​

The top-right corner of the editor shows your publish status:

  • If your site has not been published yet, you will see a Publish button that takes you to the publish flow
  • If your site is already published and you have made changes, you will see "Unpublished changes" with a Merge Changes button to deploy your updates
  • If your site is published and up to date, you will see a green "Published" indicator and a View Site link

This means you can iterate on your docs entirely within the editor -- make changes with the agent, see them in the preview, and publish when you are ready -- all without leaving the page.