Dynamic Content Html

A powerful and lightweight utility library for Dynamic Content Html processing with template interpolation and rich content support. Designed specifically for translation libraries, i18n frameworks, and dynamic email systems. Perfect for email editors like Unlayer, GrapesJS, Canva, and any scenario where you need flexible text processing.

🎯 Purpose & Use Cases

$3

- Template interpolation for any i18n library (react-i18next, vue-i18n, etc.)
- Custom variable formats to match your existing translation system
- Rich content processing for complex multilingual content
- Nested object support for complex translation data structures

$3

- Email template processing with recipient data
- Rich HTML content generation for email campaigns
- Integration with email editors (Unlayer, GrapesJS, Canva)
- Flexible variable formats for different email platforms

$3

- Unlayer integration - Process dynamic content in email templates
- GrapesJS support - Handle Dynamic Content Html in visual email builders
- Canva compatibility - Process dynamic content in design tools
- Custom format support - Match any email platform's variable syntax

✨ Key Features

- 🚀 Simple API - Similar to i18n libraries with d() and d.rich() functions
- 🔧 Configurable Format - Support {var}, {{var}}, [var], [[var]], or any custom format
- 📧 Email Template Support - Perfect for dynamic email content processing
- 🎨 Rich Content - Support for HTML functions and complex content processing
- 🌐 Universal - Works with React, Vue, Node.js, and vanilla JavaScript
- 📦 Lightweight - Small bundle size with no external dependencies
- ✅ Well Tested - Comprehensive test coverage
- 🔌 Easy Integration - Drop-in replacement for existing text processing

Installation

``bash
npm install dynamic-content-html
`

`bash
yarn add dynamic-content-html
`

`bash
pnpm add dynamic-content-html
`

Quick Start

$3

`javascript
import d from 'dynamic-content-html';

// Simple variable replacement
const message = d('Hello {name}!', { name: 'Jane' });
console.log(message); // "Hello Jane!"

// Multiple variables
const welcome = d('Welcome {name}, you have {count} messages', {
name: 'John',
count: 5
});
console.log(welcome); // "Welcome John, you have 5 messages"

// Direct variables (no object wrapper needed)
const greeting = d('Hello {firstName}!', { firstName: 'Jane' });
console.log(greeting); // "Hello Jane!"

// Nested object properties
const user = { firstName: 'John', lastName: 'Doe' };
const fullName = d('Hello {user.firstName} {user.lastName}!', { user });
console.log(fullName); // "Hello John Doe!"

// Deep nested properties
const data = {
user: {
profile: {
personal: { firstName: 'John', lastName: 'Doe' },
contact: { email: 'john@example.com' }
}
}
};
const deepTemplate = d('User: {user.profile.personal.firstName}, Email: {user.profile.contact.email}', data);
console.log(deepTemplate); // "User: John, Email: john@example.com"
`

$3

`javascript
// Double curly braces (like Handlebars/Mustache)
const message1 = d('Hello {{name}}!', { name: 'Jane' }, {
variableFormat: { start: '{{', end: '}}' }
});

// Square brackets (like some email platforms)
const message2 = d('Hello [name]!', { name: 'Jane' }, {
variableFormat: { start: '[', end: ']' }
});

// Double square brackets (like some CMS systems)
const message3 = d('Hello [[name]]!', { name: 'Jane' }, {
variableFormat: { start: '[[', end: ']]' }
});

// Custom format (like HTML-like tags)
const message4 = d('Hello !', { name: 'Jane' }, {
variableFormat: { start: '<', end: '>' }
});
`

$3

`javascript
import d from 'dynamic-content-html';

const recipient = {
firstName: 'John',
lastName: 'Doe',
email: 'john@example.com',
phoneNumber: '+1234567890',
address: {
street: '123 Main St',
city: 'New York',
state: 'NY',
zipCode: '10001'
}
};

// Process email template with recipient data
const emailTemplate =
Dear {recipient.firstName} {recipient.lastName},

Thank you for your order! We'll send updates to {recipient.email}.

Shipping Address:
{recipient.address.street}
{recipient.address.city}, {recipient.address.state} {recipient.address.zipCode}

Best regards,
The Team
;

const personalizedEmail = d(emailTemplate, { recipient });
console.log(personalizedEmail);
`

$3

`javascript
import d from 'dynamic-content-html';

// Rich content with HTML functions (default format)
const richMessage = d.rich('Click {guidelines} for more information', {
guidelines: (chunks) => ${chunks}
});
console.log(richMessage); // "Click guidelines for more information"

// Rich content with variables
const welcomeEmail = d.rich(
Hello {user.firstName},

Please click {verifyLink} to verify your email address.

If you have any questions, contact us at {supportLink}.
, {
user: { firstName: 'Jane' },
verifyLink: (chunks) => ${chunks},
supportLink: (chunks) => ${chunks}
});

// Rich content with custom format (for email platforms)
const emailTemplate = d.rich('Click [[button]] to continue', {
button: (chunks) => ${chunks}
}, { variableFormat: { start: '[[', end: ']]' } });
`

$3

`javascript
import d from 'dynamic-content-html';

// Basic MJML text content processing
const mjmlText = d.mjml('Hello {name}!', { name: 'Jane' });
console.log(mjmlText); // "Hello Jane!"

// MJML with attributes
const mjmlButton = d.mjml('Click here', {
url: 'https://example.com'
});
console.log(mjmlButton); // "Click here"

