🚀 QuillKit Demo

Complete guide to using QuillKit with API Key & CDN Integration

1

Include QuillKit from CDN

The easiest way to get started is to include QuillKit directly from a CDN. No build tools or npm installation required!

Option A: unpkg CDN

<!-- Latest version -->
<script src="https://unpkg.com/@atlarafirm/quillkit/dist/quillkit.js"></script>

<!-- Or always use latest (may break with major updates) -->
<script src="https://unpkg.com/@atlarafirm/quillkit/dist/quillkit.js"></script>

Option B: jsDelivr CDN

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/@atlarafirm/quillkit/dist/quillkit.js"></script>

<!-- Or always use latest -->
<script src="https://cdn.jsdelivr.net/npm/@atlarafirm/quillkit/dist/quillkit.js"></script>
💡 Note: For this demo, we're using a local copy, but in production you would use one of the CDN links above.
2

Get Your API Key (Optional)

While QuillKit can be used without an API key, connecting to the backend API enables feature access control, usage tracking, and subscription management.

Backend Configuration

Use the QuillKit service API at https://quillkit.com/api
Enter your existing API key or create a demo one below
⚠️ API Key Required: To use QuillKit, you need an API key from the QuillKit service.
  1. Sign up at QuillKit and get your API key
  2. Use your API key with https://quillkit.com/api
3

Initialize the Editor

Create a textarea and initialize QuillKit with your desired configuration:

HTML Structure

<textarea id="my-editor">
  <h1>Hello World!</h1>
  <p>Start editing here...</p>
</textarea>

JavaScript Initialization (Without API Key)

// Simple initialization - all features available
const editor = QuillKit.init('#my-editor', {
  toolbar: true,
  modeSwitching: true,
  mathSupport: true,
  height: '500px',
  pageView: true
});

JavaScript Initialization (With API Key)

// With API key - features controlled by subscription plan
const editor = QuillKit.init('#my-editor', {
  apiKey: 'ak_your_api_key_here',
  apiUrl: 'https://quillkit.com/api',
  toolbar: true,
  modeSwitching: true,
  mathSupport: true,
  height: '500px',
  pageView: true
});

// Features are automatically enabled/disabled based on your plan
// Free: Basic editor + HTML mode
// Basic ($9/mo): + Rich text + Toolbar
// Pro ($29/mo): + Math + Tables + Images
// Enterprise ($99/mo): + Custom plugins + Unlimited API calls

Live Editor Demo

4

Use the Editor API

Interact with the editor programmatically using these methods:

// Get current content
const html = editor.getValue();
console.log(html);

// Set new content
editor.setValue('<h1>New Content</h1><p>Updated!</p>');

// Get current mode
const mode = editor.getMode(); // 'rich', 'html', or 'css'

// Switch modes
editor.setMode('html');

// Destroy editor
editor.destroy();

// Get editor instance by ID
const instance = QuillKit.getInstance('my-editor');

// Get all editor instances
const allEditors = QuillKit.getAllInstances();
5

Complete Example

Here's a complete, minimal HTML file to get you started:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My QuillKit Page</title>
</head>
<body>
  <h1>My Document Editor</h1>

  <!-- Editor textarea -->
  <textarea id="editor">
    <h1>Hello World!</h1>
    <p>Start editing...</p>
  </textarea>

  <!-- Include QuillKit from CDN -->
  <script src="https://unpkg.com/@atlarafirm/quillkit/dist/quillkit.js"></script>

  <!-- Initialize -->
  <script>
    // Without API key
    const editor = QuillKit.init('#editor');

    // Or with API key for feature control
    // const editor = QuillKit.init('#editor', {
    //   apiKey: 'ak_your_api_key_here',
    //   apiUrl: 'https://quillkit.com/api'
    // });
  </script>
</body>
</html>
6

Subscription Plans (With API Key)

When using the backend API with an API key, features are controlled by your subscription plan:

🆓 Free Plan

  • Basic editor functionality
  • HTML mode
  • 1,000 API calls/month
  • Cost: Free

⭐ Basic Plan - $9/month

  • Rich text editing
  • Full toolbar
  • Mode switching
  • 10,000 API calls/month

🚀 Pro Plan - $29/month

  • All Basic features
  • Math support (LaTeX & MathML)
  • Tables
  • Images
  • 100,000 API calls/month

💎 Enterprise Plan - $99/month

  • All Pro features
  • Custom plugins
  • Priority support
  • Unlimited API calls
7

Additional Resources