Nindo

Quick Start

Get your first Nindo editor running in less than a minute.

Basic Setup

The simplest way to use Nindo:

page.tsx
tsximport { MarkdownEditor } from '@/components/ui/markdown-editor';
 
export default function Page() {
  return (
    <div className="h-screen">
      <MarkdownEditor />
    </div>
  );
}

Preview will appear here...

paragraph1 lines · 0 chars

That's it! You now have a fully functional markdown editor with:

  • Live preview
  • Formatting toolbar
  • Keyboard shortcuts
  • Undo/redo support

Controlled Editor

For most applications, you'll want to control the content:

Controlled Editor
tsximport { MarkdownEditor } from '@/components/ui/markdown';
import { useState } from 'react';
 
export default function ControlledEditor() {
  const [content, setContent] = useState('');
 
  return (
    <div className="h-screen">
      <MarkdownEditor 
        defaultContent={content}
        onChangeContent={setContent}
      />
    </div>
  );
}

Preview will appear here...

paragraph1 lines · 0 chars

Customizing Initial Content

Provide default markdown when the editor loads:

page.tsx
tsximport { MarkdownEditor } from '@/components/ui/markdown';
import { useState } from 'react';
 
const defaultMarkdown = `
# My Blog Post
 
Write your introduction here...
`;
 
export default function Page() {
	const [content, setContent] = useState(defaultMarkdown);
 
  	return (
		<MarkdownEditor 
			defaultContent={defaultMarkdown} 
			onChangeContent={setContent}
		/>
	);
}

My Blog Post

Write your introduction here...

paragraph5 lines · 49 chars