Examples & Demos
Explore interactive examples and demonstrations of QuillKit features.
⚠️ API Key Required
All examples require a valid API key. The demo pages use a demo API key. For your own projects, you'll need to obtain an API key from the QuillKit service.
Interactive Playground: Try out all features in our
live playground.
Feature Demos
Focused demonstrations of specific editor features:
- API Key & CDN Integration Demo - Using QuillKit with API keys via CDN
- Icon Modal Demo - Proper icon rendering with Bootstrap Icons and Font Awesome
- List Styles Demo - Multiple bullet and numbering styles
- Math Font Size Demo - Configurable font sizes for mathematical expressions
- Math Resize Demo - Interactive resizing of math elements
- MathML Colors Demo - Colored mathematical expressions
- Notebox Demo - Simple notebox plugin demonstration
- Symbol Picker Demo - Mathematical symbol insertion
Examples Directory
Complete examples showcasing different use cases:
- Main Demo - Comprehensive editor demonstration with all features
- Bookmark Demo - Bookmark functionality
- Column Demo - Multi-column layouts (1, 2, and 3 columns)
- Table Demo - Table creation and manipulation
- Table Resize Demo - Resizable table columns and rows
- Image Resize Demo - Image insertion and resizing
- Icons Demo - Icon libraries integration
- Plugin System Demo - Modular plugin architecture
- Global API Demo - Global API usage examples
- Kit Icon Support - Font Awesome Kit integration
Test Pages
Test pages for specific features and bug fixes:
Math & LaTeX Tests
- Math Click to Edit
- Math Font Size Changeable
- Math Resize Persistence
- Math Selection Formatting
- Comprehensive Math Fix
- KaTeX Comprehensive
- LaTeX Font Family
- LaTeX Selection Fix
- Math Spacing
Table Tests
Column Layout Tests
Icon Tests
Font & Formatting Tests
List Tests
Other Tests
Code Examples
Basic Initialization
// Simple initialization with API key
const editor = QuillKit.init('#my-editor', {
apiKey: 'your_api_key_here' // Required
});With Custom Options
const editor = QuillKit.init('#my-editor', {
apiKey: 'your_api_key_here', // Required
toolbar: true,
height: '600px',
mathSupport: true,
mathFontSize: '20pt',
pageView: true
});Loading Specific Plugins
const editor = QuillKit.init('#my-editor', {
apiKey: 'your_api_key_here', // Required
plugins: [
'textFormatting',
'alignment',
'list',
'history'
]
});Managing Multiple Editors
// Initialize multiple editors
QuillKit.init('#editor-1', { apiKey: 'your_api_key_here' });
QuillKit.init('#editor-2', { apiKey: 'your_api_key_here' });
// Get all instances
const editors = QuillKit.getAllInstances();
console.log(`Total editors: ${editors.length}`);
// Get specific instance
const editor1 = QuillKit.getInstance('editor-1');
console.log(editor1.getValue());