GrapesJS + Cloc Integration

Integrate Cloc's powerful time tracking components with GrapesJS's open-source web builder framework. Create custom interfaces without writing code.

Try Demo

Quick Start

1. Install Dependencies

First, install the required packages for GrapesJS integration with Cloc components.

npm install @cloc/atoms grapesjs grapesjs-preset-webpage grapesjs-tailwind

2. Setup GrapesJS Editor

Initialize GrapesJS with Cloc components and configure the editor.

import { useEffect } from 'react';
import grapesjs from 'grapesjs';
import { ClocProvider, ModernCloc, ClocProgress } from '@cloc/atoms';


export default function Editor() {
  useEffect(() => {
    const editor = grapesjs.init({
      container: '#gjs',
      plugins: ['grapesjs-preset-webpage', 'grapesjs-tailwind'],
      canvas: {
        styles: ['@cloc/atoms/styles.css']
      }
    });


    // Register Cloc components
    editor.DomComponents.addType('modern-timer', {
      model: {
        defaults: {
          tagName: 'div',
          draggable: true,
          droppable: true,
          traits: [
            {
              type: 'checkbox',
              name: 'showProgress',
              label: 'Show Progress'
            }
          ]
        }
      }
    });
  }, []);


  return <div id="gjs" />;
}

3. Add Component Blocks

Define blocks for your Cloc components in the GrapesJS editor.

const blockComponents = [
  {
    id: 'modern-timer',
    label: 'Modern Timer',
    content: '<div data-gjs-type="modern-timer"></div>',
    category: 'Cloc Components'
  },
  {
    id: 'progress-timer',
    label: 'Progress Timer',
    content: '<div data-gjs-type="progress-timer"></div>',
    category: 'Cloc Components'
  }
];


editor.BlockManager.add(blockComponents);

API Reference

Modern Timer

Configuration options for the Modern Timer component in GrapesJS.

// Modern Timer Component Registration
editor.DomComponents.addType('modern-timer', {
  model: {
    defaults: {
      tagName: 'div',
      droppable: true,
      traits: [
        {
          type: 'select',
          name: 'variant',
          label: 'Variant',
          options: [
            { value: 'default', name: 'Default' },
            { value: 'bordered', name: 'Bordered' }
          ]
        },
        {
          type: 'select',
          name: 'size',
          label: 'Size',
          options: [
            { value: 'default', name: 'Default' },
            { value: 'sm', name: 'Small' }
          ]
        },
        {
          type: 'checkbox',
          name: 'expanded',
          label: 'Expanded'
        },
        {
          type: 'checkbox',
          name: 'showProgress',
          label: 'Show Progress'
        },
        {
          type: 'checkbox',
          name: 'resizable',
          label: 'Resizable'
        }
      ]
    }
  }
});

Integration Guides

Basic Integration

The simplest way to integrate Cloc components with GrapesJS is through component registration and hooks.

import { useGrapesjs } from './hooks';
import { useModernTimer, useProgressCircle } from './components';


const BLOCK_COMPONENTS = [
  {
    id: 'modern-timer',
    label: 'Modern Timer',
    content: '<div data-gjs-type="modern-timer"></div>',
    category: 'Timer',
    image: '/img/timer.png'
  },
  {
    id: 'progress-circle',
    label: 'Progress Circle',
    content: '<div data-gjs-type="progress-circle"></div>',
    category: 'Progress',
    image: '/img/progress.png'
  }
];


export default function Editor() {
  const { editor } = useGrapesjs({ 
    containerId: 'gjs',
    blockComponents: BLOCK_COMPONENTS 
  });


  // Register components using hooks
  useModernTimer({ editor });
  useProgressCircle({ editor });


  return (
    <div id="gjs" className="h-screen" />
  );
}

Custom Theme Integration

Customize the look and feel by configuring Cloc's theme options within GrapesJS.

import { ClocThemeProvider } from '@cloc/atoms';
import { useGrapesjs } from './hooks';


function Editor() {
  const { editor } = useGrapesjs({
    containerId: 'gjs',
    config: {
      canvas: {
        styles: [
          'https://cdn.jsdelivr.net/npm/@cloc/atoms/dist/styles.css'
        ]
      }
    }
  });


  return (
    <ClocThemeProvider 
      theme={{
        colors: {
          primary: '#FF1CF7',
          secondary: '#00F0FF'
        }
      }}
    >
      <div id="gjs" className="h-screen" />
    </ClocThemeProvider>
  );
}

Component Event Handling

Handle component events and state changes in your GrapesJS editor.

import { useModernTimer } from './components';


export const useModernTimer = ({ editor }) => {
  editor.DomComponents.addType('modern-timer', {
    model: {
      defaults: {
        traits: [
          {
            type: 'checkbox',
            name: 'showProgress',
            label: 'Show Progress'
          },
          {
            type: 'select',
            name: 'variant',
            label: 'Variant',
            options: [
              { value: 'default', name: 'Default' },
              { value: 'bordered', name: 'Bordered' }
            ]
          }
        ],
        script: function() {
          const component = this;
          component.addEventListener('start', () => {
            // Handle timer start
          });
          component.addEventListener('pause', () => {
            // Handle timer pause
          });
          component.addEventListener('complete', () => {
            // Handle timer complete
          });
        }
      }
    }
  });
};

Examples

Explore how to integrate and customize Cloc components within GrapesJS. Each component can be easily configured through the GrapesJS traits panel.

Default Timer

Component

A clean, minimal timer component with a modern design. Perfect for applications requiring a straightforward countdown display without additional visual elements. Supports basic timer functionality with start, pause, and reset controls.

00:00:00

Border Timer

Component

Enhanced visibility with a subtle border outline. Ideal for interfaces where the timer needs to stand out from the background while maintaining a professional appearance. The border helps define the component's boundaries clearly.

00:00:00

Expanded Timer

Component

A larger format timer with additional controls and information visible by default. Suitable for applications where timer manipulation is a primary function. Shows extended controls without requiring user interaction to reveal them.

Timer

00:00:00
Powered byEver Cloc

Resizable Timer

Component

Flexible timer component that can be resized by the user. Perfect for customizable interfaces where users need control over the component's size. Maintains functionality and clarity at different dimensions while allowing for personalized workspace organization.

00:00:00

Ready to Build with GrapesJS?

Start creating custom time tracking interfaces with GrapesJS's visual editor and Cloc's components.

Try Cloc on GrapesJS