# Documentation content types (/guides/content-types)

<!-- agent-signals: reading_time_min: 9 · est_tokens: 3744 · updated: 2026-07-30 -->
Related: [How to create accessible documentation](/guides/accessibility.md), [Documentation content templates](/guides/content-templates.md), [Headless docs with a custom frontend](/guides/custom-frontend.md), [Build custom page layouts](/guides/custom-layouts.md), [Create developer documentation](/guides/developer-documentation.md), [Create a help center](/guides/help-center.md)

Not all documentation serves the same purpose. A tutorial that walks a new user through their first deployment is fundamentally different from an API reference a developer consults every day. Mixing these purposes in a single page creates content that serves neither goal well.

The [Diátaxis framework](https://diataxis.fr) provides a practical system for categorizing documentation by the user's need in the moment.

## The four documentation types [#the-four-documentation-types]

<Frame>
  <img src="/_assets/8f0663ea8694169e578149833f13bb464989434fa9bbc509453ace7bf7a988f2" alt="A diagram of the Diátaxis framework showing four quadrants that correspond to the four content types: Tutorials, How-To Guides, Reference, and Explanation." />
</Frame>

### Tutorials (learning-oriented) [#tutorials-learning-oriented]

Tutorials teach through doing. The user's goal is to learn something new, and the tutorial's goal is to give them a successful experience—not to document every option or explain every detail.

A good tutorial:

* Assumes no prior knowledge of the specific task
* Takes the user through one complete, working example from start to finish
* Minimizes choices—tell users exactly what to do rather than offering alternatives
* Marks progress at meaningful milestones ("You've now configured authentication")
* Explains just enough to keep the user moving, not everything there is to know

Tutorials are the highest-investment content type to write and maintain, but they have an outsized impact on whether new users succeed with your product.

### How-to guides (task-oriented) [#how-to-guides-task-oriented]

How-to guides help users accomplish a specific goal. Unlike tutorials, they assume the user already has some context and wants to do a particular thing, not learn a concept.

A good how-to guide:

* Addresses one specific task in the title and throughout
* Assumes prior knowledge of the prerequisites
* Provides a clear sequence of steps without unnecessary context
* Describes what to do, not how the system works underneath

The distinction from tutorials matters in practice: a tutorial on "Getting started with authentication" walks a new user through the whole process step by step. A how-to guide on "Rotate your API keys" assumes the user knows what API keys are and just needs the steps.

### Reference (information-oriented) [#reference-information-oriented]

Reference documentation describes the system accurately and completely. Users consult it to look something up—they aren't reading sequentially, and they aren't learning.

Good reference documentation:

* Prioritizes completeness and accuracy above all else
* Is scannable: tables, consistent formatting, short descriptions
* Avoids explanatory or conceptual content
* Documents everything, including defaults, limits, and edge cases
* Stays close to the structure of what it documents (an API reference follows the API's structure)

API references, configuration option lists, and CLI command references are all reference content.

### Explanation (understanding-oriented) [#explanation-understanding-oriented]

Explanations deepen understanding of a concept. Users read them when they want to understand why something works the way it does, not how to do a specific task.

Good explanation content:

* Addresses the context and motivation behind a design decision
* Acknowledges tradeoffs and alternatives
* Connects concepts across the broader system
* Takes opinionated positions where appropriate

Architecture overviews, concept guides, and "how X works" pages are all explanation content. They're distinct from how-to guides in that a reader finishing an explanation article shouldn't feel instructed to do something—they should feel they understand something better.

## Choose the right type for each page [#choose-the-right-type-for-each-page]

| Question                                    | Tutorial               | How-to                   | Reference                | Explanation          |
| ------------------------------------------- | ---------------------- | ------------------------ | ------------------------ | -------------------- |
| What is the user's goal?                    | Learn through practice | Solve a specific problem | Find precise information | Understand a concept |
| What level of knowledge does the user have? | Beginner               | Intermediate             | Experienced              | Any                  |
| Is the content task-oriented?               | Yes, guided            | Yes, specific            | No                       | No                   |
| Is it sequential?                           | Yes                    | Usually                  | No                       | No                   |

When in doubt about which type fits a page, ask: "What does the user do after reading this?" If they've completed a task, it's a how-to or tutorial. If they now understand something and may go on to take action elsewhere, it's an explanation. If they've looked up a specific detail, it's reference.

## Writing for each type [#writing-for-each-type]

### Writing tutorials [#writing-tutorials]

Set expectations at the start: what do users build or accomplish by the end? Use `<Steps>` components for sequential progress and celebrate completion at natural milestones. Minimize decisions—where there are multiple valid approaches, pick one and say so.

### Writing how-to guides [#writing-how-to-guides]

Lead with the task in the title: "How to configure webhooks," "How to migrate from v1 to v2." Write from the user's perspective, not the product's. Skip context that doesn't affect the steps. Link to explanation or reference content for users who want to understand more.

### Writing reference [#writing-reference]

Structure reference docs around the thing you describe, not around user journeys. Use consistent formatting across all entries. Every parameter, flag, or option should have a type, default value, and one-line description. Keep it scannable.

### Writing explanation [#writing-explanation]

Start with the question you're answering: "Why does authentication work this way?" or "What's the difference between organizations and workspaces?" Acknowledge that multiple approaches exist and explain why the product makes the choices it does. Link to how-to guides for users who want to act on what they've learned.

## Tips for maintaining type consistency [#tips-for-maintaining-type-consistency]

* **Assign a content type before writing.** Deciding in advance shapes every other writing decision—structure, length, tone, what to include and exclude.
* **Review mixed-purpose pages.** Pages that explain a concept and include a tutorial and reference a list of options all at once are hard to maintain and hard to use. Split them or pick a primary type.
* **Adapt the framework to your product.** Diátaxis is a starting point, not a rigid rule. Products with unusual structures may need hybrid approaches. The underlying principle—match content to the user's need in the moment—applies universally.

## Frequently asked questions [#frequently-asked-questions]

<AccordionGroup>
  <Accordion title="Do I need all four content types for every feature?">
    No. Small features may only need a how-to guide and a reference entry. The types describe needs users might have, not a checklist you must complete. Start with what your users actually need—usually a how-to guide and reference—and add tutorials and explanations where users are consistently struggling to get started or understand something.
  </Accordion>

  <Accordion title="What's the difference between a tutorial and a how-to guide?">
    Tutorials are learning experiences. The user starts without knowledge and ends having built or completed something, with the tutorial doing most of the pedagogical work. How-to guides are task references. The user knows what they want to do and needs the steps to do it. A tutorial on "Build your first integration" and a how-to guide on "Connect a new integration" can cover similar actions but serve entirely different users in entirely different contexts.
  </Accordion>

  <Accordion title="Can a single page serve multiple content types?">
    In practice, pages often mix types—especially getting started content that blends tutorial and how-to. The question is whether the mixing serves users or confuses them. If a page needs to both teach a concept (explanation) and walk through setup (tutorial), a clear section structure can work. If the content is too mixed to organize cleanly, splitting into separate pages usually produces better results.
  </Accordion>

  <Accordion title="How detailed should reference documentation be?">
    Comprehensive enough that users don't need to read source code or contact support to understand a parameter or option. Every configurable value should have a description, type, default, and example. Reference documentation that omits edge cases or limits forces users to discover those limits through trial and error—that's a documentation failure, not a user error.
  </Accordion>
</AccordionGroup>

## Related pages [#related-pages]

<CardGroup cols="2">
  <Card title="Content templates" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M10 18C10 18 7.50004 16.1588 7.50003 15.5C7.50003 14.8412 10 13 10 13&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M14 18C14 18 16.5 16.1588 16.5 15.5C16.5 14.8412 14 13 14 13&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M13 2.5V3C13 5.82843 13 7.24264 13.8787 8.12132C14.7574 9 16.1716 9 19 9H19.5M20 10.6569V14C20 17.7712 20 19.6569 18.8284 20.8284C17.6569 22 15.7712 22 12 22C8.22876 22 6.34315 22 5.17157 20.8284C4 19.6569 4 17.7712 4 14V9.45584C4 6.21082 4 4.58831 4.88607 3.48933C5.06508 3.26731 5.26731 3.06508 5.48933 2.88607C6.58831 2 8.21082 2 11.4558 2C12.1614 2 12.5141 2 12.8372 2.11401C12.9044 2.13772 12.9702 2.165 13.0345 2.19575C13.3436 2.34355 13.593 2.593 14.0919 3.09188L18.8284 7.82843C19.4065 8.40649 19.6955 8.69552 19.8478 9.06306C20 9.4306 20 9.83935 20 10.6569Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/guides/content-templates">
    Copy and modify templates for each content type.
  </Card>

  <Card title="Style and tone" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M3.49977 18.9853V20.5H5.01449C6.24074 20.5 6.85387 20.5 7.40518 20.2716C7.9565 20.0433 8.39004 19.6097 9.25713 18.7426L19.1211 8.87868C20.0037 7.99612 20.4449 7.55483 20.4937 7.01325C20.5018 6.92372 20.5018 6.83364 20.4937 6.74411C20.4449 6.20253 20.0037 5.76124 19.1211 4.87868C18.2385 3.99612 17.7972 3.55483 17.2557 3.50605C17.1661 3.49798 17.0761 3.49798 16.9865 3.50605C16.4449 3.55483 16.0037 3.99612 15.1211 4.87868L5.25713 14.7426C4.39004 15.6097 3.9565 16.0433 3.72813 16.5946C3.49977 17.1459 3.49977 17.759 3.49977 18.9853Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M13.5 6.5L17.5 10.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/guides/style-and-tone">
    Write effective documentation with consistent style.
  </Card>

  <Card title="Understand your audience" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M13 11C13 8.79086 11.2091 7 9 7C6.79086 7 5 8.79086 5 11C5 13.2091 6.79086 15 9 15C11.2091 15 13 13.2091 13 11Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M11.0386 7.55773C11.0131 7.37547 11 7.18927 11 7C11 4.79086 12.7909 3 15 3C17.2091 3 19 4.79086 19 7C19 9.20914 17.2091 11 15 11C14.2554 11 13.5584 10.7966 12.9614 10.4423&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M15 21C15 17.6863 12.3137 15 9 15C5.68629 15 3 17.6863 3 21&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M21 17C21 13.6863 18.3137 11 15 11&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/guides/understand-your-audience">
    Research and define your documentation audience.
  </Card>

  <Card title="Navigation" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><circle cx=&#x22;12&#x22; cy=&#x22;13&#x22; r=&#x22;9&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12 3.5V2&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M10 2H14&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M14.7728 10.2571C15.5061 10.9837 14.3328 16.8933 13.1289 16.9974C12.1189 17.0848 11.8041 15.0928 11.5914 14.4614C11.3815 13.8383 11.1478 13.6139 10.5298 13.4095C8.95989 12.8901 8.17492 12.6304 8.0195 12.2192C7.60796 11.1304 13.8362 9.32902 14.7728 10.2571Z&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/guides/navigation">
    Organize your documentation structure effectively.
  </Card>

  <Card title="Improve your docs" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M7 15.2461L9.87381 11.5319C10.1242 11.2082 10.2495 11.0464 10.3862 10.9354C10.7975 10.6017 11.3471 10.5135 11.8368 10.7026C11.9997 10.7654 12.1664 10.8804 12.5 11.1103C12.8336 11.3402 13.0003 11.4552 13.1632 11.518C13.6529 11.7071 14.2025 11.6189 14.6138 11.2852C14.7505 11.1742 14.8757 11.0124 15.1262 10.6887L15.9061 9.68068C16.8833 8.41772 17.3719 7.78624 18.0414 7.7479C18.7109 7.70956 19.264 8.28139 20.3701 9.42505L21 10.0764&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M21 21H10C6.70017 21 5.05025 21 4.02513 19.9749C3 18.9497 3 17.2998 3 14V3&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/guides/improving-docs">
    Use data and metrics to improve documentation.
  </Card>
</CardGroup>
