Dhub: A Visual Editor for Your Docusaurus Content

Many people choose Docusaurus not just because it's a mature and popular framework, but because it allows you to store and version your content on GitHub or GitLab. This creates a challenge: Markdown and MDX aren't intuitive for non-technical folks.

Imagine someone without a technical background trying to upload an image and figure out the correct path to reference it, or having to resolve a GitHub conflict. Even for technical people, these tasks are time-consuming.

Take editing a simple markdown table, for example—it's a frustrating, error-prone process regardless of your technical expertise. Making content editing easier is such a desired feature that people started asking for it as a Christmas gift on the Docusaurus forum.

We created Dhub specifically to solve this problem—making Markdown/MDX content editing intuitive and fast, even if you're not technical. Dhub connects directly to GitHub, so you can edit visually and push your changes with a click, giving you the best of both worlds: easy editing and proper version control.

How to get started

Dhub is an online tool that doesn't require installation or complicated setup. After signing up, you can simply import your Docusaurus project from GitHub (or create a new one from a template) and start making changes immediately.

Import your project

After you connect Dhub to a GitHub account (personal or organization), you'll be able to import any of your projects from your account to Dhub very easily.

After clicking import, select the Docusaurus platform and pick a name for your project in the import modal. You may also change the branch you want to import. You can safely use your main or development branch here. Dhub doesn't push changes directly to this branch—instead, it creates pull requests that you can review on GitHub before merging them.

The import normally takes from seconds to a couple of minutes, depending on the project size.

Visual editing

Once your import finishes, click "Open" on your project in the dashboard to launch the editor. The interface features a file explorer on the left showing your entire project structure, with the currently open file displayed on the right.

Notice the "docs" and "blog" folder filters pinned at the top of the file explorer panel. These handy filters let you focus exclusively on your MDX content by showing only files within these directories.

Dhub is a WYSIWYG editor, so after opening an MDX/Markdown file, content appears in the editor not as raw Markdown, but as it would look on your final website.

You can change inline styles and text formatting using a Notion-style bubble menu that appears when you select text.

Open the command menu by typing / to add new elements such as images, tables, and callouts.

To upload an image, select 'Image' from the command menu. This opens a modal where you can either upload a new image or select one already in your project.

Images you add to your pages will be uploaded to the /static folder in your project and pushed to GitHub the next time you sync changes.

GitHub workflow

When you're done making changes to your content, click 'Create a pull request'. This opens a modal that lets you adjust the details of your pull request and push your changes to GitHub.

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.

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.