🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more
Sign In

@templatical/core

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@templatical/core

Framework-agnostic editor logic for Templatical email editor

Source
npmnpm
Version
0.8.5
Version published
Weekly downloads
2.2K
153.19%
Maintainers
1
Weekly downloads
 
Created
Source

@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.

Keywords

editor-core

FAQs

Package last updated on 26 May 2026

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts