JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1191
  • Score
    100M100P100Q98802F
  • License SEE LICENSE IN LICENSE

Framework-agnostic editor logic for Templatical email editor

Package Exports

  • @templatical/core
  • @templatical/core/cloud

Readme

@templatical/core

Framework-agnostic editor logic — state, history, auto-save. The reactive engine behind @templatical/editor.

npm version License

Powers @templatical/editor. Use this package directly if you want to build a custom UI on top of the Templatical state model — for example, a CLI tool, automation pipeline, or your own visual editor.

Built on @vue/reactivity (no full Vue runtime), so it works anywhere reactive primitives do.

Install

npm install @templatical/core @templatical/types

Usage

import { useEditor } from '@templatical/core';
import { createDefaultTemplateContent, createTitleBlock } from '@templatical/types';
import { watch } from '@vue/reactivity';

const editor = useEditor({
  content: createDefaultTemplateContent(),
});

// Mutate state — these methods live on the editor return value
editor.addBlock(createTitleBlock({ text: 'Welcome!' }));
editor.selectBlock(editor.content.value.blocks[0].id);

// Read reactive state
console.log(editor.content.value);          // current TemplateContent
console.log(editor.selectedBlock.value);    // currently selected Block | null
console.log(editor.state.isDirty);          // dirty flag

// React to changes
watch(editor.content, (next) => {
  console.log('Template updated', next);
});

Exports

  • useEditor — reactive state (content, selection, viewport, darkMode, isDirty) + mutation methods (addBlock, removeBlock, moveBlock, updateBlock, updateSettings, selectBlock, …)
  • useHistory — undo/redo stack
  • useHistoryInterceptor — wraps mutation methods so they push onto the history stack automatically
  • useBlockActions — higher-level helpers built on top of useEditor (createAndAddBlock(type), duplicateBlock, deleteBlock, updateBlockProperty)
  • useAutoSave — debounced save with onSave callback
  • useConditionPreview — display condition preview state
  • useDataSourceFetch — fetch helper for custom block data sources

Cloud subpath

The @templatical/core/cloud subpath provides Templatical Cloud integrations (Auth, API client, WebSocket, AI chat/rewrite, collaboration, comments, scoring). Used by @templatical/editor's initCloud(). See Cloud docs.

Documentation

Full reference at docs.templatical.com.

License

FSL-1.1-MIT — free for any non-competing commercial use, automatically converts to MIT after 2 years per release.