@webnesting/sandwrite

WebNesting Sandwrite is a next-generation, open-source editor platform for teams that need production-grade customization without surrendering control to third-party vendors. Sandwrite provides balloon, inline, and full-mode shells that all share the same extensible core.

Installation

npm install @webnesting/sandwrite

Why Sandwrite

• Composable modes & controls – assemble only the UI chrome and commands you need; every control is individually importable.
• Raw lifecycle hooks – observe init → render → input → command → destroy with event payloads you can route to any analytics or automation stack.
• Schema adapters – keep content portable between different CMS targets or custom renderers.
• AAA accessibility – keyboard parity, ARIA state announcements, reduced-motion support, and focus management are requirements, not stretch goals.
• Immutable attribution – every build renders a "Powered by WebNesting" badge. Free users keep it; paid licenses can hide it entirely.

Basic Usage

import { createSandwrite, withDefaultControls } from '@webnesting/sandwrite';
import '@webnesting/sandwrite/style.css';

const sandwrite = createSandwrite({
  defaultMode: 'balloon',
  controls: withDefaultControls()
});

const editor = sandwrite.mount(element, {
  placeholder: 'Start typing...'
});

Licensing Model

Sandwrite uses a dual-license model that balances open-source accessibility with sustainable development.

Community License (Default)

Use Sandwrite freely under the Sandwrite Attribution License with one requirement:

The "Powered by WebNesting" badge must remain visible and unmodified.

| Allowed | Not Allowed | |---------|-------------| | Use in personal projects | Hide or remove the badge | | Use in commercial applications | Restyle or rebrand the badge | | Modify editor functionality | Obscure the badge from users | | Redistribute with attribution | Disable badge functionality |

The badge:

• Appears in the editor status bar (full mode) or as a floating element (balloon/inline modes)
• Links to webnesting.com
• Automatically adapts to light/dark themes
• Uses Shadow DOM to prevent style interference

Commercial License

For organizations that need badge-free deployments:

| Feature | Community | Commercial | |---------|-----------|------------| | Full editor functionality | ✓ | ✓ | | Powered by badge | Required | Optional (can hide) | | Closed-source embedding | ✗ | ✓ | | Domain authorization keys | ✗ | ✓ | | Priority support | ✗ | ✓ |

How it works:

1. Obtain a license token from WebNesting
2. Add the token to your editor target element:

   <div id="editor" data-branding-token="your-license-key"></div>

3. Configure the powered-by plugin with your verifier:

   createSandwrite({
     plugins: [
       createPoweredByPlugin({
         verifyToken: (token) => validateWithServer(token)
       })
     ]
   });

When the token is valid, the badge is hidden. If the license expires or the token becomes invalid, the badge automatically reappears.

Contact [email protected] for Commercial License inquiries.

Focus Management

Sandwrite exposes its focus manager so host apps can either keep the built-in auto-handling or opt into full manual control.

• Pass focusManager.behavior: 'auto' | 'manual' through createSandwrite (or sandwrite.mount) to toggle whether Sandwrite listens to global focus/pointer events.
• Provide a custom Focus Manager via focusManager.factory(context) if you need to override the default implementation.
• editor.blur() is available alongside editor.focus() so you can symmetrically manage engagement.
• Even in manual mode, editor.focusManager.onChange and editor.hooks.on('focus' | 'blur' | 'focusChange', ...) stream every transition back to your app.

License

Sandwrite is released under the Sandwrite Attribution License. See the Licensing Model section above for details on Community vs Commercial usage.