ra-markdown: Markdown Utilities For React-Admin

For applications that need to display and edit Markdown content, this package offers two components:

  • <MarkdownField>: Display formatted markdown, using material-ui styles
  • <MarkdownInput>: Edit a Markdown field, using a WYSIWYG editor supporting preview

You can test this module in the ra-markdown live demo.


npm install --save @react-admin/ra-markdown
# or
yarn add @react-admin/ra-markdown

Tip: ra-markdown is part of the React-Admin Enterprise Edition, and hosted in a private npm registry. You need to subscribe to one of the Enterprise Edition plans to access this package.


A Field component for Markdown content. To be used e.g. in Show views.

import { Show, SimpleShowLayout, TextField } from 'react-admin';
import { MarkdownField } from '@react-admin/ra-markdown';

const PostShow = props => (
    <Show {...props}>
            <TextField source="title" />
            <MarkdownField source="description" />

Tip: If you want to display raw (unformatted) markdown, use <TextField component="pre"> instead:

import { Show, SimpleShowLayout, TextField } from  

const PostShow = props => (
    <Show {...props}>
            <TextField source="title" />
            <TextField source="description" component="pre" />


An Input component for Markdown content, based on the tui-editor package. To be used in Edit and Create views.

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { MarkdownInput } from '@react-admin/ra-markdown';

const PostEdit = props => (
    <Edit {...props}>
            <TextInput source="title" />
            <MarkdownInput source="description" />

You can customize the markdown renderer used for the preview, so that it matches the rendering you need in read mode just by applying the CSS rules you want.

import { MarkdownInput } from '@react-admin/ra-markdown';

The object passed as `options` props is passed to `tui-editor`'s `<Editor>` component

const options = {
        previewStyle: 'tab',
        height: '300px',
        initialEditType: 'markdown',
        useCommandShortcut: false,
<MarkdownInput source="description" options={options} />

Refer to the tui-editor documentation for the details about the editor configuration.




  • Upgrade to react-admin 3.9



  • Update Readme



  • (deps) Upgrade dependencies



  • (fix) Fix fullWidth support



  • First release