How to Edit Docusaurus Content Visually with Dhub

Docusaurus is great for storing and versioning content on GitHub, but let’s be honest: Markdown and MDX are a nightmare for non-developers.

Content updates shouldn't require wrestling with Markdown tables, guessing image paths, or navigating Git conflicts. Editing is actually such a headache that users were literally begging for a Docusaurus editor as a Christmas gift on the forums.

We built Dhub to fix this. It gives you: It gives you: to fix this. It gives you:

• Visual editing: Write and format your pages exactly like you would in Notion or Google Docs.

• Drag-and-drop navigation: Create pages, add folders, and reorder your sidebar visually instead of messing with config files.

• Direct GitHub integration: Push changes directly to your repo with one click.

• Zero friction: The easy editing your writers want, with the version control your developers expect from a modern Docusaurus CMS.

How to get started

Getting started takes seconds. There's no installation or messy configuration—just sign up and choose your path:

• Bring your own repo: Connect your existing Docusaurus project from GitHub and start making changes immediately.

• Start fresh: Clone our Dhub-ready Docusaurus starter. It comes with everything pre-configured, including visual sidebar navigation, so you can jump right into writing.

Import your project

Once your GitHub account is connected (personal or organization), bringing your project into Dhub takes just a few clicks.

1. Choose your repo

   Find your project in the list and hit Import.

   

2. Pick your branch

   You can safely connect to your main branch or a specific development branch—whatever fits your workflow. Just make sure the "This is a Docusaurus project" box is checked.

   

3. Fine-tune (if needed)

   Working with a monorepo or a custom image directory? You can point Dhub to the right folders here. For most standard setups, you won't need to change a thing.

   

That’s it! The import usually takes anywhere from a few seconds to a couple of minutes, depending on the size of your site.

Visual editing

Once the import finishes, hit Open. You'll see two main tabs on the left that handle everything in your project. The editor on the right shows your page exactly as it will look live.

Files vs. Navigation

• Files tab: This is your actual file tree. Use it to browse your Markdown files, MDX, and images.

• Navigation tab: This is where you manage your sidebar. Instead of editing sidebars.js manually, you can visually add pages, create folders, and drag items to reorder them.

You can read more about how this works in our navigation documentation.

How to format text

Highlight any text to bring up the bubble menu. It works just like Notion for quick styling and links.

How to add elements

Type / to open the command menu. This is how you drop in tables, callouts, or code blocks without touching any code.

How to handle images

Select "Image" from the slash menu. You can upload something new or pick a file already in your project. Dhub saves everything to your /static folder automatically. When you sync, they get pushed straight to GitHub.

GitHub workflow

Once you’re done editing, you need to get those changes back into your repository. Dhub makes this part seamless, even if you’ve never used Git before.

Pushing your changes

Click the Push button in the top right to see your options. You can push directly to your main branch or create a pull request for a team review.

How pull requests work

If you choose to create a PR, Dhub handles the technical heavy lifting. It creates a new branch and opens the PR for you. If you keep making changes, Dhub simply updates that same PR rather than cluttering your repo with new ones. This lets you review everything in one go on GitHub when you're ready to merge.

Dhub creates a new branch and pull request only if the previous pull request created by Dhub is already closed or merged. Otherwise, it updates the existing pull request. This enables a workflow where you can push changes to the same branch multiple times during your editing session, and then review and merge everything into your main branch in one go on GitHub.

All commits to your repository will have the person who initiated the push set as the committer, so you can track who made the changes.

Anyone on your Dhub team can push changes directly. Dhub still tracks exactly who made the edit and lists their name in the commit history, so you never lose that paper trail of who changed what.

Two-way GitHub sync

When you make changes to your project outside of Dhub, you can pull these changes into Dhub using the "Pull from GitHub" feature.

This feature checks for changes made on your main branch on GitHub (specifically the branch you selected during project import, not your PR branch) and applies those changes to your current Dhub project state.

Handling conflicts

What happens when you try to pull a file that's changed both on GitHub and in Dhub? No problem at all. You'll be presented with a screen where you can choose whether to overwrite the conflicting file with the version from GitHub, or keep it as it is in Dhub.

Custom components

For all the common components in Docusaurus Markdown like tables, code blocks, and details, Dhub converts them into WYSIWYG editable widgets in the editor.

Sometimes, however, you'll want to use your own custom React components in your MDX files—how does Dhub handle that?

When Dhub isn't able to recognize React code in your content, it will add an embedded MDX block (or inline, if the element is inline) that displays the code as is.

Say you want to embed a JSFiddle into your page: hit the / symbol and select 'Embedded MDX' from the list. Add the iframe that embeds your JSFiddle directly as you would in a normal text editor:

<iframe
  width="100%"
  height="300"
  src="//jsfiddle.net/afabbro/vrVAP/embedded/"
  frameBorder="0"
  loading="lazy"
  allowtransparency="true"
  allowFullScreen={true}
/>

Is Dhub right for your project?

Dhub was born from a real need in the Docusaurus community—making content creation accessible to everyone regardless of technical background. It makes content editing faster and more intuitive, without losing the power of Git-based version control.

Dhub is an excellent fit if:

• You want to improve and speed up your Docusaurus content workflow

• You need to enable less technical team members to write documentation

• You value visual editing without sacrificing the power of version control

However, it might not be the best solution if:

• Your project relies heavily on numerous different custom components, as Dhub will simply display these as JSX code blocks rather than visual elements

Sign up at dhub.dev to get started.

Have questions or feedback? We'd love to chat! Reach out to us at hello@dhub.dev.