Forem: Yizack Rangel

MailChannels SDK for Node.js (Resend Alternative)

Yizack Rangel — Mon, 16 Mar 2026 07:34:50 +0000

When working on projects that need to send transactional emails, I often look for tools that are simple, developer-friendly, and reliable. Recently, services like Resend have become very popular because they offer a clean API and great developer experience.

But while exploring email providers, I noticed something interesting.

MailChannels offers a similar free tier and a little cheaper pricing at scale, yet it doesn't have the same modern developer tooling ecosystem around it.

That observation sparked the idea for this project.

The Idea

My original idea was simple:

What if MailChannels had a modern Node.js SDK with a developer experience similar to tools like Resend?

MailChannels already provides a powerful API for sending emails and managing email infrastructure, but integrating directly with the API means dealing with things like:

Manual HTTP requests
snake_case payloads
Repetitive boilerplate code
Less ergonomic developer workflows

So the goal became to create a clean, TypeScript-first SDK that makes working with MailChannels feel natural for JavaScript developers.

Why MailChannels?

One thing that stood out to me was the pricing options.

Both MailChannels and Resend offer a similar free tier:

Provider	Monthly Emails	Daily Limit	Price
Resend	3,000	100/day	Free
MailChannels	3,000	100/day	Free

But at higher volumes, MailChannels is cheaper.

Emails / Month	Resend	MailChannels
10,000	N/A	$10
50,000	$20	$15
100,000	$35 / $90 (with dedicated IP)	$30
200,000	$125 / $160 (with dedicated IP)	$60

For projects sending large volumes of transactional email, that difference can add up.

See more:

The Goal of the SDK

The goal isn't to replace or compete with existing tools.

Instead, the idea is to improve the developer experience when using MailChannels by providing:

A clean Node.js API
TypeScript support
Consistent naming conventions
Simple email sending methods
A more ergonomic interface for developers

For example, sending an email can look like this:

import { MailChannels } from "mailchannels-sdk"

const mailchannels = new MailChannels("your-api-key")

await mailchannels.emails.send({
  from: "Acme <hello@acme.com>",
  to: "user@example.com",
  subject: "Welcome!",
  html: "<p>Thanks for joining</p>"
})

The SDK

The SDK fully supports all features and operations available in the MailChannels API. It is actively maintained to ensure compatibility and to quickly add support for new API features as they are released.

Installation

Add mailchannels-sdk dependency to your project

# npm
npm i mailchannels-sdk

# yarn
yarn add mailchannels-sdk

# pnpm
pnpm add mailchannels-sdk

Features

Some of the things you can do with the SDK:

Send transactional emails
Check DKIM, SPF & Domain Lockdown
Configure DKIM keys
Webhook notifications
Manage sub-accounts
Retrieve metrics
Handle suppressions
Configure inbound domains
Manage account and recipient lists

For a detailed reference mapping each SDK method to its corresponding MailChannels API endpoint reference, see the SDK-API Mapping

Requirements

Note

Just to be clear:

This SDK is not affiliated with MailChannels Corporation.

It's an independent open source project created to improve the developer experience when working with the MailChannels API.

Source

If you found this project useful or enjoyed reading about it, consider giving the repository a ⭐ on GitHub. It really helps the project grow and reach more developers.

You can also explore the full documentation and package details below:

GitHub
https://github.com/yizack/mailchannels

NPM
https://npmjs.com/package/mailchannels-sdk

Documentation
https://mailchannels.yizack.com

nuxt-twemoji

Yizack Rangel — Thu, 22 Jun 2023 00:42:17 +0000

Twemoji module for Nuxt. Render emojis as SVG elements or PNG images

Features
Quick Setup
Module configs
Components
Usage (Twemoji)
- Twemoji properties
- Rendering
- Definitions
- More examples
- Twemoji Default CSS
Usage (Twemojify)
- Twemojify properties
- Parser
- Twemojify Default CSS
Usage (TwemojiParse)
- TwemojiParse properties
- DOM parser
- TwemojiParse Default CSS
Credits
Development

