DevForge LogoDevForgeDocs
Search
LandingWorkbench

Overview

Home

Guides

Markdown Reference

GFM syntax guide

Studio

DevForge Studio

studio

Data Tools

JSON Formatter

json-formatter

Base64 Ultimate Studio

base64-ultimate-studio

JWT Decoder

jwt-decoder

String Case Converter

string-case-converter

YAML ↔ JSON

yaml-json-converter

DB Schema Visualizer

db-schema-visualizer

API Client Studio

api-client

SHA-256 Hash Generator

sha256-generator

SVG Optimizer

svg-optimizer

Writing Tools

Markdown Editor

markdown-editor

ASCII Art Generator

text-to-ascii-art

Doc Builder

doc-builder

Pattern Tools

Regex Tester

regex-tester

Diff Viewer

diff-viewer

Generators

Code Generator

code-generator

UUID Generator

uuid-generator

Color Palette Studio

color-palette

Cron Generator

cron-generator

Dockerfile Generator

dockerfile-generator

K8s YAML Builder

k8s-yaml-builder

AI Tools

AI Explainer

code-explainer

AI UI Generator

ai-ui-generator

Documentationdoc builder

Tool reference

Doc Builder

alpha

Build structured project documentation across multiple linked pages with a VS Code-style file tree, wikilink navigation, auto-generated table of contents, and a clean reader mode.

Open toolBack to docs

Quickstart

Use this when you want the shortest path from input to a useful result.

1

Create your first page from the file tree sidebar.

2

Write content in the editor; link to other pages with [[page-slug]].

3

Switch to Read mode to review the rendered result with the TOC sidebar.

4

Save the documentation workspace from the toolbar.

Best for

Common situations where this tool fits naturally into the workflow.

  • Write structured project documentation with multiple pages organized in a logical hierarchy.
  • Navigate between pages using [[wikilink]] syntax rendered as clickable links in the preview.
  • Review the final documentation in a clean reader mode with an auto-generated table of contents.

Common tasks

Concrete ways this tool is typically used in day-to-day workflows.

Add a page

Click the + button in the file tree. Give the file a name; it becomes the wikilink slug automatically.

Navigate between pages in reader mode

Click any [[slug]] link in the rendered page to jump to the matching document without leaving reader mode.

Jump to a section with the TOC

The right-side TOC sidebar in reader mode lists all h1-h3 headings as anchor links. Click one to scroll directly to that section.

Save and reopen a docs workspace

Click Save to name the workspace. It is stored per-user in My Saves and can be reopened with all pages intact.

Examples

Real inputs and outputs that show how the tool behaves.

Structured project docs with a TOC

Reader mode extracts headings from the active page and displays them as anchor links in the right-side TOC.

Markdown in overview.md

# Overview

## Architecture

### Frontend

### Backend

## Getting Started

TOC sidebar in reader mode

The TOC sidebar lists Overview, Architecture, Frontend, Backend, and Getting Started as clickable anchor links that scroll the page without switching files.

Multi-page wiki with wikilinks

Link across documentation pages using [[slug]] syntax. Dead links render in muted style until the target page exists.

Markdown in index.md

# Documentation

- [[architecture]] — system design overview
- [[api-reference]] — REST endpoints and payloads
- [[deployment]] — production setup guide

Result

Each [[slug]] renders as a clickable link. Clicking in reader mode switches the active page to the matching document in the workspace.

Features

What this tool includes and what each capability is for.

VS Code-Style File Tree

Always-visible sidebar with pages and folders, inline rename, delete, and a toggle button to collapse the panel.

Wikilink Navigation

[[slug]] syntax renders as a clickable link in the preview. Clicking it switches the active page without a page reload.

Reader Mode

Switches the full tool surface into a clean reading view with no editor chrome, optimized for reviewing final documentation.

Auto-Generated Table of Contents

Reader mode extracts h1-h3 headings from the active page and renders them as anchor links in a right-side TOC sidebar.

Live Edit Mode

Switch from Read to Edit and back at any time. The editor shows the raw Markdown for the selected page.

Cloud Save and My Saves Hub

Saves the full documentation workspace — all pages, folders, and content — to the cloud. Reopen from My Saves at any time.

Workflow

Follow this path to get from input to output quickly.

1

Create your first page from the file tree sidebar.

2

Write content in Edit mode; use [[slug]] to link to other pages.

3

Add more pages and organize them into folders for larger documentation sets.

4

Switch to Read mode to see the final result with the auto-generated TOC.

5

Save the workspace to keep it accessible from My Saves.

Caveats and tips

Things to keep in mind before relying on the output in a larger workflow.

Caveats

  • Free tier is limited to 5 saved documentation workspaces. Pro tier removes this limit.
  • The TOC is extracted from the rendered HTML of the active page only, not from all pages at once.
  • Wikilinks match by slug (filename without .md, spaces converted to dashes). A dead link renders in muted style.
  • TOC anchor links rely on browser scroll behavior; headings without IDs will not scroll correctly.

Tips

  • Keep one index.md as the root page and link outward from it so the doc structure is always discoverable.
  • Use h2 and h3 headings consistently — the TOC shows h1 through h3, so deeper nesting is not reflected.
  • Switch between Edit and Read modes using the toolbar toggle rather than saving a separate viewing copy.
  • Rename pages from the sidebar context menu; wikilinks referencing the old slug will show as dead until updated.

On this page

QuickstartBest forCommon tasksExamplesFeaturesWorkflowCaveats and tips

Related pages

Markdown EditorOpenASCII Art GeneratorOpen