This is a demo application that showcases the capabilities of the AnycodeEditor library. It demonstrates a code editor with multi-file support where each file maintains its state (cursor position, scroll position, selection) when switching between tabs.

AnycodeEditor is a powerful, lightweight code editor library built with TypeScript that provides:

• Syntax highlighting for multiple programming languages
• Tree-sitter integration for accurate parsing
• State management for cursor positions, selections, and scroll positions
• Edit operations with undo/redo support
• Language-agnostic architecture for easy extension

• Multi-file editing with tabbed interface
• State persistence - each file maintains its editor state
• File management - create, rename, and close files
• Change tracking - visual indicators for modified files
• Language support - syntax highlighting for multiple languages
• Responsive design - modern, intuitive user interface

1. Switch between files: Click on any file tab
2. Create new file: Click the "+" button in the tab bar
3. Close file: Click the "×" button on the tab
4. Rename file: Double-click on the file name
5. Save changes: Click the "Save" button in the toolbar

The AnycodeEditor library is available as separate packages:

# Core editor library
npm install anycode-base

# React wrapper component
npm install anycode-react

import { AnycodeEditor } from 'anycode-base';

// Create editor instance
const editor = new AnycodeEditor(content, { language: 'javascript' });

// Initialize the editor
await editor.init();

// Set up edit handler
editor.setOnEdit((edit) => {
    console.log('Edit applied:', edit);
});

// Get current content
const content = editor.getContent();

// Get editor state (cursor, selection, scroll)
const state = editor.getState();

// Restore editor state
editor.setState(state);

import React from 'react';
import { AnycodeEditorReact, AnycodeEditor } from 'anycode-react';

function MyEditor() {
    // First create an AnycodeEditor instance
    const [editor, setEditor] = useState<AnycodeEditor | null>(null);
    
    useEffect(() => {
        const initEditor = async () => {
            const initialContent = 'console.log("Hello, World!");';
            const newEditor = new AnycodeEditor(initialContent, { language: 'javascript' });
            await newEditor.init();
            setEditor(newEditor);
        };
        initEditor();
    }, []);

    return (
        <div style={{ height: '400px' }}>
            {editor && (
                <AnycodeEditorReact
                    id="my-editor"
                    editorState={editor}
                />
            )}
        </div>
    );
}

The AnycodeEditor supports syntax highlighting for:

• JavaScript/TypeScript - Full ES6+ support
• Python - Python
• C/C++ - C and C++
• Java - Java 8+ features
• Go - Go 1.x syntax
• Rust - Modern Rust features
• CSS/HTML - Web standards
• JSON/YAML - Configuration formats
• Bash - Shell scripting
• Lua - Lua syntax
• Kotlin - Kotlin features
• Zig - Zig language support
• C# - .NET C# syntax
• TOML - Configuration format

Each editor instance is preserved in memory, maintaining all state (cursor, selection, scroll) without serialization. This provides instant switching between files with perfect state restoration.

The editor uses operational transformation for efficient text editing:

• Insert operations - Add text at specific positions
• Delete operations - Remove text ranges
• Batch operations - Combine multiple edits

Built on Tree-sitter for accurate parsing and syntax highlighting:

• Language-agnostic parsing
• Incremental parsing for performance
• Error recovery for malformed code

• Node.js 18+
• pnpm 8+

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build demo
pnpm build

# Build core library
cd anycode-base && pnpm build

# Build React wrapper
cd anycode-react && pnpm build

Contributions are welcome! Please feel free to submit issues and pull requests.

Note: This is a demo application showcasing the AnycodeEditor library. For production use, consider the specific requirements of your project and the current stability of the library.