Factories

snapgrid’s primary API. Each returns Svelte attachments, style strings, and reactive state to apply to your own elements. See Headless usage for the full picture.

These are runes-based factories: call one once, during component initialization, and keep the handle it returns. Its fields are reactive getters — read them in your template rather than destructuring. attach is a Svelte attachment  you apply with {@attach handle.attach}; style is a ready-made CSS string — bind it directly, don’t spread it.

createContainerWidth

Measures a container’s width with a ResizeObserver (SSR-safe). Replaces react-grid-layout’s WidthProvider.

<script lang="ts">
  import { createContainerWidth } from "@snapgridjs/svelte";
  const size = createContainerWidth({ initialWidth: 1024 });
</script>
 
<div {@attach size.attach}>
  <!-- pass size.width to the grid -->
</div>

createGridContainer

The grid host: takes a getter of the controlled layout + config, owns the grid’s drag/resize session, registers the droppable surface, and returns an attach + style for your container plus the grid’s group. Options are passed as a getter (() => ({ … })) so the grid tracks your live state. Call it inside a component rendered under a <DragDropProvider>.

<script lang="ts">
  import { createGridContainer } from "@snapgridjs/svelte";
  import Tile from "./Tile.svelte";
  let { layout, width, onLayoutChange } = $props();
  const container = createGridContainer(() => ({ layout, width, onLayoutChange }));
</script>
 
<div {@attach container.attach} style={container.style}>
  {#each layout as it (it.i)}
    <Tile id={it.i} group={container.group} />
  {/each}
</div>

Options (UseGridControllerOptions)

The controlled state plus the per-grid config. These are exactly <GridLayout>’s props minus class / style (here you own the surface element, so you style it directly).

Returns (GridContainerResult)

createGridItem

Wires a single tile: drag activation, positioning style, and drag state. Takes an options object, mirroring dnd-kit’s createSortable: id, group (the value its createGridContainer returned), and an optional type.

<script lang="ts">
  import { createGridItem } from "@snapgridjs/svelte";
  let { id, group } = $props();
  // svelte-ignore state_referenced_locally
  const tile = createGridItem({ id, group });
</script>
 
<div {@attach tile.attach} style={tile.style}>{tile.item?.i}</div>

createGridResizeHandle

Models a resize handle as its own draggable. Position and style it however you like; group is the grid’s id.

<script lang="ts">
  import { createGridResizeHandle } from "@snapgridjs/svelte";
  let { itemId, group } = $props();
  const handle = createGridResizeHandle({ id: itemId, handle: "se", group });
</script>
 
<span {@attach handle.attach} {...handle.handleProps}></span>

handleProps carries the marker attribute that excludes the handle from item-drag activation.

createGridPlaceholder

Returns where the landing-cell marker should render via .current, or null when idle. group is the grid’s id.

<script lang="ts">
  import { createGridPlaceholder } from "@snapgridjs/svelte";
  let { group } = $props();
  const placeholder = createGridPlaceholder(group);
</script>
 
{#if placeholder.current}
  <div style={placeholder.current.style}></div>
{/if}

createResponsiveLayout

The headless engine behind ResponsiveGridLayout. Resolves the active breakpoint, columns, and layout from the container width. Options are passed as a getter so it tracks your live width/layouts.

<script lang="ts">
  import { createResponsiveLayout, type ResponsiveLayouts } from "@snapgridjs/svelte";
  let { width }: { width: number } = $props();
  let layouts = $state<ResponsiveLayouts>({ lg: [/* … */] });
  const responsive = createResponsiveLayout(() => ({
    width,
    layouts,
    onLayoutChange: (active, all) => (layouts = all),
    onBreakpointChange: (bp, cols) => {},
  }));
</script>

Returns the active breakpoint, its cols, the resolved layout, and an onLayoutChange to pass to the grid (it updates the active breakpoint’s entry).

resolveController

Resolves a grid’s controller by its group (= the grid’s id) from the registry, scoped to the ambient dnd-kit manager. The registry-based alternative to the context resolution that createGridItem uses internally; reach for it for advanced composition. Must be called during component initialization, inside a <DragDropProvider>.

<script lang="ts">
  import { resolveController } from "@snapgridjs/svelte";
  let { group } = $props();
  const controller = resolveController(group);
</script>

No overlay factory (tiles float themselves)

There’s no createGridDragOverlay — and no overlay component either. While you drag with a pointer, dnd-kit lifts the active tile into the browser’s top layer, so the tile you already rendered floats itself above everything and crosses between grids unclipped; on drop it settles into its new cell. Nothing extra to wire. Style the floating state through the tile’s own isDragging. See The dragged tile floats itself.

If you need a separate floating element — a clone, a ghost, different markup — dnd-kit’s DragOverlay is re-exported from @snapgridjs/svelte. It’s a component, not a factory, because it owns and renders its own element, so there’s nothing for a factory to return.