Automattic/harper Example and Demo Guide: Browser and Node.js Integration

The Automattic/harper repository ships with ready-to-run examples in packages/harper.js/examples/ that demonstrate browser and Node.js integration using the @harper/dev package and the Harper.lint API.

Automattic/harper is an open-source grammar checking engine written in Rust and compiled to WebAssembly for JavaScript environments. If you are looking for a working Automattic/harper example to evaluate the engine or integrate it into your project, the repository provides minimal demos under packages/harper.js/examples/ that require no build configuration to run.

Locating the Automattic/harper Demo Files

All demonstration code lives in the packages/harper.js/examples/ directory according to the source tree. This location contains two primary reference implementations:

• raw-web: Demonstrates CDN-based loading in a static HTML file
• commonjs-simple: Shows programmatic usage in a Node.js environment

Browser Demo: Automattic/harper Example for Web Pages

The raw-web demo proves that Harper works in modern browsers without bundlers.

Key Files in packages/harper.js/examples/raw-web/

The browser example consists of index.html and README.md. The HTML file imports the Harper WASM module from unpkg, while the README documents the script tag requirements and initialization pattern.

Running the Browser Example

The implementation in packages/harper.js/examples/raw-web/index.html loads @harper/dev from a CDN and attaches the lint method to a DOM button:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Harper Demo</title>
    <script type="module">
      import { Harper } from "https://unpkg.com/@harper/dev@latest/dist/harper.js";

      const harper = new Harper();

      document.getElementById("run").addEventListener("click", async () => {
        const text = document.getElementById("input").value;
        const result = await harper.lint(text);
        document.getElementById("output").textContent = JSON.stringify(result, null, 2);
      });
    </script>
  </head>
  <body>
    <textarea id="input" rows="6" cols="60">Your text here…</textarea>
    <button id="run">Run Harper</button>
    <pre id="output"></pre>
  </body>
</html>

Node.js Demo: Server-Side Automattic/harper Example

The CommonJS demonstration shows how to consume Harper in server-side JavaScript.

Source Files in packages/harper.js/examples/commonjs-simple/

This Automattic/harper example resides in packages/harper.js/examples/commonjs-simple/index.js. An accompanying README.md explains the NPM installation process and the API calls needed to retrieve lint results programmatically.

Implementation Details

The script imports the @harper/dev package, instantiates the Harper class, and invokes the asynchronous lint method:

// index.js
const { Harper } = require("@harper/dev");

const harper = new Harper();

async function run() {
  const text = "Harper is a great tool for grammar checking.";
  const result = await harper.lint(text);
  console.log(JSON.stringify(result, null, 2));
}

run().catch(console.error);

Executing the Demo

Install the package and run the file:

npm install @harper/dev
node index.js

This executes the code from packages/harper.js/examples/commonjs-simple/index.js and outputs the grammar suggestions as JSON.

Summary

• Automattic/harper maintains official examples in packages/harper.js/examples/ for immediate testing.
• The raw-web example at packages/harper.js/examples/raw-web/index.html demonstrates browser usage via CDN import.
• The commonjs-simple example at packages/harper.js/examples/commonjs-simple/index.js shows server-side usage with require("@harper/dev").
• Both implementations rely on the Harper constructor and the lint method to process text strings.

Frequently Asked Questions

Where can I find an Automattic/harper example?

You can find working examples in the packages/harper.js/examples/ directory of the repository. This folder contains browser and Node.js demos that demonstrate the core grammar checking functionality without requiring the full VS Code extension build.

What package do I install to run the Harper demo?

Install @harper/dev from NPM. This package contains the WebAssembly binary and JavaScript bindings required to create a Harper instance and call the lint method in both browser and Node.js environments.

Can I run Harper in a plain HTML page without a bundler?

Yes. The packages/harper.js/examples/raw-web/index.html file demonstrates importing Harper directly from unpkg using an ES module script tag. This approach works in any modern browser and requires no build tools or configuration.

Which method performs the grammar check in the Harper examples?

Both examples use harper.lint(text), which is an asynchronous method that accepts a string and returns a promise resolving to an array of lint results. This method is defined in the core Harper engine and exposed through the @harper/dev package.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}