Learn how to use Dokly's editor. Code blocks, callouts, tabs, steps, cards — everything you need to write great docs.

Writing Documentation#

The editor is designed to get out of your way. Just write.

Type / anywhere to see all available blocks:

Text

/h1, /h2, /h3 — Headings
/bullet — Bullet list
/numbered — Numbered list
/quote — Block quote
/emoji — Emojis

Components

/callout — Info/warning/success/error boxes
/code — Code block with syntax highlighting
/tabs — Tabbed content
/steps — Step-by-step guide

Layout

/card — Clickable card
/card-group — Grid of cards
/image — Upload an image
/hr — Horizontal line

Callouts#

I use these constantly. Great for tips, warnings, and "hey pay attention to this":

Code blocks#

Syntax highlighting for pretty much every language:

JavaScript

// Your users will see nice, readable code
const response = await fetch('/api/users');
const data = await response.json();
console.log(data);

Tabs#

Perfect for showing the same thing in different languages:

JavaScript

const response = await fetch('/api/users');
 
const data = await response.json();
 
console.log(data);

Steps#

For tutorials and guides:

Sample Step

More info for this step

Cards#

Good for navigation or feature highlights:

Images#

Drag and drop into the editor, or paste with Cmd+V. They're automatically uploaded and optimized.

Text formatting#

Text formatting

Select text to get the formatting toolbar:

Bold
Italic
Inline code
Links

Writing tips#

What I've learned from writing docs:

Lead with the outcome — tell people what they'll achieve
Keep it scannable — short paragraphs, lots of headings
Show, don't tell — code examples > explanations
Be human — it's okay to have personality

And many more components added every day ...#

I take feedback seriously and one of the reasons for being an indie hacker is being close to my users. If you need something, you got it. Send me a quick email of what you need and I can definitely support you.

Writing Documentation