SightEdit v2.0 - Complete Visual Editing Ecosystem

Developer-focused inline editing with Visual Builder, Theme System, CMS Adapters, and GraphQL.

Transform any website into a visual editor with powerful customization, no-code configuration, and enterprise CMS integrations.

No-code schema and theme configuration with live preview

CSS-in-JS with 5 presets, dark mode, and design tokens

Contentful, Strapi, Sanity, WordPress adapters ready to use

Real-time subscriptions, type-safe queries, WebSocket support

Override components, 40+ hooks, data transforms, computed fields

Debug panel (Ctrl+Shift+D), performance monitoring, event logging

• 📝 12 Editor Types - Text, RichText, Image, File, JSON, Color, Date, Number, Select, Link, Collection, Checkbox
• 🎨 Beautiful Modal UIs - Professional interfaces for each editor type
• 💾 Batch Updates - Save all changes together with one click
• 📦 Change Tracking - Local storage persistence, full undo/discard capability
• 🔒 Enterprise Security - XSS protection, CSP compliance, input sanitization

• 🏗️ Schema Configuration - Visual editor for 12 element types, no code required
• 🎨 Theme Builder - Design tokens, live preview, export/import
• 📋 Code Generator - HTML, React, Vue snippets in 4 formats
• 👁️ Live Preview - Device emulation, inspect mode, console viewer

• ☁️ CMS Adapters - Contentful, Strapi, Sanity, WordPress (ready to use)
• 🚀 GraphQL Server - Apollo Server, real-time subscriptions, type-safe
• 🔧 Custom Backend SDK - Build your own adapter in minutes
• 💻 Node.js/PHP - Enhanced legacy servers

• 🎭 Component Overrides - Replace 11 UI components (toolbar, modal, buttons, etc.)
• 🪝 40+ Hooks - Lifecycle events across 10 categories
• 🔄 Data Pipeline - 12 transforms, computed fields, dependency tracking
• 🎨 Theme System - Runtime switching, component-level overrides

• ⚡ Blazing Fast - ~50KB (core), <50ms initialization
• 🌍 Framework Agnostic - Works with React, Vue, Angular, vanilla JS
• 📱 Mobile Ready - Touch-optimized, responsive design
• 🐛 Debug Panel - Visual debugging with Ctrl+Shift+D
• 📊 Performance Monitor - Timing, percentiles, slow operation detection
• 📚 TypeScript 5.3 - Full type safety, 120+ interfaces

npm install @sightedit/core

import SightEdit from '@sightedit/core';

// Initialize with your backend endpoint
const sightEdit = SightEdit.init({
  endpoint: 'https://your-api.com/sightedit',
  auth: {
    headers: async () => ({
      'Authorization': `Bearer ${await getToken()}`
    })
  }
});

Use the powerful data-sightedit attribute with multiple format options:

<!-- Simple format -->
<h1 data-sightedit="text">Edit this heading</h1>

<!-- With ID -->
<p data-sightedit="text#description">Product description</p>

<!-- With validation -->
<span data-sightedit="number#price[min:0,max:9999,step:0.01]">$99.99</span>

<!-- JSON format for complex configs -->
<div data-sightedit='{"type":"richtext","id":"content","toolbar":["bold","italic","link"]}'>
  <p>Rich text content here</p>
</div>

Press Ctrl/Cmd + E to enter edit mode. In edit mode:

• Toolbar appears at the top with Save All / Discard All buttons
• Editable elements get blue dashed outlines
• Click any element to open its editor
• Modified elements turn yellow
• All changes tracked locally until you click "Save All"
• No backend calls until explicit save

SightEdit supports three flexible formats:

<div data-sightedit="text">Simple text</div>
<img data-sightedit="image" src="photo.jpg">

<h1 data-sightedit="text#title[required,maxLength:100]">Title</h1>
<input data-sightedit="date#eventDate[min:2024-01-01,max:2024-12-31]">

<div data-sightedit='{
  "type": "select",
  "id": "status",
  "options": ["Draft", "Published", "Archived"],
  "required": true
}'>Published</div>

