devsnips
Search docs, APIs, guides…

Component

Markdown Editor

Markdown editor with toolbar and dark mode support

  • Component
  • Tailwind
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/input/markdown-editor/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Input/markdown-editor
registry path: Tailwind/Components/Input/markdown-editor

Source

Implementation

code.html 
<!-- Markdown Editor - Simple -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Description (Markdown)</label>
  <textarea rows="4" placeholder="Write your content here using **Markdown**..." class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors font-mono text-sm resize-none"></textarea>
</div>

<!-- Markdown Editor - With Toolbar -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Content</label>
  <div class="border border-gray-300 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500">
    <div class="flex items-center gap-1 p-2 bg-gray-50 border-b border-gray-300">
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors font-bold text-sm">B</button>
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors italic text-sm">I</button>
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors text-sm">H</button>
      <div class="w-px h-5 bg-gray-300 mx-1"></div>
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors text-sm">🔗</button>
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors text-sm">&lt;/&gt;</button>
    </div>
    <textarea rows="5" placeholder="# Heading&#10;&#10;Write your **markdown** content here..." class="w-full px-4 py-3 bg-white focus:outline-none font-mono text-sm resize-none"></textarea>
  </div>
  <p class="mt-2 text-xs text-gray-500">Supports Markdown formatting</p>
</div>

<!-- Markdown Editor - Dark -->
<div class="mt-4 p-4 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-300 mb-1">README.md</label>
  <textarea rows="4" placeholder="# My Project&#10;&#10;Description here..." class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400 font-mono text-sm resize-none"></textarea>
</div>
28 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/input/markdown-editor
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/input/markdown-editor/

Install: npx devsnips add
Tailwind/Components/Input/markdown-editor

This is the Markdown Editor — Markdown editor with toolbar and dark mode support

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/input/markdown-editor