Features

Nuxt 4 ready
Emoji 17.0 support
Render emoji by character
Render emoji by codepoint
Render emoji by definition object
SVG rendering by default
SVG caching with localStorage
PNG image render option
Twitter Emoji assets from ex-Twitter author (jdecked/twemoji) fork repository
Assets from the jsDelivr CDN
Multiples ways of use

Quick Setup

Add nuxt-twemoji dependency to your project

npx nuxi@latest module add twemoji

Add nuxt-twemoji to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-twemoji'
  ]
})

That's it! You can now use nuxt-twemoji in your Nuxt app ✨

Module configs

You can configure the module by adding the twemoji property to the nuxt.config.ts file. The following are the default configurations:

export default defineNuxtConfig({
  twemoji: {
    cache: {
      maxAge: 3.154e+7 // SVG cache expiration time in seconds (1 year)
    },
    mode: 'svg' // Default rendering mode. 'svg' or 'png'
  }
})

Components

You can make use of any of these available components according to your Nuxt app needs.

Name	Description	SSR
`Twemoji`	Renders Twemojis by emoji characters, codepoint or definition.	✔️
`Twemojify`	Parses a text and replaces all emoji characters with Twemoji svg elements or png images.	✔️
`TwemojiParse`	Wrap elements with the component and it will parse all emoji characters found with Twemoji svg or png image elements.	❌

Usage (`Twemoji`)

Find emojis from emojipedia, getemoji or unicode emoji list
In your project, use the component <Twemoji emoji="" />, where emoji is the emoji character or codepoint.
If you employ SSR (Server Side Rendering) in your Nuxt application, this module will inject the emoji <svg> or <img> element into the output code during your project's build/generate process. Alternatively, if SSR is not used, the emojis will dynamically render during client runtime.

`Twemoji` properties

Property	Required	Default	Type
`emoji`	Yes		`string` or `EmojiDefinition`
`size`	No	`1em`	`string`
`mode`	No		`svg` \

Rendering

Use the emoji property to render an emoji by character.

<!-- Render SVG element -->
<Twemoji emoji="🚀" />

<!-- Resize -->
<Twemoji emoji="🚀" size="2em" />

<!-- Render PNG <img> element -->
<Twemoji emoji="🚀" mode="png" />

Use the emoji property to render an emoji by codepoint.

<Twemoji emoji="1F60A" />

<Twemoji emoji="U+1F60A" />

Use the emoji property to render an emoji by definition.

<script setup>
import { twSmilingFaceWithSmilingEyes } from 'nuxt-twemoji/emojis'
</script>

<template>
  <Twemoji :emoji="twSmilingFaceWithSmilingEyes" />
</template>

The emojis file has been generated using the self made generateEmojis.js script, which fetches emojis data from the Unicode public Emoji 17.0 file available at https://unicode.org/Public/17.0.0/emoji/emoji-test.txt

Definitions

The EmojiDefinition type represents objects that have these specific three string properties:

code represents the code associated with the emoji.
emoji represents the actual emoji.
name represents the name of the emoji.

type EmojiDefinition = {
  code: string,
  emoji: string,
  name: string
}

More examples

Check out the 🏀 Online playground for more examples.

`Twemoji` Default CSS

Both the <svg> and <img> tags will have the .twemoji class assigned to them. These are the default styles, but you can add your own styles by using the class name.

.twemoji {
  display: inline-block;
  vertical-align: middle;
}

Usage (`Twemojify`)

This component parses a string text and replaces all emoji characters with Twemoji svg elements or png images.

In the project, use the component <Twemojify text="" />, where text is a string.
If you employ SSR (Server Side Rendering) in your Nuxt application, this module will inject the emoji <svg> or <img> element into the output code during your project's build/generate process. Alternatively, if SSR is not used, the emojis will dynamically render during client runtime.

