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

Example Usage with Download and Theme Toggle​

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

function DownloadButton({ text }) {
  const handleDownload = () => {
    const blob = new Blob([text], { type: "text/markdown" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "document.md";
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <button
      onClick={handleDownload}
      style={{
        padding: "8px 16px",
        background: "#7c3aed",
        color: "white",
        border: "none",
        borderRadius: "6px",
        cursor: "pointer",
        fontWeight: "500",
      }}
    >
      Download .md
    </button>
  );
}

function ThemeToggleButton({ theme, onToggle }) {
  return (
    <button
      onClick={onToggle}
      style={{
        padding: "8px 16px",
        background: theme === "light" ? "#333" : "#e5e7eb",
        color: theme === "light" ? "white" : "black",
        border: "none",
        borderRadius: "6px",
        cursor: "pointer",
        fontWeight: "500",
        marginRight: "10px",
      }}
    >
      {theme === "light" ? "Dark Mode" : "Light Mode"}
    </button>
  );
}

export default function App() {
  const value = `# Welcome to Aksha-MD-Editor 🙏\n\nStart Writing Your Markdown Content Here...`;
  const [markdown, setMarkdown] = useState(value);
  const [theme, setTheme] = useState("light");

  const handleToggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  return (
    <>
      <div
        style={{
          height: "700px",
          border: "1px solid #e5e7eb",
          borderRadius: "8px",
          overflow: "hidden",
          marginBottom: "10px",
        }}
      >
        <MarkdownEditor
          value={markdown}
          onChange={setMarkdown}
          theme={theme}
          height="700px"
        />
      </div>

      <div style={{ marginBottom: "10px" }}>
        <ThemeToggleButton theme={theme} onToggle={handleToggleTheme} />
        <DownloadButton text={markdown} />
      </div>
    </>
  );
}
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"
/>

Installation via CDN​

You can use Aksha MD Editor directly in the browser without a build step (like Webpack or Vite). Because this library is built as an ES Module, you must use an ESM-friendly CDN (like esm.sh) to handle the React dependencies correctly.

Quick Start Example​

Create an index.html file and paste the following code. This setup includes the necessary CSS for the editor and KaTeX (for math support), and imports the library safely.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aksha MD Editor via CDN</title>
  
  <link rel="stylesheet" href="https://unpkg.com/aksha-md-editor@1.0.7/dist/styles.css">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
  
  <style>
    body { font-family: sans-serif; padding: 20px; }
    /* Set a fixed height for the editor container */
    #editor-container { height: auto; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
  </style>
</head>
<body>

  <div id="editor-container">Loading...</div>

  <script type="module">
    // Import React and ReactDOM from esm.sh
    import React from 'https://esm.sh/react@18.2.0';
    import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';

    // Import AkshaEditor
    // Note: We use '?bundle' to prevent CSS import errors and '?deps' to link React versions
    import AkshaEditor from 'https://esm.sh/aksha-md-editor@1.0.7?bundle&deps=react@18.2.0,react-dom@18.2.0';

    function App() {
      const [content, setContent] = React.useState("# Hello Aksha!\n\nWrite markdown here.");

      // Render the component
      return React.createElement(AkshaEditor, {
        value: content,
        onChange: (newContent) => setContent(newContent),
        height: "700px" // Set a fixed height for the editor
      });
    }

    // Mount the app
    const root = createRoot(document.getElementById('editor-container'));
    root.render(React.createElement(App));
  </script>
</body>
</html>

Key Implementation Details​

  • type="module": The <script> tag must include type="module" to support import statements in the browser.
  • The Import URL: We use esm.sh with specific query parameters:
    • ?bundle: Forces the CDN to bundle internal assets, preventing "MIME type" errors with internal CSS imports.
    • ?deps=react@...: Ensures the editor uses the exact same React instance as your page, preventing "Invalid Hook Call" errors.
  • KaTeX CSS: The editor relies on KaTeX for rendering math equations (e.g., $E=mc^2$). Browsers cannot import CSS files via JavaScript modules effectively, so you must include the KaTeX stylesheet manually in the <head> section.