mklyml plugins

Output plugins for mklyml -- transform compiled HTML for different targets.

Email Plugin

Turns mklyml's web HTML into email-compatible HTML. CSS inlining, table-based layout, Outlook conditional comments, link tracking.

Email clients don't support <style> tags, CSS custom properties, or @layer. This plugin extracts all CSS, resolves every var() reference, inlines every declaration as style="" attributes, wraps content in table layout, and strips everything email clients can't handle.

import { compile, parse, createRegistry, CORE_KIT } from '@mklyml/core';
import { NEWSLETTER_KIT } from '@mklyml/kits/newsletter';
import { emailPlugin } from '@mklyml/plugins/email';

const doc = parse(source);
const result = compile(doc, createRegistry(), {
  kits: { core: CORE_KIT, newsletter: NEWSLETTER_KIT },
  plugins: [emailPlugin()],
});

// result.html -> complete email document ready for
// Gmail, Outlook, Apple Mail, and Yahoo

The output: no <style> tags, no CSS classes, no var() -- everything inline. Works everywhere.

bun add @mklyml/plugins

Full email plugin documentation ->

Docs Plugin

Post-processing for documentation sites. Heading anchors for deep-linking, copy buttons on code blocks, tab switching, and optional document wrapping with navigation and dark mode.

import { DOCS_KIT } from '@mklyml/kits/docs';
import { docsPlugin } from '@mklyml/plugins/docs';

const result = compile(parse(source), createRegistry(), {
  kits: { core: CORE_KIT, docs: DOCS_KIT },
  plugins: [docsPlugin()],
});

The mklyml documentation site uses this plugin.

bun add @mklyml/plugins

Full docs plugin documentation ->

Related

• mklyml -- Core language
• mklyml-editor -- Visual editor with live preview
• mklyml-kits -- Newsletter kit (14 blocks, 19 themes, 17 presets) + Docs kit (15 blocks)
• mklyml-docs -- Documentation site