Skip to main content

Getting Started

Get up and running with Aksha MD Editor in minutes!

Aksha MD Editor Banner

Installation​

Install the package using your preferred package manager:

npm install aksha-md-editor

Peer Dependencies​

Make sure you have these installed:

npm install react react-dom @monaco-editor/react

Basic Usage​

import { useState } from 'react';
import { MarkdownEditor } from 'aksha-md-editor';
import 'aksha-md-editor/styles.css'; // Import styles

function App() {
  const [markdown, setMarkdown] = useState('# Hello World');

  return (
    <MarkdownEditor
      value={markdown}
      onChange={setMarkdown}
      theme="auto"
      height="600px"
    />
  );
}
CSS Import Required

Don't forget to import the CSS file for proper styling!

Key Props​

PropTypeDefaultDescription
valuestring-Controlled value
onChange(value: string) => void-Change handler
theme"light" | "dark" | "auto""auto"Theme mode
defaultViewMode"edit" | "preview" | "split""split"Initial view
heightstring"600px"Editor height
onSave(value: string) => void-Save callback

View Modes​

The editor has three view modes:

  • edit: Editor only
  • preview: Preview only
  • split: Side-by-side (default)
<MarkdownEditor
  value={markdown}
  onChange={setMarkdown}
  defaultViewMode="split" // or "edit" or "preview"
/>

Themes​

Choose from light, dark, or auto (system preference) themes:

<MarkdownEditor
  value={markdown}
  onChange={setMarkdown}
  theme="auto" // or "light" or "dark"
/>

Common Use Cases​

Blog Post Editor​

import { useState } from 'react';
import { MarkdownEditor } from 'aksha-md-editor';
import 'aksha-md-editor/styles.css'; // Required for styling

function BlogPostEditor() {
  const [content, setContent] = useState('');

  const handleSave = () => {
    // Save content to your backend
    console.log('Saving:', content);
  };

  return (
    <div>
      <MarkdownEditor
        value={content}
        onChange={setContent}
        minHeight="500px"
      />
      <button onClick={handleSave}>Save Post</button>
    </div>
  );
}

Documentation Viewer​

import { MarkdownEditor } from 'aksha-md-editor';
import 'aksha-md-editor/styles.css'; // Required for styling

function DocumentationViewer({ docContent }) {
  return (
    <MarkdownEditor
      value={docContent}
      readOnly={true}
      defaultViewMode="preview"
      showToolbar={false}
    />
  );
}

Note Taking App​

import { useState } from 'react';
import { MarkdownEditor } from 'aksha-md-editor';
import 'aksha-md-editor/styles.css'; // Required for styling

function NoteTaker() {
  const [note, setNote] = useState('');
  const [isSaving, setIsSaving] = useState(false);

  const handleDebouncedChange = async (content) => {
    setIsSaving(true);
    await saveToBackend(content);
    setIsSaving(false);
  };

  return (
    <div>
      {isSaving && <div>Saving...</div>}
      <MarkdownEditor
        value={note}
        onChange={setNote}
        onDebouncedChange={handleDebouncedChange}
        placeholder="Start taking notes..."
      />
    </div>
  );
}

Next Steps​

  • Check out the API Reference
  • Explore more examples and use cases
  • Customize the editor to fit your needs