Editor

The IntentText editor comes in two forms, same engine:

• The web editor at editor.uts.qa — a browser-based authoring tool for .it files. No CLI, no terminal, no installation.
• @dotit/editor — the same WYSIWYG editor as an embeddable React component for your own app (ERPs, portals, back offices).

Who it's for

• HR managers writing offer letters and policies
• Legal teams drafting contracts without technical tooling
• Journalists authoring articles with structured formatting
• Anyone who wants to work with .it files without a terminal

Features

Word-like WYSIWYG pages

The visual editor shows your document as real pages — page size and margins come from the document's own page: block, the header and footer (with live {{page}} of {{pages}} numbers) are visible on every page exactly where print puts them, and page breaks fall where the printed PDF breaks. What you see while editing is what prints — 100% WYSIWYG, including pages, headers, and footers. Receipt sizes (page: | size: 80mm auto) render as a continuous roll.

Two modes: Visual and Source

Edit visually (rich text, tables, totals, trust chips) or switch to Source for the raw .it text with full syntax highlighting and diagnostics — both stay in sync, and a visual-editor round-trip never changes your bytes (signed documents stay verifiable).

Template mode

Author merge templates for your app or team without leaving the editor:

• {{path.to.value}} placeholders render as chips in text, table cells, and totals.
• The Template button (with a live variable-count badge) opens a panel showing every detected variable — click to insert at the cursor.
• Enter sample data (JSON, persisted per file; a skeleton is auto-built from your variables) and produce a PDF with data — the exact parseAndMerge → renderPrint pipeline your production app runs, so what you test is what ships.
• Start from the Invoice Template sample (Samples menu).

Theme picker

Select any of the 8 built-in themes; the view updates immediately. Per-document house styling goes in style: rules, which apply live on the canvas and identically in print.

Trust UI

The Trust panel drives the full lifecycle — track → approve → sign → seal → verify → amend — and the document shows styled trust chips (signatures, approvals, frozen banner) that print exactly as displayed.

Export

• PDF — prints the editor's own pages (true WYSIWYG) via the browser, no PDF library
• HTML — self-contained document with the selected theme

Syntax highlighting

IntentText keywords and aliases are highlighted by category:

Category	Color
Trust	Gold
Agent	Orange
Content	Green
Structure	Blue
Data	Purple
Layout	Gray
Identity	Light blue

Getting started

1. Go to editor.uts.qa
2. Write in the visual editor (or switch to Source) — or load a sample from Samples
3. Select a theme from the dropdown
4. Export to PDF or HTML when ready

No account required — documents live in your files (Open/Save) and autosave locally.

---

Embed it in your app — @dotit/editor

Everything above ships as an npm package: a controlled React component over plain .it source text. You pass the source in, you get the edited source back — no editor-specific format ever touches your data, and a document printed through @dotit/core always matches what the user saw on screen.

Install

npm install @dotit/editor @dotit/core react react-dom

Peer dependencies: react >= 18, react-dom >= 18.

Quick start

import { useState } from "react";
import { IntentTextEditor, exportDocumentPDF } from "@dotit/editor";
import "@dotit/editor/style.css";

export function InvoiceEditor() {
  const [source, setSource] = useState("title: Invoice INV-001\ntext: Hello");
  return (
    <div style={{ height: "100vh" }}>
      <IntentTextEditor value={source} onChange={setSource} theme="corporate" />
      <button onClick={() => exportDocumentPDF(source, "corporate")}>PDF</button>
    </div>
  );
}

The editor fills its parent — give the wrapper an explicit height.

Props

Prop	Type	Default	Description
value	string	— (required)	Current .it source text (controlled).
onChange	(source: string) => void	— (required)	Called with the updated .it source on every edit.
theme	string	"corporate"	Document theme id (see builtinThemes()). Pair with onThemeChange.
onThemeChange	(theme: string) => void	—	Called when the user picks a theme in the ribbon.
readOnly	boolean	false	Force read-only. Sealed documents (freeze: block) are read-only automatically.
showRibbon	boolean	true	Show the formatting ribbon.
showTrustBanner	boolean	true	Show the trust status banner + document properties strip.
onTrustAction	(a: "seal"|"sign"|"verify") => void	—	Handle the ribbon's Trust group — wire it to your own dialogs (e.g. core's sealDocument). Hidden when omitted.

Key exports

Besides IntentTextEditor: exportDocumentPDF(source, theme) / exportDocumentHTML(source, theme) (WYSIWYG print / print-ready HTML download), builtinThemes(), extractTemplateVariables(source) / buildSampleSkeleton(vars) for {{variable}} authoring, extractTrustState(parsedDoc) for the trust lifecycle snapshot, and sourceToDoc / docToSource (the lossless .it ↔ editor bridge). Full list in the package README.

SSR / Next.js

The editor is browser-only (it measures the DOM to paginate). With Next.js or any SSR framework, load it dynamically with SSR disabled:

"use client";
import dynamic from "next/dynamic";
import "@dotit/editor/style.css";

const IntentTextEditor = dynamic(
  () => import("@dotit/editor").then((m) => m.IntentTextEditor),
  { ssr: false },
);

exportDocumentPDF / exportDocumentHTML must also only be called in the browser. For server-side PDF bytes use @dotit/pdf.

Notes for ERP embedding

• Store the .it source string wherever you store documents — a DB column is fine.
• Styling is scoped and ships in one stylesheet (@dotit/editor/style.css); one editor instance per page is the supported setup.
• Insert at caret from your own UI: window.dispatchEvent(new CustomEvent("it-insert-text", { detail: "{{customer.name}}" })).
• For the full template → merge → print pipeline around the editor, see ERP / App Integration.