๐Ÿงช Free CBT Equation Editor

A free math editor for CBT platforms, JAMB exams, and e-learning. Visual tap-to-build math equations and chemistry formulas โ€” no LaTeX typing required. Drop it into any HTML page, PHP template, or CMS with a single <script> tag. Free alternative to TinyMCE math plugin and CKEditor chemistry plugin.

๐Ÿ’ฐ $0 โ€” Free Forever ๐Ÿ“œ MIT License โšก Vanilla JS (No React)

โœจ Features

๏ฟฝ Visual Math Editor for Exams

Tap-to-build fractions, exponents, radicals, and symbols. A free LaTeX editor for exams โ€” students and teachers never type LaTeX. Powered by MathLive.

โš—๏ธ Chemistry Formula Editor

Click-to-build chemical formulas with subscripts, charges, coefficients, and reaction arrows. A free CKEditor chemistry plugin alternative.

๐Ÿ“ CBT Exam Question Editor

Built for JAMB CBT, WAEC, NECO, and any e-learning platform. Create exam questions with embedded math equations and chemical formulas.

๐Ÿ”„ TinyMCE Alternative

A free TinyMCE math plugin replacement. No API keys, no subscriptions, no vendor lock-in. MIT licensed โ€” use it anywhere, forever free.

๐Ÿ’พ JSON Document Storage

Save & load exam questions as JSON. Math stored as LaTeX, chemistry as structured trees. Export to HTML for displaying questions to students.

๐ŸŒ Works in Any Platform

Plain HTML, PHP, WordPress, Moodle, any CMS. Embed in JAMB CBT software, WAEC exam portals, or custom e-learning apps. One script tag โ€” done.

โšก Why Choose CBTEditor Over Other Editors?

Feature CBTEditor TinyMCE CKEditor
Visual math (no LaTeX) โœ… Free ๐Ÿ’ฐ Paid plugin ๐Ÿ’ฐ Paid plugin
Chemistry formula editor โœ… Free โŒ None ๐Ÿ’ฐ Paid plugin
License MIT (Free) Commercial GPL/Commercial
Framework required None None None
Drop-in form input โœ… Built-in Manual Manual

๐Ÿš€ Quick Start

Option A โ€” Plain <script> tag (no build tools):

<form method="POST" action="/save">
  <input name="title" placeholder="Title">
  <div id="editor"></div>
  <button type="submit">Submit</button>
</form>

<link rel="stylesheet" href="cbt-editor.min.css">
<script src="cbt-editor.min.js"></script>
<script>
  CBTEditor.setMathLiveFontsDir('./fonts');
  new CBTEditor({
    target: document.getElementById('editor'),
    name: 'content'   // ← auto-syncs JSON to hidden input
  });
</script>

Option B โ€” npm (for bundler-based projects):

npm install cbt-editor

๐Ÿ“š Documentation

โ†’ Open Full Documentation Hub โ€” all docs in one navigable page with sidebar.

๐Ÿ“ฆ What's in the ZIP?

cbt-editor-v0.1.0/
โ”œโ”€โ”€ cbt-editor.min.js      โ† The editor (UMD, self-contained)
โ”œโ”€โ”€ cbt-editor.min.css     โ† Styles
โ”œโ”€โ”€ fonts/                 โ† MathLive math fonts
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ CHANGELOG.md
โ”œโ”€โ”€ LICENSE
โ””โ”€โ”€ docs/
    โ”œโ”€โ”€ INSTALLATION.md
    โ”œโ”€โ”€ USAGE.md
    โ”œโ”€โ”€ ARCHITECTURE.md
    โ”œโ”€โ”€ EXTENDING.md
    โ”œโ”€โ”€ UPDATING.md
    โ””โ”€โ”€ CONTRIBUTING.md

๐Ÿ”ง Using in PHP / WordPress

Same snippet โ€” just drop it into any PHP template. The editor auto-syncs to a hidden input, so your existing form submission works unchanged:

<?php // In your PHP page or WordPress template ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/cbt-editor.min.css">
<script src="<?php echo get_template_directory_uri(); ?>/cbt-editor.min.js"></script>

<form method="POST">
  <input name="title" placeholder="Title">
  <div id="editor"></div>
  <button type="submit">Submit</button>
</form>

<script>
  CBTEditor.setMathLiveFontsDir('<?php echo get_template_directory_uri(); ?>/fonts');
  new CBTEditor({
    target: document.getElementById('editor'),
    name: 'content'
  });
</script>

<?php
// On form submit, $_POST['content'] contains the full document JSON.
// Store it directly in your database.
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title   = $_POST['title'];
    $content = $_POST['content'];  // JSON โ€” store as-is
    // $db->query("INSERT INTO documents (title, content) VALUES (?, ?)", [$title, $content]);
}
?>