Back to Guidesxeditai
Beginner15-20 minutes

The Editable Story - Core Editing Features

Master the 8 essential editing features: section manipulation, rich text formatting, regeneration, branding, and professional PDF export.

Overview

Unlike traditional AI chat interfaces where outputs are locked in conversation bubbles with no editing capability, xeditai creates editable documents with powerful section manipulation, rich formatting, regeneration, branding, and professional export capabilities.

8 Core Editing Features You'll Master

1. Copy Section - Duplicate sections with one click
2. New Section - Add sections on-the-fly
3. Drag & Drop - Reorder sections freely
4. Rich Text Edit - Font, size, color control
5. Add Image - Insert visual content
6. Regen Section - Save 60%+ cost
7. Branding & Assets - Corporate identity
8. Export to PDF - Professional output

đź’ˇ What's Next?

After mastering these editing features, Guide 2: Cloud Persistence & Context Hierarchy will show you how to organize specs hierarchically (L1/L2/L3), import content, and manage versions across your team.

Prerequisites

  • xeditai account created (sign up at xeditai.com) and subscribed to a plan
  • Basic understanding of AI prompts

Initial Setup

Access Workspace & Configure Settings

  1. Navigate to xeditai dashboard, click "Ready to create" or go to /authoring
  2. Authoring page layout has left pane that contains Prompt Area and Context Tree and right pane that contains xeditai Response area
  3. Verify default configuration for prompt to execute for e.g.Mode is set to "Single" "Model" and "Template" is selected
  4. Click the "Mode Overlay" button (or Lab/Settings icon) to open configuration panel
  5. In the Lab settings section:
    • Select Template: "Editorial Blog" from dropdown
    • Select Model: Choose a model (e.g., "Google: Fast and Effective or Open Top Notch Thinker" )
  6. Click "Apply Configuration" button to save your settings
  7. Alternative: Press Esc key, click X button (top-right corner), or click Cancel (bottom-left) to exit without saving changes
  8. In the prompt textarea, type: "create wellness blog for morning routines"
  9. Click "Generate" to create a sample document with 3-4 sections
SCREENSHOT-01

Full authoring workspace showing: Left side has Mode Overlay panel open (400px wide, dark background) with Lab settings expanded. Template dropdown shows 'Editorial Blog' selected. Model dropdown shows 'OpenAI o1' selected. At bottom of overlay: 'Apply Configuration' button (cyan), 'Cancel' button (gray) on left, and X button visible in top-right corner of overlay. Behind the overlay, prompt textarea visible with 'create wellness blog for morning routines' entered. Right side shows workspace ready for generation.

SCREENSHOT-01B

Workspace after generation: Left side shows closed Mode Overlay with prompt 'create wellness blog for morning routines' in textarea and Generate button below. Right side shows generated document with 4 section cards: 'Introduction', 'Morning Routine Steps', 'Benefits', 'Conclusion'. Each section card has section name at top, formatted content below (bold headings, bullet points), and toolbar icons (⚡ lightning, 📄 copy, 🗑️ trash) in section header.

The 8 Core Features

1

Copy Section

Duplicate entire sections with all formatting, content, and structure preserved.

  1. Find the copy icon (➕⬆️📄) in any section header (top-right corner)
  2. Click the copy above icon on the "Morning Routine Steps" section
  3. Copy of same section appears above the section
  4. You can edit, or regenerate to get enhanced content and compare against the section below, regeneration can be done with other models too!
SCREENSHOT-02

Close-up of section header showing three icon buttons aligned right: lightning bolt (⚡) in gray, copy icon (📄) highlighted with cyan glow and cursor hovering over it, trash icon (🗑️) in gray. Below the section, toast notification visible in bottom-right corner reading 'Section copied to clipboard' with green checkmark icon.

2

Add New Section

Insert custom sections anywhere in your document with AI-generated content matching your context.

  1. Click inside the body of any section
  2. A blue ➕⬆️ button appears above the body along with floating textformating toolbar and Regen, GenSec buttons
  3. Click the "" button
  4. New section appears above with empty body and titled "Add New Section"
  5. Enter section name: "Common Mistakes"
  6. Add prompt guidance in richtext body: "List 5 mistakes people make with morning routines"
  7. Click GenSec button "Generate Section"
  8. New section inserts wmith AI-generated content about common mistakes
  9. Notice: The AI maintains context from surrounding sections
