:::note

This is a demo of [Dhub](https://dhub.dev) editor. It's all editable, give it a try!

:::

# The editor for MDX

Dhub is the easiest way for you and your team to edit Markdown and MDX websites without writing any code.

[Sign up here](https://dhub.dev) and connect your project in Github

No credit card required to start!

## How it looks like

![Screenshot of Dhub editor](https://dhub.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Feditor.2a960256.png\&w=1920\&q=75)

## Why developers ❤️ Dhub

- Delegate content editing tasks to non-technical team members
- Really fast onboarding
- Source code remains in Github
- No vendor lock-in, can disconnect Dhub any time
- No 3rd-party libs to install and maintain
- No more "Can you fix this typo?" requests!

## Why content creators ❤️ Dhub

- Nothing new to learn - use a familiar WYSIWYG editor
- No need to know git or `npm`, or Markdown, nothing to install
- Edit together with your team in real-time
- Auto-beautified markdown - keeps your developers happy
- Click a button to push your edits to Github
- Don't wait for developers - just do it yourself!

## **Dhub** is a WYSIWYG editor for MDX.

With [dhub.dev](https://dhub.dev) you can connect Github repository and edit markdown right in the browser.

When changes are ready, push them to Github with a click of a button.

Use `Show markdown` button at the top right of the screen to preview what the markdown looks like.

It's also colaborative - join teammates in **real time** to edit content together!

> *\* GitLab and Bitbucket coming soon!*

***

## Components

To insert a component just type `/` to open the command menu.

### Image

![](/degas-before-the-ballet.jpg)Edgar Degas. Before the Ballet, 1890/1892. Credit: Widener Collection

### Inline image

Inline ![](inline-image-car.png) images ![](inline-image-tractor.png) create ![](inline-image-truck.png) a traffic jam ![](inline-image-bus.png)&#x20;

SVG images are also supported ![](inline-image-bus.svg)

### Typography

**Headings 1-5**, [links](https://dhub.dev), `inline code`, **bold** and *italic.*

### Divider

***

### Bulleted list

- Docusaurus

- Tyrannosaurus

- Edmontosaurus annectens

### Numbered list

1. Docusaurus

2. Tyrannosaurus

3. Edmontosaurus annectens

### Quote

> Everything Big Starts with Something Little

### Callout (admonition)

:::note Note (click on the title to change it)

Callouts, when used sparingly, are a great tool to draw reader's attention.

:::

:::tip Tip

Callouts, when used sparingly, are a great tool to draw reader's attention.

:::

:::info Info

Callouts, when used sparingly, are a great tool to draw reader's attention.

:::

:::caution Caution

Callouts, when used sparingly, are a great tool to draw reader's attention.

:::

:::danger Danger

Callouts, when used sparingly, are a great tool to draw reader's attention.

:::

### Code block

```javascript title="Node.js hello world" showLineNumbers
const http = require('http')

const hostname = '127.0.0.1'
const port = 3000

const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain')
  res.end('Hello World')
})

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`)
})
```

### Table

|       | Milo         | Bella     |
| ----- | ------------ | --------- |
| Breed | Jack Russell | Dalmatian |
| Age   | 10           | 4         |

### Embedded MDX code

```mdx-code-block
<Tabs>
  <TabItem value="milo" label="Milo" default>
    Milo is Jack Russel terrier, 10 years old.
  </TabItem>
  <TabItem value="bella" label="Bella">
    Bella is Dalmatian dog, 4 years old.
  </TabItem>
</Tabs>
```

## **Roadmap**

Here's what we're working on next:

- ✅ **Table component** - DONE!\
  make it easy to add and style tables in your content.

- ✅ **Image component** - DONE!\
  make it easy to add images

- ✅ **Github integration** - DONE!\
  pull and push changes directly from and to your project.

- ✅ **Collaborative editing** - DONE!\
  live collaborative editing.

- ✅ **Rename file names** - DONE!\
  rename your project file names and folder names.

- 🏗️ **Tabs and Details** - WIP!\
  don't fiddle with MDX to create tabs or details components.

- 🏗️ **Comments** - WIP!\
  leave comments on your content and have a conversation with your team.

- 🏗️ **GitLab and Bitbucket support** - WIP!\
  connect your project from GitLab or Bitbucket.

- 🏗️ **Your idea here**\
  have a use case in mind? Let us know!

:::info

We'd love to hear back from you!

Click the ***Send feedback*** button in the top menu

or email us at [hello@dhub.dev](mailto\:hello@dhub.dev)

:::
