Installation Instructions

Prerequisites

This monorepo uses pnpm for workspace management. You need to install it first.

Install pnpm

# Using npm
npm install -g pnpm

# Or using Homebrew (macOS)
brew install pnpm

# Or using curl
curl -fsSL https://get.pnpm.io/install.sh | sh -

Setup Steps

1. Install Dependencies

# From the monorepo root
pnpm install

This will install all dependencies for all packages.

2. Build All Packages

pnpm run build

This builds:

packages/core - Schema, compiler, Zustand store
packages/ui - React components
packages/blocks - Block definitions
packages/editor - Public API

3. Run Example App

cd examples/nextjs
pnpm run dev

Open http://localhost:3000 to see the editor.

Using the Editor in Your App

Basic Integration

import { EmailEditorReact } from '@returnhypnosis/email-editor/react';
import '@returnhypnosis/email-editor/styles.css';

function App() {
  const [template, setTemplate] = useState(initialTemplate);

  return (
    <EmailEditorReact
      value={template}
      onChange={setTemplate}
      uploadAsset={uploadFn}
    />
  );
}

With API Key (Production)

<EmailEditorReact
  value={template}
  onChange={setTemplate}
  apiKey={process.env.EMAIL_EDITOR_API_KEY}
  compileEndpoint="https://api.returnhypnosis.com/compile"
/>

Alternative: Use npm with Local Packages

If you prefer npm without workspaces:

Build each package individually:
```
cd packages/core && npm install && npm run build
cd ../ui && npm install && npm run build
cd ../blocks && npm install && npm run build
cd ../editor && npm install && npm run build
```

Link packages locally:

cd packages/core && npm link
cd ../ui && npm link @returnhypnosis/email-editor-core && npm link
cd ../blocks && npm link @returnhypnosis/email-editor-core && npm link
cd ../editor && npm link @returnhypnosis/email-editor-core @returnhypnosis/email-editor-ui @returnhypnosis/email-editor-blocks && npm link

Run example:
```
cd examples/nextjs
npm link @returnhypnosis/email-editor
npm run dev
```

Troubleshooting

"Cannot find module" errors

Make sure all packages are built:

pnpm run build

TypeScript errors

Clean and rebuild:

pnpm run clean
pnpm run build

Port already in use

Change the port in examples/nextjs:

PORT=3001 pnpm run dev

Zustand store not initializing

Ensure you're importing from the correct package:

// Correct
import { useEditorStore } from '@returnhypnosis/email-editor-core';

// Wrong
import { useEditorStore } from '@returnhypnosis/email-editor-ui';

Development Workflow

Watch Mode

For active development, run packages in watch mode:

# Terminal 1: Watch core package
cd packages/core
pnpm run dev

# Terminal 2: Watch ui package
cd packages/ui
pnpm run dev

# Terminal 3: Run example app
cd examples/nextjs
pnpm run dev

Changes will rebuild automatically.

Running Tests

# Run all tests
pnpm run test

# Run tests in watch mode
pnpm run test:watch

Next Steps

Once installed, check out:

Quick Start - Quick overview
Integration - Integration patterns
API Reference - API reference