Skip to content

docchipl/yamde

 
 

Repository files navigation

YAMDE

yamde_logo_light

Y.A.M.D.E - yet another markdown editor.

Demo:

View YAMDE demo


🌱 Features

  • Responsive
  • Light/dark mode support
  • Customizable toolbar
  • Lightweight: Bundlephobia

🔧 Installation

npm install yamde


💻 Usage

Example implementation:

import React, { useState } from 'react'
import Yamde from 'yamde'

export const App = () => {
  const [text, setText] = useState('')

  return <Yamde value={text} handler={setText} theme="light" />
}

⚙️ Options

🎨 Themes

There are two available theme: dark and light. This can be controlled via the theme prop (defaults to light if non specified).

Light

<Yamde value={text} handler={setText} theme="light" />

CleanShot 2021-04-15 at 00 26 39

Dark

<Yamde value={text} handler={setText} theme="dark" />

CleanShot 2021-04-15 at 00 28 50

⌨️ Toolbar actions

You can customize the toolbar actions by passing in the toolbar prop (toolbar?: string[]). Omiting this prop will default to showing all available actions.

<Yamde value={text} handler={setText} toolbar={['bold', 'italic', 'strikethrough']} />

Available actions:

Identifier Description
bold Bold text.
italic Italic text.
strikethrough Strikethrough text
heading1 Heading 1 (H1)
heading2 Heading 2 (H2)
heading3 Heading 3 (H3)
ulist Unordered list
olist Ordered list
table Table markdown
image Image markdown
quote Blockquote markdown
code Code highlight
hr Horizontal rule

About

Yet another markdown editor.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%