SCREENSHOT-03

Two section cards ('Benefits' above, 'Conclusion' below) with 40px vertical gap between them. In the center of the gap, a cyan circular button with '+' icon (32px diameter) is visible, glowing slightly. Modal dialog overlays center of screen (500px wide) with title 'Add New Section', section name input field showing 'Common Mistakes', optional guidance textarea showing 'List 5 mistakes people make with morning routines', and cyan 'Generate Section' button at bottom.

SCREENSHOT-03B

Two section cards ('Benefits' above, 'Conclusion' below) with 40px vertical gap between them. In the center of the gap, a cyan circular button with '+' icon (32px diameter) is visible, glowing slightly. Modal dialog overlays center of screen (500px wide) with title 'Add New Section', section name input field showing 'Common Mistakes', optional guidance textarea showing 'List 5 mistakes people make with morning routines', and cyan 'Generate Section' button at bottom.

3

Drag & Drop Sections

Reorder your document structure freely by dragging sections to new positions.

  1. Click and hold the section header of "Common Mistakes"
  2. Cursor changes to a "move" icon
  3. Drag upward toward "Morning Routine Steps" section
  4. Other sections dim slightly (opacity 0.5) during drag
  5. The dragged section has elevated shadow and slight transparency
  6. Release to drop the section in new position
  7. Section smoothly animates to new location
SCREENSHOT-04

Document showing drag-and-drop in progress: 'Common Mistakes' section card is being dragged (has opacity 0.7, elevated shadow, cursor shows move icon). A bright cyan horizontal line (3px thick, full width) appears between 'Introduction' and 'Morning Routine Steps' sections indicating drop target. All other sections ('Morning Routine Steps', 'Benefits', 'Conclusion') are dimmed with opacity 0.5.

4

Rich Text Editing (Font, Size, Color)

