Web Editor Overview

The web editor is a visual interface for creating, editing, and managing documentation directly in your browser. No local setup required - start writing immediately from your dashboard.

Key capabilities:

• Visual editing: Make changes using a WYSIWYG editor that shows how your content will look when published
• Real-time collaboration: Multiple team members can work simultaneously on the same content
• Auto-save and sync: Changes are automatically saved and synced across your team
• Component integration: Add callouts, code blocks, and other components using slash commands
• Dual editing modes: Switch between visual and markdown modes based on your preference

Web Editor Workflow

Here's how you'll typically work in the web editor:

1. Access Your Project

Navigate to your Documentation.AI dashboard and select your project. Click Web Editor to enter the editing interface.

2. Navigate to Your Content

Use the file explorer sidebar to:

• Open an existing page for editing
• Create a new page by clicking the + button
• Browse through your documentation structure
• Search for specific pages using the search function

3. Choose Your Editing Mode

Switch between editing modes using the toggle in the editor toolbar:

• Visual mode: For WYSIWYG editing with immediate preview
• Markdown mode: For direct MDX code editing

4. Create and Edit Content

In Visual Mode:

• Type content directly and see real-time formatting
• Press / to open the component menu
• Select from available blocks: headings, lists, callouts, code blocks, images
• Drag and drop to reorganize content blocks
• Use the formatting toolbar for text styling

In Markdown Mode:

• Write directly in MDX syntax
• Access Documentation.AI components using JSX syntax
• Add custom HTML when needed
• View syntax highlighting for better readability

5. Preview Your Changes

Visual mode shows you exactly how your content will appear on your published site. Use this to:

• Verify formatting and layout
• Check component rendering
• Ensure images and media display correctly
• Test responsive behavior

6. Save and Publish

Your changes are automatically saved as you type. When ready to publish:

• Review your content in preview mode
• Click Publish to deploy changes to your live documentation
• View your published page to confirm everything looks correct

Editor Modes

Use the toggle in the editor toolbar to switch between editing modes:

Visual Mode

Visual mode provides a WYSIWYG editing experience where changes you make in the editor are exactly what will appear on your published documentation site.

Working in Visual Mode:

• Type content directly and see immediate formatting
• Press / to open the component menu
• Select from available blocks: headings, lists, callouts, code blocks, images
• Drag and drop to reorganize content blocks
• Use the formatting toolbar for text styling
• See live preview of how components will render

Best for: Content creators, writers, and anyone who prefers seeing immediate visual results.

Markdown Mode

Markdown mode provides direct access to the underlying MDX code of your documentation. This mode is ideal when you need precise control over component properties.

Working in Markdown Mode:

• Write using standard markdown syntax
• Access Documentation.AI components with JSX syntax:
  <Callout type="info">
    This is an info callout
  </Callout>
  

• Add custom HTML when needed for advanced formatting
• Edit component properties directly
• View syntax highlighting for better code readability
• Copy and paste markdown content from other sources

Best for: Developers, technical writers, and users who need precise control over component properties.

Slash Commands and Components

Type / anywhere in your document to open the component menu:

Basic Content:

• Text blocks (paragraphs, headings)
• Lists (bulleted, numbered, to-do)
• Dividers and spacers

Rich Content:

• Code blocks with language selection
• Images and file uploads
• Tables and data displays
• Quotes and citations

Documentation.AI Components:

• Callouts for important information
• Expandable sections for detailed content
• Parameter and response field documentation
• API request and response examples

Media and Embeds:

• Image uploads with automatic optimization
• Video embeds from popular platforms
• External content iframes

Next Steps

Explore specific web editor features:

• Organization and Navigation: Structure your content with proper hierarchy
• Images and Media: Add and manage visual content
• Collaboration: Work with team members effectively
• Publishing: Deploy your documentation changes
• Keyboard Shortcuts: Speed up your editing workflow
• Troubleshooting: Resolve common issues

For advanced customization and local development workflows, see the code editor overview.