Quickstart

A working editor with live spellcheck, in about five minutes. No bundler, no build step, no account. Everything below runs from a plain ES-module page.

1. Install

@sqwig/core is the editor. It has no framework dependency and no runtime dependencies of its own.

terminal
# the editor
npm i @sqwig/core

# optional, if you are on React
npm i @sqwig/react

No npm? The installation section links a zip of the same files.

2. Copy the runtime assets

This is the one step every stack shares, and the one people skip. Sqwig ships three things in @sqwig/core/dist that a bundler cannot inline, because they are fetched at runtime rather than imported:

  • spell_wasm_bg.wasm — the spellcheck engine
  • spell.worker.js — the Web Worker it runs in, so checking never blocks typing
  • dict/ — the dictionary chunks

Copy them into a folder your app serves statically, then point the spellchecker at that folder:

terminal
cp -r node_modules/@sqwig/core/dist public/sqwig

Shortcut worth taking: copy the whole dist/ folder, as above, and the module sits beside its own assets. Then you can omit assetBaseUrl entirely — assets resolve relative to the module by default. Copy only some of the files and you will be passing paths by hand forever.

3. Create the editor

This is a complete, working page. Save it, serve it over HTTP, and you have a spellchecking editor.

index.html
<div id="editor"></div>
<script type="module">
  import { createEditor, createSpellChecker } from "/sqwig/index.js";

  const editor = createEditor(document.getElementById("editor"), {
    placeholder: "Say something…",
    spell: createSpellChecker(), // assets resolve beside index.js
    trustIndicator: { wordCount: true },
    license: "free",
  });

  editor.on("change", () => console.log(editor.getHTML()));
</script>

Serve it over HTTP. Opening the file directly with file:// will not work — browsers refuse to load ES modules and Web Workers from the filesystem, and you will see an empty box where the editor should be.

4. The license option is required

Every editor takes a license. It is a TypeScript-required option, and the reason is that we would rather you make a deliberate choice than discover a badge in production.

  • license: "free" — accepts the Sqwig Free License. Fully functional, one application, a small “Powered by Sqwig” badge.
  • license: "<your key>" — a purchased key. Badge off, per your entitlements.
  • Omitted entirely — still a fully functional editor, plus an unlicensed badge and one console note.

Keys are verified offline, in your users' browsers. There is no license server, no activation call, and nothing to be down. See licensing for the details.

5. Check it actually works

Type “this is a mispelled word” into the editor. Within a second or two you should see a red wavy underline under mispelled; click it for suggestions. If the underline never appears, the editor is fine but the spellchecker did not load — go to troubleshooting below.

The editor is designed to degrade rather than fail: if the dictionary cannot load, you still get a working rich text box. That is deliberate, and it is why a broken asset path is quiet rather than loud.

Troubleshooting

The editor renders, but nothing is ever underlined

The spellchecker could not fetch its assets. Open devtools → Network and look for a 404 on spell.worker.js, spell_wasm_bg.wasm or anything under dict/. Fix the path by passing it explicitly:

js
createSpellChecker({ assetBaseUrl: "/sqwig/" })

Nothing renders at all

Almost always file://. Serve the page over HTTP.

Your bundler tried to inline the worker or the WASM

Do not import those three assets — copy them. They are runtime files, not module graph members. If your bundler is rewriting their URLs, you have imported them somewhere by mistake.

A Content-Security-Policy blocks the worker

The worker is same-origin, so worker-src 'self' is enough. The WASM engine needs 'wasm-unsafe-eval' in script-src — an unfortunate name for something that only permits WebAssembly compilation. See CSP.

You need it to work without the worker

Pass worker: false to createSpellChecker. Checking then runs on the main thread, which is simpler but can stutter on long documents.

Where to go next