Full control over text formatting with inline editor—change fonts, sizes, colors, and styles.

  1. Click anywhere inside the "Morning Routine Steps" section content
  2. Inline editor activates—section border glows cyan
  3. Formatting toolbar appears above the text with controls:
    • B, I, U buttons (Bold, Italic, Underline)
    • Font dropdown (Roboto, Montserrat, Playfair Display, etc.)
    • Size controls (+/- buttons or dropdown)
    • Color picker (palette with common colors)
    • List buttons (bullet, numbered)
  4. Select a heading in the content
  5. Click Font dropdown → Select "Playfair Display"
  6. Click Size + to increase to 14px
  7. Click Color picker → Select blue (#3b82f6)
  8. Heading updates immediately with new styling
  9. Click outside section to deactivate editor
SCREENSHOT-05

'Morning Routine Steps' section in edit mode with cyan glowing border. Floating formatting toolbar at top of section shows: B (bold), I (italic), U (underline) buttons in row, Font dropdown showing 'Montserrat' selected, Size dropdown showing '20px', Color picker button with blue color swatch, Bullet list icon, Numbered list icon. All toolbar buttons are small (16px icons), gray when inactive, cyan when hovered. Below toolbar, section content shows heading 'Wake Up Early' in Montserrat font, 20px size, blue color (#3b82f6), with text cursor blinking. Other text remains default styling.

5

Add Image

Insert images directly into sections for visual content, diagrams, or illustrations.

  1. With editor active in "Morning Routine Steps" section, look for Image icon in formatting toolbar
  2. Click the Image icon
  3. Image placeholder appears in content at cursor position
  4. Placeholder shows: Gray box with image icon and "Upload Image" text
  5. Click placeholder to open upload dialog
  6. Upload an image file (PNG, JPG) or paste image URL
  7. Image appears in section with resize handles on corners
  8. Drag corners to resize image as needed
  9. Image is embedded in section content
SCREENSHOT-06

Section content showing inserted image placeholder: gray rectangular box (400px wide, 300px tall) with dashed border, image icon (48px) centered, 'Upload Image' text below icon, and 'Click to upload or paste URL' subtitle in smaller text. Above the placeholder, formatting toolbar shows Image icon (🖼️) highlighted in cyan indicating it was just clicked. Below placeholder, regular section text continues.

6

Regenerate Section (Save 60%+ Cost)

Improve individual sections without rewriting the entire document—drastically reducing token usage and cost.

  1. Read the "Benefits" section—suppose it's too brief
  2. Click lightning bolt icon (⚡) in section header
  3. Modal appears: "Regenerate Section and Generate Section"
  4. Modal shows options:
    • Model: Current model pre-selected (can change)
    • Tone: Radio buttons for 🎯 Precise, ⚖️ Balanced, 🎨 Creative
    • Instructions: Optional textarea for guidance
  5. Select tone: ⚖️ Balanced
  6. Add instruction: "Expand to include 8 specific benefits with examples"
  7. Click on section to see Regen and GenSec buttons. Click on "Regenerate Section"
  8. Only "Benefits" section updates with expanded content
  9. All other sections remain unchanged
  10. Click on +New section above to see new section with empty body, type in a prompt andClick on "Generate Section"
  11. Only new section updates with generated content
  12. All other sections remain unchanged

Cost Savings Example

Full document regeneration: 4 sections Ă— 600 tokens = 2,400 tokens

Single section regeneration: 1 section Ă— 600 tokens = 600 tokens

đź’° Savings: 75% cost reduction (1,800 tokens saved)

SCREENSHOT-07

Modal dialog (500px wide, centered) titled 'Regenerate Section' with subtitle showing section name 'Benefits'. Form contains: Model dropdown showing current model selected, Tone selector with 3 radio options ('🎯 Precise (temp 0.2)', '⚖️ Balanced (temp 0.6)' SELECTED with blue ring, '🎨 Creative (temp 0.9)'), Instructions textarea filled with 'Expand to include 8 specific benefits with examples', cyan 'Regenerate Section' button at bottom. Modal has dark background, subtle shadow, rounded corners.

7

Branding & Assets

Apply your corporate identity to all exports—logos, headers, footers, colors, and fonts.

  1. Click "Export" button in toolbar
  2. Export slideout menu appears with options: PDF, DOCX, PPTX
  3. Click "Branding" tab in slideout (before exporting)
  4. Branding panel opens with configuration options:
    • Logo Upload: Click to upload company logo (PNG, SVG)
    • Header Text: Input field for header (e.g., "CONFIDENTIAL")
    • Footer Text: Input field for footer (e.g., "© 2026 Company Name")
    • Accent Color: Color picker for primary brand color
  5. Upload logo: Click "Upload Logo" → Select "company-logo.png"
  6. Set header: Enter "CONFIDENTIAL - Internal Use Only"
  7. Set footer: Enter "© 2026 Wellness Corp"
  8. Select theme: Choose AntiSpecGenAI
  9. Settings auto-save and apply to all future exports
SCREENSHOT-08

Export slideout expanded (400px wide) with two tabs at top: 'Export Options' and 'Branding' (BRANDING TAB ACTIVE with cyan underline). Branding panel shows: Logo upload area with dashed border and uploaded logo preview 'company-logo.png' (120×40px), Header Text input field showing 'CONFIDENTIAL - Internal Use Only', Footer Text input field showing '© 2026 Wellness Corp', Accent Color picker showing blue swatch (#3b82f6), Font dropdowns for Heading Font (Montserrat selected) and Body Font (Roboto selected). All form elements have dark backgrounds, cyan accents on focus.

8

Export to PDF

Generate professional, print-ready PDFs with your branding applied—powered by Playwright for high-fidelity rendering.

  1. With branding configured, click "Export Options" tab in slideout
  2. Three export options visible: PDF, DOCX, PPTX
  3. Click "đź“„ Export to PDF"
  4. Progress modal appears: "Generating PDF..." with animated spinner
  5. System converts document to CDM blocks → HTML → PDF via Playwright
  6. PDF downloads brings up a download dialog with file name, save to desired location
  7. Open PDF to verify:
    • Company logo in this case xeditai in header (top-left)
    • "XeditAI - 2x your AI work" text in header (top-center)
    • "Manage Cross Model Gen AI" in footer (bottom-center)
    • Page numbers in footer (bottom-right)
    • Accent theme applied
    • All formatting preserved as much as possible(bold, lists, tables, images)
    • Proper page breaks between sections
SCREENSHOT-09

Split view: Left shows Export slideout with 'Export to PDF' button highlighted in cyan. Right shows progress modal overlay (300px wide, centered) with title 'Generating PDF...', animated circular spinner (40px), progress bar at 75%, and status text 'Rendering page 2 of 3...' below spinner. Modal has dark background with subtle shadow.

SCREENSHOT-10

PDF viewer (full screen) showing generated PDF. Header area shows: company logo top-left (100×30px), 'CONFIDENTIAL - Internal Use Only' text centered in gray, light horizontal line below. Main content shows: document title 'Morning Wellness Routine' in large font (28px) with blue accent color, 'Introduction' section heading (20px bold), paragraph text (12px) with proper line spacing. Footer shows: '© 2026 Wellness Corp' centered, page number '1' right-aligned. Clean white background, professional typography, 1-inch margins all sides.

Expected Results

After completing this guide, you've mastered all 8 core editing features:

Copied and pasted sections with preserved formatting
Added custom sections with contextual AI generation
Reordered sections via drag-and-drop
Formatted text with custom fonts, sizes, colors
Inserted images into section content
Regenerated individual sections (75% cost savings)
Configured branding with logo, headers, footers
Exported professional PDF with branding applied

Key Concepts Learned

ConceptWhat It Means
Section-Level OperationsCopy, add, reorder, and regenerate sections independently—core to xeditai's editable story philosophy.
Rich Text ControlFull formatting control (font, size, color, images) within sections—not limited to plain text.
Cost-Optimized RegenerationRegenerate one section instead of entire document, saving 60-75% in token usage and cost.
Branding ConfigurationApply corporate identity (logos, headers, footers, colors) to all PDF, DOCX, PPTX exports automatically.

Troubleshooting

Issue: Section copy/paste not working

Solution:

  • Verify you clicked the copy icon (đź“„) in section header, not the content
  • Look for toast notification confirming "Section copied to clipboard"
  • Ensure you're clicking "+" button between sections, not inside a section
  • Try refreshing the page if paste menu doesn't appear

Issue: Drag-and-drop not triggering drop zones

Solution:

  • Click and hold section header for 500ms before dragging
  • Drag slowly—fast movements may not register drop zones
  • Ensure cursor stays on the section card during drag
  • Try using keyboard: Tab to section, Space to grab, Arrow keys to move, Space to drop

Issue: Rich text toolbar not showing

Solution:

  • Click inside the section content area to activate edit mode
  • Select text first—toolbar appears on text selection
  • If toolbar is cut off, scroll the section into full view
  • Check browser zoom is at 100% (toolbar may not fit at 150% zoom)

Issue: PDF export fails or shows "Generation Error"

Solution:

  • Check if document has unsaved edits—save first before exporting
  • Large documents (20+ sections) may take 30-60 seconds—wait for progress bar
  • If branding logo is too large (>2MB), reduce file size or use PNG instead of SVG
  • Try exporting without branding first to isolate the issue

Issue: Regenerated section loses formatting

Solution:

  • Regeneration produces new LLM output—manual formatting is not preserved
  • Use "Edit" instead of "Regenerate" if you only need minor text changes
  • After regenerating, apply formatting again using rich text toolbar
  • Consider saving a version before regenerating, so you can restore if needed

Next Steps

Guide 2: Cloud Persistence & Context Hierarchy

Learn how to organize specs hierarchically (L1/L2/L3), import content, save versions, and manage cloud persistence across your team.

đź“š View All Guides

Return to the guides index to explore all available tutorials and workflows.

Related Resources

Video Tutorial: Watch Video 1: The Editable Story

Documentation: Section Regeneration Deep Dive