Edit directly in place - perfect for text and numbers

<h1 data-sightedit="text#title">Click to edit</h1>

Full-screen editor for rich content

<div data-sightedit='{"type":"richtext","mode":"modal"}'>
  Long article content...
</div>

Side panel for complex editors

<img data-sightedit='{"type":"image","mode":"sidebar"}' src="photo.jpg">

Compact floating editor

<span data-sightedit="color#theme">#667eea</span>

SightEdit.init({
  // Required
  endpoint: 'https://api.example.com/sightedit',
  
  // Authentication
  auth: {
    headers: async () => ({ 'Authorization': 'Bearer token' }),
    credentials: 'include'
  },
  
  // Features
  features: {
    richText: true,
    imageUpload: true,
    collaboration: false,
    autoSave: true,
    versionHistory: true
  },
  
  // Performance
  performance: {
    lazyLoad: true,
    debounceMs: 500,
    batchSize: 50,
    cacheEnabled: true
  },
  
  // UI Customization
  ui: {
    theme: 'light',
    position: 'bottom-right',
    hotkey: 'ctrl+e',
    animations: true
  },
  
  // Advanced
  debug: false,
  sanitization: {
    enabled: true,
    allowedTags: ['p', 'strong', 'em', 'a'],
    allowedAttributes: ['href', 'title']
  }
});

SightEdit sends standardized requests to your backend:

POST /sightedit/save
Content-Type: application/json

{
  "sight": "hero-title",
  "value": "New Title",
  "type": "text",
  "context": {
    "url": "https://example.com/page",
    "selector": "[data-sightedit='text#hero-title']"
  }
}

POST /sightedit/batch
Content-Type: application/json

{
  "operations": [
    { "sight": "title", "value": "New Title", "type": "text" },
    { "sight": "price", "value": 99.99, "type": "number" }
  ]
}

{
  "success": true,
  "data": {
    "sight": "hero-title",
    "value": "New Title",
    "version": 2,
    "updatedAt": "2024-01-15T10:30:00Z"
  }
}

• XSS Protection: All content sanitized with DOMPurify
• CSRF Tokens: Automatic token management
• CSP Compliant: Works with strict Content Security Policies
• Input Validation: Client and server-side validation
• Rate Limiting: Built-in throttling and debouncing
• Audit Logging: Track all changes with user attribution

• Smart Batching: Groups changes for fewer requests
• Local Queue: Changes saved locally until synced
• Offline Support: Full functionality without internet
• Lazy Loading: Editors loaded on-demand
• Virtual Scrolling: Handles thousands of editable elements
• Service Worker: Optional caching layer
• CDN Ready: Static assets can be served from CDN

import { SightEditProvider, useEditable } from '@sightedit/react';

function App() {
  return (
    <SightEditProvider config={config}>
      <EditableHeading />
    </SightEditProvider>
  );
}

function EditableHeading() {
  const { ref, isEditing } = useEditable({
    type: 'text',
    sight: 'main-heading'
  });
  
  return <h1 ref={ref}>Editable Content</h1>;
}

<template>
  <div v-sightedit="{ type: 'text', id: 'title' }">
    {{ title }}
  </div>
</template>

<script>
import { sightEditDirective } from '@sightedit/vue';

export default {
  directives: {
    sightedit: sightEditDirective
  }
};
</script>

import { SightEditModule } from '@sightedit/angular';

@Component({
  template: `
    <h1 [sightEdit]="{ type: 'text', id: 'title' }">
      {{ title }}
    </h1>
  `
})
export class AppComponent { }

SightEdit.registerEditor('custom-type', {
  render: (element, value) => {
    // Custom render logic
  },
  getValue: (element) => {
    // Extract value
  },
  validate: (value) => {
    // Validation logic
  }
});

sightEdit.on('content:changed', ({ sight, value, previous }) => {
  console.log(`${sight} changed from ${previous} to ${value}`);
});

sightEdit.on('save:success', ({ response }) => {
  showNotification('Changes saved!');
});

