spellcore

SpellCore

The ultimate, framework-agnostic spell-checking engine for the web.

SpellCore is designed to be incredibly fast, highly customizable, and completely offline. It runs entirely in the browser (or Node.js) and offers deep integration for both Vanilla JS and React.

Quick Start

You only need to install one package to get the entire ecosystem:

npm install spellcore

This single command installs the core engine, the standard dictionaries, and the React bindings all at once!

---

Usage Examples

Because you installed the spellcore umbrella package, you have full access to all of its modules. Here is how simple it is to use:

1. The React Way (Easiest)

If you are using React, you can instantly add spell-checking to any text area using our pre-built hook and overlay UI.

import { useState } from 'react';
// Import UI and Hooks from the react module
import { SpellCheckOverlay, useSpellCheck } from 'spellcore-react';
// Import dictionaries from the dictionary module
import { englishDictionary } from 'spellcore-dictionaries';

export default function MyEditor() {
  const [text, setText] = useState('');

  // 1. Initialize the hook
  const { result, replaceWord, addWordToDictionary } = useSpellCheck(text, {
    dictionary: englishDictionary,
    debounceMs: 300,
  });

  return (
    <div style={{ position: 'relative' }}>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />

      {/* 2. Drop in the overlay! */}
      <SpellCheckOverlay
        result={result}
        onReplace={replaceWord}
        onIgnore={addWordToDictionary}
      />
    </div>
  );
}

2. The Vanilla JS Way (Framework Independent)

If you aren't using React, or you want to build your own custom UI, you can use the core engine directly:

// Import the core engine and dictionaries
import { createSpellChecker } from 'spellcore-core';
import { englishDictionary } from 'spellcore-dictionaries';

// 1. Initialize the spellchecker
const checker = createSpellChecker({
  dictionary: englishDictionary,
});

// 2. Check your text
const result = checker.check('Thiss is a tesst of the spelll checker.');

console.log(result.misspelledWords);
// Output: ["Thiss", "tesst", "spelll"]

3. The Web Worker Way (For massive documents)

Spell checking huge documents on the main thread can cause UI lag. SpellCore includes a Web Worker wrapper out-of-the-box to offload this work:

import { SpellCheckerWorker } from 'spellcore-worker';

// The worker runs in a separate background thread!
const worker = new SpellCheckerWorker();

worker.check('Thiss is a tesst').then((result) => {
  console.log('Worker found typos:', result.misspelledWords);
});

---

What's Inside?

When you install spellcore, it automatically downloads these specific packages for you:

• spellcore-core: The highly-optimized spell-checking algorithms (SymSpell).
• spellcore-dictionaries: Pre-built dictionary data structures.
• spellcore-react: Hooks and UI components for React applications.
• spellcore-worker: Background thread wrappers for extreme performance.