// Complex MJML email template
const emailTemplate =


{emailTitle}





Hello {user.name}!


Welcome to {company.name}. Your order #{order.id} has been confirmed.


Track Your Order





;

const data = {
emailTitle: 'Order Confirmation',
textColor: '#333333',
user: { name: 'John Smith' },
company: { name: 'MyStore' },
order: {
id: '12345',
trackingUrl: 'https://mystore.com/track/12345'
},
buttonColor: '#007bff'
};

const processedEmail = d.mjml(emailTemplate, data);
console.log(processedEmail);
// Output: Complete MJML with all variables replaced

// MJML with custom variable format
const customMjml = d.mjml('Hello [[name]]!',
{ name: 'Jane' },
{ variableFormat: { start: '[[', end: ']]' } }
);
console.log(customMjml); // "Hello Jane!"

// MJML with nested object properties
const userData = {
user: {
profile: {
name: 'Alice',
location: { city: 'New York' }
}
}
};

const nestedMjml = d.mjml(
'Welcome {user.profile.name} from {user.profile.location.city}!',
userData
);
console.log(nestedMjml); // "Welcome Alice from New York!"
`

API Reference

$3

Processes a template string with variable interpolation.

Parameters:
- template (string): Template string with {{variable}} placeholders
- options (DynamicTextOptions): Object containing variable values

Returns: Processed string with variables replaced

Example:
`javascript
d('Hello {{name}}!', { name: 'World' }) // "Hello World!"
`

$3

Processes a template string with variable interpolation and rich content functions.

Parameters:
- template (string): Template string with {{variable}} placeholders
- options (RichTextOptions): Object containing variable values and rich content functions

Returns: Processed string with variables replaced and rich content applied

Example:
`javascript
d.rich('Click {{link}}', {
link: (chunks) => ${chunks}
}) // "Click link"
`

$3

Processes MJML content with dynamic data, handling both MJML attributes and text content.

Parameters:
- template (string): MJML template string with variable placeholders
- options (MJMLOptions): Object containing variable values
- config (MJMLConfig, optional): Configuration for variable format and MJML processing

Returns: Processed MJML string with variables replaced

Example:
`javascript
d.mjml('Hello {name}!', { name: 'Jane' })
// "Hello Jane!"

d.mjml('Click here', { url: 'https://example.com' })
// "Click here"
`

Types

$3

The library provides built-in support for recipient objects with the following properties:

`typescript
interface Recipient {
first_name?: string;
last_name?: string;
full_name?: string; // Auto-generated if not provided
email?: string;
phone_number?: string;
street?: string;
city?: string;
state?: string;
zip_code?: string;
}
`

$3

`typescript
import d, { Recipient, DynamicTextOptions, RichTextOptions, MJMLOptions, MJMLConfig } from 'dynamic-content-html';

const recipient: Recipient = {
first_name: 'John',
last_name: 'Doe'
};

const options: DynamicTextOptions = {
recipient,
message: 'Welcome!'
};

const result = d('Hello {{recipient.full_name}}, {{message}}', options);
`

Integration Examples

$3

#### React i18next Integration
`jsx
import React from 'react';
import { useTranslation } from 'react-i18next';
import d from 'dynamic-content-html';

const WelcomeComponent = ({ user }) => {
const { t } = useTranslation();

// Use dynamic-content-html for complex translations
const welcomeMessage = d(t('welcome.message'), {
user: {
firstName: user.firstName,
lastName: user.lastName
}
});

return

;
};

// Translation files (en.json)
{
"welcome": {
"message": "Hello {user.firstName} {user.lastName}! Welcome to our platform."
}
}
`

#### Vue i18n Integration
`vue



`

$3

#### Unlayer Integration
`javascript
import d from 'dynamic-content-html';

// Process Unlayer email template
function processUnlayerTemplate(template, recipientData) {
// Unlayer uses {{variable}} format
return d(template, recipientData, {
variableFormat: { start: '{{', end: '}}' }
});
}

// Example usage
const unlayerTemplate =

;

const processed = processUnlayerTemplate(unlayerTemplate, {
recipient: { firstName: 'John' },
order: { id: '12345', trackingUrl: '/track/12345' }
});
`

#### GrapesJS Integration
`javascript
import d from 'dynamic-content-html';

// Process GrapesJS email template
function processGrapesJSTemplate(template, data) {
// GrapesJS might use [variable] format
return d(template, data, {
variableFormat: { start: '[', end: ']' }
});
}

// Example usage
const grapesTemplate =

;

const processed = processGrapesJSTemplate(grapesTemplate, {
user: { name: 'Jane' },
notifications: { count: 5 }
});
`

#### Canva Integration
`javascript
import d from 'dynamic-content-html';

// Process Canva design template
function processCanvaTemplate(template, data) {
// Canva might use [[variable]] format
return d(template, data, {
variableFormat: { start: '[[', end: ']]' }
});
}

// Example usage
const canvaTemplate =

;

const processed = processCanvaTemplate(canvaTemplate, {
company: { name: 'My Company', website: 'https://mycompany.com' },
user: { firstName: 'John' }
});
`

$3

#### React
`jsx
import React from 'react';
import d from 'dynamic-content-html';

const WelcomeEmail = ({ user, message }) => {
const emailContent = d(

, { user, message });

return