Märkchen Editor

A tiny web component for creating a markdown editor, powered by Rust with WebAssembly (wasm-bindgen/wasm-pack).

Component: <maerkchen-editor>

Simple editor with toolbar for common formatting actions (bold, italic, lists, etc.) and an automatic preview window.

Rationale

Most JS Rich Text or Markdown editors are massive, have huge amounts of enterprise functionality and include tens to hundreds of NPM dependencies. I built this for my personal projects to keep it really simple.

• no external dependencies
• renders a <textarea> with a preview and not much more
• drop it in a <form> and it might work (will test in production later)
• alternatively, use as web component and read the reactive value with your favorite JS framework
• toolbar does nothing fancy, just helps with formatting a bit

Non-features

• Syntax highlighting for the markdown source
• ultra fancy styling for the output

things to improve / caveats

• markdown handling and HTML sanitizing happens in Wasm, so the bundle is unfortunately not that tiny - TODO
• more outside styling possibilities

Properties

| Property | Type | Description | | ----------------- | --------- | --------------------------------------------------- | | markdownText | string | The raw markdown content. (Reflected) | | label | string | The label text displayed above the editor. | | formElementName | string | The name attribute for the internal textarea. | | required | boolean | Sets whether the input field is marked as required. |

Basic Usage

Include the script and use the element in your HTML:

<maerkchen-editor
    label="Write a story"
    markdownText="Welcome to the world of **Märkchen**!"
    formElementName="story_content"
    required
>
</maerkchen-editor>

Why "Märkchen"?

All English combinations for "small/tiny" and "Mark" were taken, so I used the diminutive form of my mother tongue German. Nur echt mit dem Umlaut.