`Twemojify` properties

Property	Required	Type
`text`	Yes	`string`
`mode`	No	`svg` \

Parser

This component uses the @twemoji/parser package by jdecked for identifying emoji entities within a string.

Use the text property to parse all the emoji characters inside a string

<!-- Replaces ❤️ and 🚀 with SVG elements -->
<Twemojify text="I ❤️ Nuxt 🚀" />

<!-- Replaces ❤️ and 🚀 with PNG images -->
<Twemojify text="I ❤️ Nuxt 🚀" mode="png" />

`Twemojify` Default CSS

Both the <svg> and <img> tags will have the .twemojify class assigned to them. These are the default styles, but you can add your own styles by using the class name.

These style rules make sure that parsed emojis will have the same size as the wrapper element.

.twemojify {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

Usage (`TwemojiParse`)

This component will parse all emoji characters found.

Wrap elements inside the <TwemojiParse> </TwemojiParse> component
If you want to parse emojis with png images, use the mode configuration or property with the component, otherwise it will parse svg images by default.

Note: This component has a drawback as it does not support SSR (Server-Side Rendering) because it is executed during the mounted Vue lifecycle, functioning solely on the client-side.

`TwemojiParse` properties

Property	Required	Type
`mode`	No	`svg` \

DOM parser

This component uses the @twemoji/api package by jdecked and its DOM parser api.

<!-- Replaces 🚀 with SVG image -->
<TwemojiParse>
  <p>Nuxt Twemoji 🚀</p>
</TwemojiParse>

<!-- Replaces 🚀 with PNG image -->
<TwemojiParse mode="png">
  <p>Nuxt Twemoji 🚀</p>
</TwemojiParse>

<!-- You can wrap any amount of emojis inside the component -->
<TwemojiParse>
  <p>Nuxt Twemoji 🚀</p>
  <div>
    <p>I ❤️ Nuxt 🚀</p>
  </div>
</TwemojiParse>

`TwemojiParse` Default CSS

The <img> tags will have the .twemojiParse class assigned to them. These are the default styles, but you can add your own styles by using the class name.

These style rules make sure that parsed emojis will have the same size as the wrapper element.

img.twemojiParse {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

Credits

Twitter Emoji assets from jdecked/twemoji
Default CDN jsDelivr
Unicode public Emoji 17.0 files
Nuxt, the JavaScript framework for creating SSR Vue applications and its Module Author Guide

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Run typecheck
pnpm test:types

# Release new version
pnpm release

Display a card with your Gists on your GitHub README.md

Yizack Rangel — Fri, 07 Oct 2022 23:56:00 +0000

GitHub Gists Readme (gists-readme)

Display a card with your Gists on your GitHub README.md

Gists List Card
- Example 1
- Example 2
- Example 3
Gist Pin
- Example 1
- Example 2

Generate your card here: https://gists-readme.yizack.com

Gists List Card

Display a list of your gists

Parameters

Parameter	Description	Optional	Default value
`user`	Your GitHub profile username.	No
`theme`	Set the theme of the card.	Yes	`default`
`n`	Number of Gists to display.	Yes	`30`
`title`	Set the title of the card.	Yes	`My Gists`

Card Example 1

Parameter	Value
user	`yizack`
theme	`dark`

Result

[![gists-readme](https://gists-readme.yizack.com/api?user=yizack&theme=dark)](https://gist.github.com/Yizack)

Card Example 2

Parameter	Value
user	`yizack`
n	`2`

Result

[![gists-readme](https://gists-readme.yizack.com/api?user=yizack&n=2)](https://gist.github.com/Yizack)

Card Example 3

Parameter	Value
user	`Cy4Bot`
n	`20`
title	`Cy4Bot Gists`

Result

[![gists-readme](https://gists-readme.yizack.com/api?user=Cy4Bot&n=20&title=Cy4Bot+Gists)](https://gist.github.com/Cy4Bot)

Gists Pin

Parameters

Parameter	Description	Optional	Default value
`user`	Your GitHub profile username.	No
`id`	Your Gist ID	No
`owner`	Shows the owner of the gist,	Yes	`false`
`theme`	Sets the theme of the pin.	Yes	`default`

Pin Example 1

Parameter	Value
user	`yizack`
id	`bbfce31e0217a3689c8d961a356cb10d`

Result

[![gists-readme](https://gists-readme.yizack.com/api/pin?user=yizack&id=bbfce31e0217a3689c8d961a356cb10d)](https://gist.github.com/Yizack/bbfce31e0217a3689c8d961a356cb10d)

Pin Example 2

Parameter	Value
user	`yizack`
id	`8a84dabef525fed523573b47258880e0`
owner	`true`
theme	`dark`

Result

[![gists-readme](https://gists-readme.yizack.com/api/pin?user=yizack&id=8a84dabef525fed523573b47258880e0&owner=true&theme=dark)](https://gist.github.com/Yizack/8a84dabef525fed523573b47258880e0)

Inspired by anuraghazra/github-readme-stats.
Hosted on Vercel with Node.js.

Embeddable Music Player

Yizack Rangel — Wed, 15 Jun 2022 05:49:11 +0000

Embed a simple HTML music player from local audio on your website using MediaElement.js and Color Thief. Inspired by Spotify's embed player.

(Fullscreen Live Demo)

Recommended requeriments

Mp3 audio source.
Square image.

Configuration

Clone or download my repository (Yizack/embeddable-music-player).
Edit the file /player/song.html
- Paste your song name in {SONG-NAME} for the title of your page.
- Paste your audio file URL in {MP3-SOURCE} for the audio that will be played when you press the play button.
- Paste your image URL in {ARTWORK} for the image that will be displayed.
- You can also rename or create a new html file to have different players, for example for the live demo I have /player/just-stay.html.
Color Thief will detect automatically the dominant color of your song image for your player.
Use the code below, replace {YOUR-HTML-PLAYER} with your HTML filename inside the folder /player and paste it on your site where you want your audio player to appear.

  <iframe src="/player/{YOUR-HTML-PLAYER}.html" width="300" height="385"></iframe>

(Example of use on a website using iframes: Dimatis Website)

Thanks to the responsiveness you can play with the width and height as you want.

  <iframe src="/player/{YOUR-HTML-PLAYER}.html" width="100%" height="450"></iframe>

(Another example of use on a website using iframes: Dimatis - Fly Again)

Forem: Yizack Rangel

MailChannels SDK for Node.js (Resend Alternative)

The Idea

Why MailChannels?

The Goal of the SDK

The SDK

Installation

Features

Requirements

Note

Source

nuxt-twemoji

Table of Contents

Features

Quick Setup

Module configs

Components

Usage (Twemoji)

Twemoji properties

Rendering

Definitions

More examples

Twemoji Default CSS

Usage (Twemojify)

Twemojify properties

Parser

Twemojify Default CSS

Usage (TwemojiParse)

TwemojiParse properties

DOM parser

TwemojiParse Default CSS

Credits

Development

Display a card with your Gists on your GitHub README.md

GitHub Gists Readme (gists-readme)

Gists List Card

Parameters

Card Example 1

Result

Card Example 2

Result

Card Example 3

Result

Gists Pin

Parameters

Pin Example 1

Result

Pin Example 2

Result

Embeddable Music Player

Recommended requeriments

Configuration

Usage (`Twemoji`)

`Twemoji` properties

`Twemoji` Default CSS

Usage (`Twemojify`)

`Twemojify` properties

`Twemojify` Default CSS

Usage (`TwemojiParse`)

`TwemojiParse` properties

`TwemojiParse` Default CSS