Snippets Management

Snippets are pre-designed content blocks that users can drag and drop into their content. When adding a content block via the (+) icon, users can select the MORE button to open the snippets dialog.

Default Snippet Location

Snippet files are located in:

assets/minimalist-blocks/

This folder contains:

content.js – The snippets definition file
images/ – Image assets used in the snippets

Loading Snippets

Load snippets dynamically using the loadSnippets() method:

builder.loadSnippets('assets/minimalist-blocks/content.js');

The parameter is the path to your content.js file.

Configuring Snippet Paths

If hosting assets remotely (e.g., on a CDN), configure the paths during initialization:

const builder = new ContentBuilder({
    container: '.container',

    // Full URL to snippet file
    snippetUrl: 'https://cdn.example.com/assets/minimalist-blocks/content.js',
    
    // Base path for the remotely hosted snippets
    snippetPath: 'https://cdn.example.com/assets/minimalist-blocks/',
    
    // Replace the default base path with the remotely hosted path
    snippetPathReplace: [
        'assets/minimalist-blocks/images/',
        'https://cdn.example.com/assets/minimalist-blocks/images/'
    ]
});

These options ensure all relative paths (especially images) resolve correctly when hosted externally.

Control where the snippets panel appears:

const builder = new ContentBuilder({
    container: '.container',
    snippetModalLeft: true // Position on the left side
});

Default (not set): Snippets modal appears on the right side
snippetModalLeft: true: Displays on the left side

Creating Custom Snippets

Add or edit snippets by modifying the content.js file, which contains snippets in JSON format.

Example snippet object:

{
    'thumbnail': 'preview/preview-01.png',
    'category': '120',
    'html': `
        <div class="row">
            <div class="column">
                <h1>Heading Text Goes Here</h1>
                <p>Lorem Ipsum is simply dummy text...</p>
            </div>
        </div>
    `
}

Each snippet includes:

thumbnail – Path to the preview image
category – Category ID this snippet belongs to
html – The HTML markup for the block

Snippet Categories

Organize snippets into categories using the snippetCategories option:

const builder = new ContentBuilder({
    container: '.container',

    snippetCategories: [
        [120, 'Basic'],
        [118, 'Article'],
        [101, 'Headline'],
        [119, 'Buttons'],
        [102, 'Photos'],
        [103, 'Profile'],
        [116, 'Contact'],
        [104, 'Products'],
        [105, 'Features'],
        [106, 'Process'],
        [107, 'Pricing'],
        [108, 'Skills'],
        [109, 'Achievements'],
        [110, 'Quotes'],
        [111, 'Partners'],
        [112, 'As Featured On'],
        [113, 'Page Not Found'],
        [114, 'Coming Soon'],
        [115, 'Help, FAQ']
    ],

    defaultSnippetCategory: 120 // Category shown first when opening snippets dialog
});

The defaultSnippetCategory defines which category displays first when the snippets dialog opens.

Controlling Element Behavior in Snippets

Add special behaviors to elements inside snippets using data attributes:

1. Prevent Image Replacement

Make an image non-replaceable by adding data-fixed:

<img src="image.png" data-fixed />

2. Make Content Non-editable

Prevent content editing inside a column using data-noedit:

<div class="row">
    <div class="column" data-noedit>
        This content cannot be edited.
    </div>
</div>

3. Fully Protected Column

Protect a column completely using data-protected:

<div class="row">
    <div class="column" data-protected>
        This column is fully protected from any modifications.
    </div>
</div>