🦀 Rusty Editor

A high-performance rich text editor for React, powered by Rust and WebAssembly.

Features

• ⚡ Blazing Fast - Core logic powered by WASM for near-native performance
• 🛡️ Type Safe - Built with TypeScript and Rust for robust reliability
• 🔌 Zero Config - Drop-in replacement for standard textareas
• 🎨 Customizable - Extensive theming and toolbar configuration options
• 📱 Responsive - Works seamlessly on desktop and mobile devices

Installation

npm install @rusty-editor/react

Quick Start

import { RustyEditor } from '@rusty-editor/react';
import '@rusty-editor/react/dist/style.css';
import { useState } from 'react';

function App() {
  const [content, setContent] = useState('<p>Start typing...</p>');

  return (
    <RustyEditor
      value={content}
      onChange={setContent}
    />
  );
}

Customization

Toolbar Configuration

<RustyEditor
  value={content}
  onChange={setContent}
  toolbar={{
    items: ['bold', 'italic', 'underline', '|', 'link', 'image', 'table']
  }}
/>

Available Toolbar Items

• Text Formatting: bold, italic, underline, strikethrough, code
• Headings: heading
• Lists: bulletList, orderedList
• Blocks: blockquote, codeBlock
• Media: link, image, embed, table
• Alignment: alignLeft, alignCenter, alignRight, alignJustify
• Colors: textColor, highlight
• History: undo, redo
• View: html

Theming

<RustyEditor
  theme={{
    primaryColor: '#ec4899',
    borderRadius: '12px',
  }}
/>

Dimensions

<RustyEditor
  minHeight="300px"
  maxHeight="600px"
  className="my-custom-editor"
/>

Next.js Usage

Works seamlessly with Next.js (App Router or Pages Router):

'use client'; // For App Router

import { RustyEditor } from '@rusty-editor/react';
import '@rusty-editor/react/dist/style.css';
import { useState } from 'react';

export default function Editor() {
  const [content, setContent] = useState('<p>Hello Next.js!</p>');

  return <RustyEditor value={content} onChange={setContent} />;
}

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | HTML content of the editor | | onChange | (html: string) => void | - | Callback when content changes | | toolbar | ToolbarConfig | All items | Toolbar configuration | | theme | ThemeConfig | - | Theme customization | | minHeight | string | '200px' | Minimum editor height | | maxHeight | string | - | Maximum editor height | | className | string | - | Custom CSS class | | placeholder | string | - | Placeholder text |

License

MIT