Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aghontpi/dnde
Drag and drop react email editor
https://github.com/aghontpi/dnde
drag-and-drop drag-n-drop editor email-editor email-template mjml-api react react-email react-email-component react-email-editor
Last synced: 14 days ago
JSON representation
Drag and drop react email editor
- Host: GitHub
- URL: https://github.com/aghontpi/dnde
- Owner: aghontpi
- License: gpl-3.0
- Created: 2021-09-11T08:34:38.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-25T08:58:05.000Z (almost 3 years ago)
- Last Synced: 2024-10-11T00:55:59.385Z (about 1 month ago)
- Topics: drag-and-drop, drag-n-drop, editor, email-editor, email-template, mjml-api, react, react-email, react-email-component, react-email-editor
- Language: TypeScript
- Homepage: https://dnde.bluepie.in
- Size: 34.7 MB
- Stars: 59
- Watchers: 4
- Forks: 20
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog/README.md
- License: LICENSE
Awesome Lists containing this project
README
Drag and Drop E-mail Editor
[license-badge]: https://img.shields.io/github/license/aghontpi/dnde?style=flat-square
[license file]: https://github.com/aghontpi/dnde/blob/master/LICENSE
[badge]: https://img.shields.io/github/v/release/aghontpi/dnde?include_prereleases&style=flat-square&label=github-release
[release link]: https://github.com/aghontpi/dnde/releases
[npm badge]: https://img.shields.io/npm/v/dnd-email-editor?style=flat-square
[npm link]: https://www.npmjs.com/package/dnd-email-editor
screens / live demo here
.gif)
## Installation
```bash
# Yarn
yarn add dnd-email-editor
# NPM
npm install dnd-email-editor
```
## What's included
Props that can be passed to the component:
| Prop | Type | Default | Optional | Description |
| :------------: | :-----: | :-----: | :------: | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `preview` | boolean | `true` | true | show/hide the inbuilt preview button. |
| `showUndoRedo` | boolean | `true` | true | show/hide the inbuilt undo/redo button.
You can create your own undoredo functionality with `undoredo` from api methods below |
Editor exposes these api methods
- `getHtml` - export the design as html content
- `getJson` - export as json string, this string can then be used with `loadJson`
- `loadJson` - load an existing design from json string
- `undoredo` - undo and redo actions
## Usage
- Importing
```typescript
import Editor from 'dnd-email-editor';
return ;
```
- Setup a `ref` using `useRef` and pass it to editor
```typescript
const ref = React.useRef(null);
return ;
```
- Using `getHtml()`, `getJson()`, `loadJson()`, `undoredo`
```typescript
const logValues = () => {
if (ref.current) {
const html = ref.current.getHtml();
const json = ref.current.getJson();
console.log(html, json);
}
};
const loadJson = (json: string) => {
if (ref.current) {
ref.current.loadJson(json);
}
};
const performUndoAction = () => {
if (ref.current) {
ref.current.undoActionCallback();
// to check if undo is possible
console.log('is undo empty: ', ref.current.isUndoEmpty());
}
};
const performRedoAction = () => {
if (ref.current) {
ref.current.redoActionCallback();
// to check if redo is possible
console.log('is redo empty: ', ref.current.isRedoEmpty());
}
};
```
- Typescript
Inorder to use typescript and get cool definitions, just pass the type to the ref
```diff
import Editor from 'dnd-email-editor';
const ExampleComponent = () => {
- const ref = useRef(null);
+ const ref = useRef(null);
return (
);
}
```
## Purpose
There are soo many drag and drop editors that helps in **creating website** but **not mails**, because mails differ a lot from `a normal html webpage`
- even if there are `mail editors` available, they are paid and not `open-source`.
One such example would be `unlayer`, It claims to be opensource but its not.
- Looking at their source code, they only provide their loader-script and call it as `open-source`
- later they ask you to pay for its features.
the above reasons and also I was inspired by drag-n-drop editors in general, so I decided to make one.
## Features
- Responsive and mobile friendly emails
- Design emails by drag and drop
- Import/Export designs
- Export/Import as JSON
- Export as HTML
- Manage Fonts
- add custom fonts
- list / add/ deletefonts
- Go back and forth with `Undo / Redo`
- Preview the design in the browser (Mobile & PC)
## Built with
- [React](https://facebook.github.io/react/)
- [MJML](https://mjml.io/)
- [antd](https://ant.design/)
## Inspired by
- [MailJet](https://www.mailjet.com/)
- [Unlayer](https://unlayer.com/)