The Universal AI-Powered LaTeX Editor SDK

FormulaKit is a production-ready, open-source library designed to bring professional LaTeX editing capabilities to Web, iOS, and Android applications. It combines a rich WYSIWYG-like symbol toolbar, real-time KaTeX rendering, and advanced Generative AI capabilities (DeepSeek, Gemini, etc.) to convert natural language into complex mathematical formulas.

• Cross-Platform: Works on Web, iOS (WKWebView), and Android (WebView).
• AI Copilot: Type "Integral of x squared" -> get \int x^2 dx. Supports DeepSeek, Gemini, Qwen, etc.
• Professional Tools:
  • Undo/Redo History
  • Cheat Sheet / Help Dictionary
  • Copy as MathML (for Word/Office)
• Rich Library:
  • Math (Calculus, Matrix, Logic)
  • Physics & Chemistry (mhchem)
  • Styles: Colors, Bold, Italic, Blackboard Bold
  • Accents: Vectors, Hats, Bars
• Zero Config: Uses KaTeX for rendering.

FormulaKit can be used as a standard React library or vanilla JS module.

npm install formulakit

import { Editor } from 'formulakit';

function MathApp() {
  return (
    <Editor 
      initialValue="\sum_{i=0}^{n} i^2"
      onChange={(latex) => console.log(latex)}
    />
  );
}

<div id="editor-container"></div>
<script type="module">
  import { mountEditor } from 'formulakit';
  
  mountEditor('editor-container', {
    initialValue: 'E=mc^2',
    onChange: (val) => console.log(val)
  });
</script>

We provide ready-to-use wrappers in the native/ folder of this repository.

Copy native/ios/FormulaKitView.swift to your project.

struct ContentView: View {
    @State private var latex = ""

    var body: some View {
        VStack {
            FormulaKitEditor(latex: $latex)
            Text("Output: \(latex)")
        }
    }
}

Copy native/android/FormulaKitView.kt to your project.

<com.formulakit.android.FormulaKitView
    android:id="@+id/editor"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

val editor = findViewById<FormulaKitView>(R.id.editor)
editor.onChangeListener = { latex ->
    println("Current Formula: $latex")
}

The Native Wrappers load the editor interface from a web URL.

1. Build this project: npm run build
2. Deploy the dist folder to GitHub Pages or Vercel.
3. Update the EDITOR_URL in the wrapper files to point to your deployment: https://<your-site>/?mode=embed

The SDK sends JSON messages via window.webkit.messageHandlers.FormulaKit.postMessage (iOS) or window.FormulaKit.postMessage (Android).

Structure:

{
  "type": "onChange" | "onAiStart" | "onAiSuccess" | "onAiError",
  "timestamp": 1234567890,
  "payload": { ... }
}

Events:

• onChange: { "latex": string } - Fires on every keystroke/edit.
• onAiSuccess: { "result": string } - Fires when AI successfully generates LaTeX.

Call these global functions on the WebView window.

• window.setEditorContent(latex: string): Replaces current editor content.
• window.setAIConfig(jsonString: string): Pre-configure API keys so users don't have to.

Example Config Injection:

const config = JSON.stringify({
  provider: "deepseek",
  apiKey: "sk-your-key",
  modelName: "deepseek-chat"
});
window.setAIConfig(config);

1. Clone repo
2. npm install
3. npm start -> Opens demo at http://localhost:3000

MIT License. Free for commercial and personal use.