dragifyJS is a free and open-source web builder framework that simplifies the creation of HTML templates for websites, newsletters, or mobile apps. It was designed primarily for use within [CMS] platforms, accelerating the creation of dynamic templates.

Key Features:

• Build and customize HTML templates quickly.
• Seamlessly integrates with CMS platforms.
• Flexible and powerful for sites and newsletters.

To better understand its functionality, refer to the example image below.

Template System Overview

A typical template system, often used in applications like CMS platforms, consists of three main components:

1. Structure (HTML): Defines the layout and elements of the template.
2. Style (CSS): Determines the appearance of the elements.
3. Variables: Replaced dynamically with content on the server side and rendered on the client side.

Installation

Using CDNs

• UNPKG (always resolves to the latest version):
  • JavaScript: https://unpkg.com/dragifyjs
  • CSS: https://unpkg.com/dragifyjs/dist/css/dragify.min.css
• CDNJS (replace X.X.X with the desired version):
  • JavaScript: https://cdnjs.cloudflare.com/ajax/libs/dragifyjs/X.X.X/dragify.min.js
  • CSS: https://cdnjs.cloudflare.com/ajax/libs/dragifyjs/X.X.X/css/dragify.min.css

Using NPM

npm i dragifyjs

Using Git

git clone https://github.com/dragifyJS/dragifyjs.git

Quick Start Guide

Basic Example

Include the required CSS and JavaScript files in your project:

<link rel="stylesheet" href="path/to/dragify.min.css" />
<script src="path/to/dragify.min.js"></script>

Add the following code to initialize the dragifyJS editor:

<div id="dragify"></div>

<script type="text/javascript">
  var editor = dragifyjs.init({
    container: '#dragify',
    components: '<div class="txt-red">Hello world!</div>',
    style: '.txt-red { color: red; }',
  });
</script>

Configuration Options

• container: (Required) The target DOM element or selector for the editor.
• components: (Optional) Default HTML content added to the editor.
• style: (Optional) Default CSS styles for the content.

Development

To contribute to dragifyJS, follow the Contributing Guide.

Documentation

• Getting Started: Detailed documentation is available here: [Documentation]
• API Reference: Explore the API here: [API-Reference]

Feedback & Contributions

We welcome contributions to improve dragifyJS. For issues or feature requests, please check the GitHub repository.