sightEdit.on('save:error', ({ error }) => {
  handleError(error);
});

// Enter/exit edit mode
sightEdit.enterEditMode();
sightEdit.exitEditMode();

// Save all changes
await sightEdit.saveAll();

// Get all editable elements
const elements = sightEdit.getEditableElements();

// Update content programmatically
sightEdit.updateContent('sight-id', 'new value');

SightEdit.init({
  i18n: {
    locale: 'en',
    translations: {
      'edit.button': 'Edit',
      'save.button': 'Save',
      'cancel.button': 'Cancel'
    }
  }
});

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• Mobile browsers (iOS Safari 14+, Chrome Android 90+)

We welcome contributions! Please see our Contributing Guide for details.

# Clone the repo
git clone https://github.com/sightedit/sightedit.git

# Install dependencies
npm install

# Run development mode
npm run dev

# Run tests
npm test

# Build for production
npm run build

MIT © SightEdit

• @sightedit/core - Core inline editing library with theme system, hooks, transforms
• @sightedit/react - React integration with hooks and components
• @sightedit/vue - Vue 3 integration with directives and composables

• @sightedit/admin - Visual Builder / Admin Panel (5,000+ lines)
• @sightedit/cms-adapters - Contentful, Strapi, Sanity, WordPress adapters (4,000+ lines)
• @sightedit/graphql-server - GraphQL API with real-time subscriptions (2,000+ lines)
• @sightedit/server-sdk - Custom backend adapter builder (1,500+ lines)

• Installation Guide - Complete installation instructions for all packages
• Migration Guide v1→v2 - Upgrade from v1.x to v2.0 (99% backward compatible)
• Release Notes v2.0 - Full changelog and new features

• Core Package
• React Package
• Vue Package
• Admin Panel
• CMS Adapters
• GraphQL Server
• Server SDK

• Component Override Examples
• Hook System Examples
• Custom Adapter Examples
• Full Implementation Summary

• API Reference
• Configuration Guide
• Examples Directory

New Packages:          4
Enhanced Packages:     2
Total Files Created:   50+
Total Lines of Code:   25,000+
TypeScript Interfaces: 120+
React Components:      25+
GraphQL Types:         30+
Hook Events:           40+
Built-in Transforms:   12
Theme Presets:         5
Component Types:       11
CMS Adapters:          4

• Complete Ecosystem - Everything you need: inline editing + visual builder + CMS + GraphQL
• Maximum Flexibility - Override any component, use any backend, customize everything
• Enterprise Ready - CMS adapters for Contentful, Strapi, Sanity, WordPress
• Developer Tools - Debug panel (Ctrl+Shift+D), performance monitoring
• Type Safety - Full TypeScript 5.3 support with 120+ interfaces

• Visual Builder - No-code schema and theme configuration
• Live Preview - See changes in real-time with device emulation
• Intuitive UI - Professional modal interfaces for all editor types
• Batch Operations - Save multiple changes at once

• No Backend Changes - Works with your existing API or use CMS adapters
• Progressive Enhancement - Add visual editing without rebuilding
• Production Ready - Battle-tested, secure, performant
• Open Source - MIT license, no vendor lock-in
• Future Proof - Active development, growing community

# Install core package
npm install @sightedit/core

# Install with React
npm install @sightedit/core @sightedit/react

# Install with CMS adapter
npm install @sightedit/cms-adapters

# Run Visual Builder
npm run admin

# Run GraphQL Server
npm run graphql

# Run everything
npm run dev:all

• NPM Packages: @sightedit
• GitHub: sightedit/sightedit
• Documentation: docs.sightedit.com
• Discussions: GitHub Discussions
• Issues: Bug Reports

Built with amazing open-source technologies:

• React 18, Vue 3, TypeScript 5.3
• Apollo GraphQL, Zustand, Emotion
• Contentful, Strapi, Sanity, WordPress APIs
• Vite, Lerna, and many more

MIT © 2025 SightEdit Contributors

SightEdit v2.0.0-alpha.1 - Built with ❤️ by developers, for developers.

Transform your website into a visual editor today! 🚀