# Steps

Edit ordered instructions and step-by-step guides in Fumadocs, Starlight, and Prosefly MDX.

import ContentEditor from '@/components/editor/ContentEditor.astro';

Use Prosefly’s MDX component editor to edit ordered procedures while keeping the syntax used by your Fumadocs, Starlight, or Prosefly site.

## Supported profiles

The same editor supports the [Astro](/frameworks/astro/), [Starlight](/frameworks/starlight/), [Fumadocs](/frameworks/fumadocs/), and [Prosefly](/frameworks/lotus/) profiles. Select the profile that matches your site to see the component syntax and controls available for that integration.

## Edit in Visual

Edit each step’s content in place. Use the group’s add-step action to insert another step. Individual step controls let you move a step earlier or later and delete it. The group maintains the visual sequence as you rearrange its content.

See the [Visual Editor demo](/docs/editor/visual-editor/) for this component alongside ordinary Markdown.

<ContentEditor content="steps" />

## Source example

{/* prettier-ignore */}
```mdx
import { Steps } from '@astrojs/starlight/components';

<Steps>

1. **Connect the repository**

   Authorize the repository that contains your documentation.

2. **Review and publish**

   Check the content and navigation changes before publishing.

</Steps>
```

## Profile differences

Starlight and Prosefly use an ordered Markdown list inside Steps. Fumadocs uses individual Step components inside Steps, typically with a heading in each item. Keep the form that matches your website’s components.

A Steps component describes instructions; it does not run them or track their completion. For checkboxes, use [Task List](/docs/editor/markdown/task-list/).

## Related MDX guides

Read next: [Tabs](/docs/editor/components/tabs/) · [Card](/docs/editor/components/card/) · [Callout](/docs/editor/components/callout/).