UI Reference

Last updated: March 2025 · DocCraft v1.4

A complete reference for every panel, control, and setting in DocCraft. Use this guide when you want to understand what a specific button or option does, or when a help article refers to a UI element by name.

Sections

Dashboard

The Dashboard is the home screen you see after signing in. It lists all your documents and provides quick access to generate new ones.

Element Description
New Document button Opens the Input Panel to start a new generation. Keyboard shortcut: N.
Projects table Lists all documents you have generated. Columns: Title, Document Type, Last Modified, Status. Click any row to open the document in the editor. Right-click for options: Rename, Duplicate, Archive, Delete.
Credit meter Shows remaining document generations for the current billing period. Free tier: 10/month. Paid tiers show unlimited or a higher allotment. Click the meter to open the billing panel.
Filter bar Filters the project table by document type. Select one or more types (API Reference, README, User Guide, Admin Guide, Release Notes) to narrow the list. The filter state is not saved between sessions.
Search Full-text search across document titles. Does not search document content. Shortcut: /.
Recent exports Shows the five most recent exported files with download links. Exports are retained for 30 days from the date of export.

Input Panel

The Input Panel controls what source material DocCraft uses for generation. It opens when you click New Document and consists of three tabs and a document type selector.

Input tabs

Tab Use when Accepted input
Upload You have a file on disk .yaml · .yml · .json · .md · .txt
Paste You want to paste text directly Any plain text, YAML, JSON, or markdown
URL Your source is online Public GitHub repo URL, raw file URL, or publicly accessible OpenAPI URL

Document type selector

Type Best input What DocCraft generates
API Reference OpenAPI spec Overview, auth guide, endpoint reference, error catalog, multi-language code samples
README GitHub repo URL or code Title + badges, description, installation, usage, configuration table, contributing guide
User Guide Product description or spec Getting started, feature walkthroughs, task-based how-to guides, FAQ
Admin Guide Config file or deployment spec System requirements, installation, configuration reference, security, maintenance
Release Notes Commit list or changelog Versioned release entries with New Features, Improvements, and Bug Fixes sections

Advanced options

Expand Advanced options below the document type selector to access generation settings.

Option Values Effect
Tone Technical · Professional · Friendly Controls prose style. Technical uses precise language and minimal hedging. Professional is formal but accessible. Friendly uses conversational language with contractions.
Include code samples On (default) · Off When enabled, DocCraft generates curl, Python, JavaScript, and Go samples for API Reference documents. Has no effect on README or User Guide documents.
Authentication treatment Dedicated section · Inline API Reference only. Dedicated section creates a standalone authentication guide before the endpoint reference. Inline notes auth requirements on each endpoint instead.
Output length Concise · Standard (default) · Detailed Controls the verbosity of generated prose. Concise produces shorter descriptions with less explanatory context. Detailed adds more background and reasoning to each section.

Document Editor

The Document Editor opens automatically when a generation completes. It has three main areas: the Outline panel on the left, the editor canvas in the center, and contextual panels on the right (Regenerate, Export, Comments).

┌─────────────────────────────────────────────────────────┐ │ [New] [Templates] [Regenerate] [Export] [...] │ ← Toolbar ├──────────────┬──────────────────────────┬───────────────┤ │ │ │ │ │ Outline │ Editor canvas │ Side panel │ │ panel │ (editable content) │ (contextual) │ │ │ │ │ │ ▼ Overview │ # Overview │ Regenerate │ │ Auth │ DocCraft converts... │ Export │ │ ▼ Endpoints │ │ Comments │ │ GET /pay │ > Callout │ │ │ POST /pay │ ## Authentication │ │ │ ... │ ... │ │ └──────────────┴──────────────────────────┴───────────────┘

Editor Toolbar

The toolbar runs along the top of the editor. Before we describe the buttons, note that the toolbar state is context-sensitive — some buttons are grayed out when nothing is selected or when the document type doesn't support a given feature.

