zeba_books_latex_editor

A high‑performance real‑time LaTeX editor widget for Flutter with live preview, syntax highlighting, snippet toolbar, and validation — built entirely in Flutter without WebViews.


✨ Overview

zeba_books_latex_editor provides a lightweight academic math editor designed for:

  • Educational apps
  • EPUB readers
  • Note‑taking apps
  • Scientific writing tools
  • Math learning platforms

The package focuses on speed, clarity, and native Flutter rendering.


🚀 Features

  • ⚡ Real‑time LaTeX rendering
  • 🧮 Split‑screen live preview
  • 🎨 Regex‑based syntax highlighting
  • 🧩 Snippet toolbar with math templates
  • ✅ Real‑time validation feedback
  • 🚫 No WebView (pure Flutter rendering)
  • 📱 Responsive widget layout

📦 Installation

Add the dependency in your pubspec.yaml:

dependencies:
  zeba_books_latex_editor: ^0.0.1

Then run:

flutter pub get

🧑‍💻 Basic Usage

Import the package:

import 'package:zeba_books_latex_editor/zeba_books_latex_editor.dart';

Use the editor widget:

ZebaLatexEditor()

Example:

import 'package:flutter/material.dart';
import 'package:zeba_books_latex_editor/zeba_books_latex_editor.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: ZebaLatexEditor(),
        ),
      ),
    );
  }
}

🧱 Architecture

ZebaLatexEditor
 ├── LatexSyntaxHighlighter
 ├── SnippetController
 ├── LatexValidator
 └── Live Preview Renderer

Core Components

ZebaLatexEditor

Main widget that provides:

  • Text editing area
  • Snippet toolbar
  • Live preview panel

LatexSyntaxHighlighter

Custom TextEditingController responsible for:

  • Regex parsing
  • Command colorization
  • Brace highlighting

SnippetController

Handles insertion of predefined LaTeX templates at cursor position.

LatexValidator

Provides real‑time validation including:

  • Unbalanced brackets
  • Missing \\end{} statements

🧮 Snippet Toolbar

Default snippets included:

Symbol Inserted Code
\\sum_{}^{}
\\int_{}^{}
\\prod_{}^{}
frac \\frac{}{}
\\sqrt{}

You may extend snippets by modifying toolbar buttons.


🎨 Syntax Highlighting

The editor highlights:

  • LaTeX commands (\\frac, \\sqrt) → Blue
  • Environment commands (\\begin, \\end) → Green
  • Math operators (\\sum, \\int) → Purple
  • Braces {} → Orange

✅ Validation

Real‑time checks include:

  • Balanced {} brackets
  • Matching \\begin{} and \\end{}
  • Immediate error feedback in editor UI

📱 Performance Design

  • Pure Flutter rendering pipeline
  • No WebView overhead
  • Incremental text highlighting
  • Fast math rendering using flutter_math_fork

🧪 Testing

Run tests using:

flutter test

Tests cover:

  • Validator logic
  • Snippet insertion
  • Widget rendering

🛠 Roadmap

Planned improvements:

  • Auto‑completion for LaTeX commands
  • Cursor placeholder navigation
  • Dark/light themes
  • Equation export (PNG/PDF)
  • Inline preview mode

🤝 Contributing

Contributions are welcome.

  1. Fork the repository
  2. Create a feature branch
  3. Commit changes
  4. Submit a pull request

📄 License

This project is licensed under the MIT License.


❤️ Author

Created as part of the Zeba Books Flutter ecosystem focusing on academic reading and editing tools.