# TestDrive-JSUI Examples
This directory contains examples demonstrating TestDrive-JSUI as a standalone JavaScript library.
---
## 📁 Examples
### `standalone.html` - Proof of Concept
**Purpose**: Minimal proof that TestDrive-JSUI can work as a pure JavaScript library.
**Features**:
- ✅ Runs directly in browser (no server needed)
- ✅ Markdown rendering using marked.js
- ✅ Save/load to browser localStorage
- ✅ Download markdown files
- ✅ Zero dependencies on Python/Ruby/Java
**How to Use**:
```bash
# Option 1: Open directly in browser
open examples/standalone.html
# Option 2: From file system (works!)
# Just double-click the file
# Option 3: Serve with any static server
python3 -m http.server 8000
# Then visit: http://localhost:8000/examples/standalone.html
```
**What It Demonstrates**:
- JavaScript can handle all rendering
- No backend is required for core functionality
- Language adapters (Python/Ruby/Java) are truly optional
---
### `full-editor.html` - Complete Library Demo
**Purpose**: Demonstrates the full TestDriveJSUI library with all features.
**Features**:
- ✅ **Full Library Integration**: Uses complete `TestDriveJSUI` class
- ✅ **Section-Based Editing**: Click sections to edit them independently
- ✅ **Interactive Controls**: Floating control panel with document operations
- ✅ **Event System**: Listen to save, content-changed, and other events
- ✅ **Multiple Modes**: Switch between edit and view modes
- ✅ **Auto-save**: Optional automatic saving (currently disabled)
- ✅ **Keyboard Shortcuts**: Ctrl+S to save, Escape to close editor
- ✅ **Status Bar**: Real-time document statistics
- ✅ **Image Editing**: Advanced image editing with drag & drop
**How to Use**:
```bash
# Serve with any static server (required for proper module loading)
python3 -m http.server 8000
# Then visit: http://localhost:8000/examples/full-editor.html
```
**What It Demonstrates**:
- Complete TestDriveJSUI API usage
- Integration of all components (SectionManager, DOMRenderer, DocumentControls)
- Event-driven architecture
- Mode switching (edit/view)
- Document operations (save, load, download, reset)
- Real-time status updates
**API Example from Demo**:
```javascript
// Initialize editor
const editor = new TestDriveJSUI({
container: '#editor-container',
markdown: '# Hello World',
mode: 'edit',
theme: 'github',
autosave: false,
shortcuts: true
});
// Listen to events
editor.on('save', (data) => {
console.log('Saved:', data.markdown);
});
// Get/set content
const markdown = editor.getMarkdown();
editor.setMarkdown('# Updated content');
// Get status
const status = editor.getStatus();
console.log('Sections:', status.totalSections);
```
---
## 🎯 Architecture Validation
These examples validate the JavaScript-first architecture:
### ✅ Implemented Features
- Markdown parsing (marked.js)
- HTML rendering
- UI display and styling
- Content management
- Save/load (localStorage)
- File download
- **Interactive editing UI** ✅
- **Section-based editing** ✅
- **Control panels (edit, debug, status)** ✅
- **Keyboard shortcuts** ✅
- **Themes** ✅
- **Event system** ✅
### 🚧 Future Enhancements
- Plugin system
- Additional themes
- Collaborative editing
- Cloud storage adapters
- Mobile-optimized UI
### 🔧 What Backend Adapters Provide (Optional)
- Asset serving at scale
- Server-side storage
- User authentication
- Multi-user collaboration
- Testing infrastructure
---
## 🚀 Getting Started
### 1. Try the Proof of Concept
```bash
# Open standalone.html in any browser
open examples/standalone.html
# Test basic functionality:
# - Markdown rendering
# - Save/load/download buttons
```
### 2. Explore the Full Editor
```bash
# Serve the examples directory
cd examples
python3 -m http.server 8000
# Open in browser:
# http://localhost:8000/full-editor.html
# Test advanced features:
# - Click sections to edit
# - Use toolbar buttons
# - Try keyboard shortcuts (Ctrl+S, Escape)
# - Switch between edit/view modes
```
### 3. Integrate Into Your Project
```html
```
---
## 📝 Notes
**Performance**: Loading from CDN (marked.js) means internet connection required. For fully offline use, download marked.js locally.
**Browser Support**: Works in all modern browsers (Chrome, Firefox, Safari, Edge). Requires ES6 support.
**File Size**: The standalone example loads individual JS files. Production version would use bundled `testdrive-jsui.min.js` (~50KB).
---
## 🤝 Contributing Examples
Want to add an example? Please ensure it:
1. Works standalone (no complex build required)
2. Demonstrates a specific use case
3. Includes inline documentation
4. Works by just opening in browser
---
**Status**: Full Implementation Complete ✅
**Last Updated**: 2025-12-16
**Library Version**: 1.0.0