Button Action Shortcut
Undo / Redo Standard undo and redo for editing operations. Works on text edits, section moves, and template applications. Ctrl+Z / Ctrl+Y
Templates Opens the Template Browser side panel. Lets you apply a preset structure to the current document. See Apply a documentation template.
Regenerate Opens the Regenerate Panel for the currently selected section. Active only when a section or paragraph is selected. See the Regenerate Panel section below. Ctrl+R
Export Opens the Export Panel. Available at all times, regardless of what is selected in the editor. See the Export Panel section below. Ctrl+E
View mode Toggles between Edit (rich text with toolbar) and Raw (plain markdown source). All changes sync between modes — edits in Raw mode appear in Edit mode and vice versa. Ctrl+`
More (⋯) Opens a dropdown with less-frequent actions: Rename document, Duplicate, Archive, View export history, Print preview.

Outline Panel

The Outline Panel on the left side of the editor shows a hierarchical tree of the document's sections. Clicking a section name in the outline scrolls the editor canvas to that section and selects it as the active section.

Control Description
Section tree Mirrors the H1, H2, and H3 headings in the document. Collapse or expand subtrees by clicking the triangle icon. Indentation reflects heading hierarchy.
Drag handles Hover over a section in the outline to reveal a drag handle (⋮⋮). Drag sections to reorder them within the document. Reordering in the outline reorders the corresponding content in the canvas.
Section actions (…) Right-click or hover over a section in the outline to reveal the section actions menu: Rename heading, Regenerate section, Delete section, Add section below.
Active section indicator A blue left border highlights the section currently visible in the viewport — the outline scrolls to keep this visible if the document is long. This also drives which section the Regenerate button acts on.

Regenerate Panel

The Regenerate Panel opens on the right side of the editor when you click Regenerate or use the section actions menu. It lets you revise individual sections without reprocessing the entire document.

Control Description
Instruction field Free-text field for revision instructions. Be specific. Examples: "Make this 50% shorter", "Add a warning callout about rate limits", "Rewrite using second person (you) instead of third person".
Quick revision chips Pre-built instruction shortcuts: Make concise, Add code example, Add callout, Change tone to friendly, Expand detail. Clicking a chip populates the instruction field — you can edit it further before applying.
Apply Revision button Submits the instruction and regenerates the selected section. The revised section replaces the original in the canvas with a yellow pending highlight.
Accept / Discard / Compare Actions that appear after a revision is generated. Accept commits the change. Discard restores the original. Compare opens a side-by-side diff of the original and revised text.
Revision history The last five regenerations for the current section are listed below the instruction field. Click any previous revision to restore it for comparison or acceptance.

Export Panel

The Export Panel opens from the Export button in the editor toolbar. It controls how your document is packaged and where it goes.

Format Output Best for
Markdown .md file GitHub wikis, static site generators (Docusaurus, MkDocs, VitePress), Git repos
HTML .html file (standalone) Self-hosted developer portals, embedding in existing documentation sites, email delivery
PDF .pdf file Print distribution, formal deliverables, offline reference documents
Confluence Confluence page Internal documentation wikis, team knowledge bases. Requires Confluence integration. See Export to Confluence workflow.

Settings

Open Settings from the user avatar menu (top right) or from the Dashboard sidebar. Settings are organized into four tabs.

Profile

Manage your display name, email address, and password. If you signed up with Google, password management is handled through your Google account — the password field is hidden.

API Keys

DocCraft exposes a REST API for programmatic document generation. The API Keys tab lets you create, view, and revoke API keys for your account.

Control Description
Create API key Generates a new key. You are prompted to give it a name (for your reference) and select a permission scope: Read-only (read project metadata) or Full access (generate, read, export). The full key value is shown once — copy it before closing the dialog.
Key list Shows all active keys with their name, scope, creation date, and last-used date. Key values are not shown after creation — only the first four and last four characters are visible.
Revoke Immediately invalidates the key. Any application using the revoked key begins receiving 401 Unauthorized responses. Revocation cannot be undone — create a new key if needed.

Integrations

Configure connections to third-party services that DocCraft can read from or publish to.

Integration Required credentials Enables
GitHub OAuth (sign in with GitHub) Access to private repositories, push exported files directly to a GitHub branch
Confluence Workspace URL, account email, API token Publish documents directly to a Confluence space
Notion OAuth (sign in with Notion) Publish documents to a Notion workspace page

Appearance

Controls the visual theme for the DocCraft interface.


Related
Workflow Guides — step-by-step task walkthroughs →
Need more help?
→ Troubleshooting Guide