DnDGem

DnDGem: An Adaptive Layout Engine for Modern Applications

DnDGem is a versatile drag-and-drop framework designed to create sophisticated, content-aware dashboard layouts. This innovative engine employs content-aware constraints, deterministic solving, and adaptive reflow, allowing for layouts that prioritize not just geometric fit, but also the utility of content.

Note: A layout that geometrically fits does not necessarily ensure the content remains useful.

Key Features:

• Framework Agnostic: Built to integrate with multiple frameworks including React, Vue, Angular, and Svelte, while maintaining a core that is independent of any specific environment.
• Flexible Integration: Quickly set up your project using simple integration steps. Visit the Quick Start guide for a streamlined onboarding experience.
• Robust Packages: Utilize various packages tailored for different needs, including:
  • @dndgem/core: A renderer-agnostic package focused on domain, validity, and solving.
  • @dndgem/dom: Provides DOM measurement, resizing, and drag support.
  • Framework-specific packages: @dndgem/react, @dndgem/vue, @dndgem/angular, @dndgem/svelte.

Example Usages:

Here is a brief illustration of how to utilize DnDGem with React:

import { DnDGemProvider, useDnDGemContainer, useDnDGemItem } from '@dndgem/react';

function Board() {
  const containerRef = useDnDGemContainer();
  const revenue = useDnDGemItem('revenue');
  return (
    <div ref={containerRef} style={{ position: 'relative', width: 480, height: 240 }}>
      <article ref={revenue.ref} style={{ background: '#2f6f5e', color: '#fff', ...revenue.style }}>
        Revenue
      </article>
    </div>
  );
}

export function App() {
  return (
    <DnDGemProvider
      items={[
        { id: 'revenue', constraints: { minWidth: 96, minUsefulWidth: 140, preferredWidth: 180 } },
      ]}
      desiredPlacements={{ revenue: { x: 12, y: 12, width: 180, height: 88 } }}
    >
      <Board />
    </DnDGemProvider>
  );
}

Current Status:

DnDGem is currently in public alpha phase, with ongoing development and community feedback actively encouraged. The engine is open source and can be accessed on GitHub. For live experimentation, explore the playground.

Additional Resources:

• Official Website: dndgem.dev
• Documentation: Detailed guides and more can be found on the website.
• Community Support: Engage with the community for questions and feedback via GitHub Discussions or address issues directly through GitHub Issues.

Explore the potential of DnDGem to elevate the interactivity and usability of modern web applications.