Cosmo retail

This is a live demo of MDXEditor with all default features on.

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

— Daring Fireball.

In here, you can find the following markdown elements:

• Headings
• Lists
  • Unordered
  • Ordered
  • Check lists
  • And nested ;)
• Links
• Bold/Italic/Underline formatting
• Tables
• Code block editors
• And much more.

The current editor content is styled using the @tailwindcss/typography plugin.

What can you do here?

This is a great location for you to test how editing markdown feels. If you have an existing markdown source, you can switch to source mode using the toggle group in the top right, paste it in there, and go back to rich text mode.

If you d columns

1. Switch back to source markdown to see what you're going to get as an output
2. Test the diff feature to see how the markdown has changed
3. Add a frontmatter block through the toolbar button

A code sample

MDXEditor embeds CodeMirror for code editing.

A live code example

The block below is a live React component. You can configure multiple live code presets that specify the available npm packages and the default imports. You can also specify a default component that will be rendered in the live code block.

import React from "react";
import { MDXEditor } from "mdx-editor";

const App = () => {
  return <MDXEditor />;
};

export default App;