QuillKit Demo

⚠️ 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.

A powerful JavaScript library for rich-text editing in HTML textareas

Basic Rich Text Editor

Features:

  • Full toolbar with text formatting (Bold, Italic, Underline, Strikethrough)
  • Text alignment controls (Left, Center, Right)
  • List support (Bullet and Numbered lists)
  • Heading levels (H1, H2, H3, Paragraph)
  • Insert links and images
  • LaTeX and MathML support for mathematical expressions
  • Undo/Redo functionality
  • Mode switching: Rich Text, HTML, and CSS views

Minimal Editor (No Toolbar)

This editor demonstrates the library with the toolbar disabled, perfect for simple text input.

Custom Height Editor

This editor has a custom height of 300px.

Page View Demo

Page View Feature: The editor now supports rendering content on a virtual piece of paper, similar to Microsoft Word!

  • 8.5" x 11" paper size (standard US Letter)
  • 1 inch margins on all sides
  • Realistic paper appearance with shadow
  • Click the 📄 button in the toolbar to toggle page view on/off

Custom HTML Snippets Demo

Custom Snippet Feature: You can now add custom HTML snippet groups that users can browse and insert!

  • Define custom snippet groups (e.g., "math-components", "text-templates")
  • Each group gets its own toolbar button (⊕ icon)
  • Clicking the button shows a modal with all available snippets
  • Users can preview and insert snippets with one click

How to Use

1. Include the library in your HTML:

<script src="dist/quillkit.js"></script>

2. Initialize the editor on a textarea:

const editor = new QuillKit('#my-textarea');

3. Access the content:

const html = editor.getValue();