Interactive demonstration of the new math element resizing feature
⚠️ API Key Required: QuillKit requires a valid API key to function. This demo uses a demo API key. For your own projects, you'll need to obtain an API key from the QuillKit service.
📋 How to Use
Insert Math: Use the buttons below or the toolbar to insert LaTeX or MathML equations
Resize Math: Hover over a math element to see the green resize handles at the corners
Drag to Resize: Click and drag any corner handle to resize the math element proportionally
Metadata Storage: Size information is automatically saved in data-width and data-height attributes
Load Content: Click "Load Pre-sized Math" to see how saved sizes are restored from metadata
✨ Key Features
✅ Proportional Resizing: Math elements maintain their aspect ratio when resized
✅ Visual Feedback: Green corner handles appear on hover (vs blue for images)
✅ Metadata Persistence: Sizes are stored in data attributes and restored on load
✅ Works with LaTeX and MathML: Both types of math elements are resizable
✅ Similar to Images: Uses the same intuitive corner-drag interface as image resizing
🎯 Quick Actions
📝 Editor
💡 Tip: The resize handles use green color to distinguish them from image resize handles (which are blue). When you resize a math element, its new dimensions are automatically saved in the HTML so they persist when you reload the content.