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

> Explore Automattic harper examples to integrate browser and Node.js. Discover the Harper lint API with this comprehensive guide and demo.

- Repository: [Automattic/harper](https://github.com/Automattic/harper)
- Tags: getting-started
- Published: 2026-07-26

---

**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`](https://github.com/Automattic/harper/blob/main/index.html) and [`README.md`](https://github.com/Automattic/harper/blob/main/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`](https://github.com/Automattic/harper/blob/main/packages/harper.js/examples/raw-web/index.html) loads `@harper/dev` from a CDN and attaches the `lint` method to a DOM button:

```html
<!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`](https://github.com/Automattic/harper/blob/main/packages/harper.js/examples/commonjs-simple/index.js). An accompanying [`README.md`](https://github.com/Automattic/harper/blob/main/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:

```javascript
// 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:

```bash
npm install @harper/dev
node index.js

```

This executes the code from [`packages/harper.js/examples/commonjs-simple/index.js`](https://github.com/Automattic/harper/blob/main/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`](https://github.com/Automattic/harper/blob/main/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`](https://github.com/Automattic/harper/blob/main/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`](https://github.com/Automattic/harper/blob/main/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.