We'll bring the grid.
You bring the style.

Flexiboards — a headless drag-and-drop engine. Free-form dashboards, flow columns, resizing, collision, collapse, per-breakpoint layouts. Headless by design; you decide how it looks.

Framework

Vue · planned

$ npm i @flexiboards/svelte

Read the docs See examples

MIT licensed Powered by signals Zero styling shipped Accessibility-ready AI ready

Press Enter to grab or resize widgets. Once grabbed, use Arrow keys to move/resize the widget, Enter to confirm the action, or Esc to cancel it.

grab me

One engine to power them all

Sparse layouts with collision resolution. Powers your grids and dashboard layouts.

Ordered rows or columns with append or prepend placement. Suitable for Kanban, ordered layouts and all your sortable lists.

Responsively render different layouts at each breakpoint, so that your board always fits the viewport.

Spawn widgets with a click action on an 'adder', drag widgets over a 'deleter' to delete them.

Move widgets between multiple target dropzones within the same board, no matter the layout.

Persist changes to layouts by exporting to JSON, then restore the layout by importing it.

free-form · collision

other

flow · reorder

per breakpoint

lg · 1024

sm · 390

adders · deleters

palette

bin

multiple targets

free

flow

export · import

board.json

serialise ⇄ hydrate

Listing 1 · a kanban board Svelte

<FlexiBoard config={{ targetDefaults: { layout: { type: 'flow', flowAxis: 'column' } } }}>
  <FlexiTarget key="todo">
    <FlexiWidget draggability="full">Study for exam</FlexiWidget>
    <FlexiWidget draggability="full">Research project</FlexiWidget>
  </FlexiTarget>
  <FlexiTarget key="done">
    <FlexiWidget draggability="full">Feed the cat</FlexiWidget>
  </FlexiTarget>
</FlexiBoard>

@flexiboards/svelte supports Svelte 5 runes, including server rendering and hydration.

Result · styled entirely by you

Incomplete

Study for exam

Research project

Done

Feed the cat

Recharge car

Flexiboards ships only the bare necessary styles for drag-and-drop interactions, allowing you to give it the unique look that fits your project.

Use it with your favourite framework

The core of Flexiboards is entirely framework-agnostic. All that's needed to support your favourite framework is an adapter for it.

Engine

@flexiboards/core

The framework-agnostic engine that powers Flexiboards and all its interactions.

Adapter stable

@flexiboards/svelte

Flexiboards for Svelte 5, built for runes. Where it all began.

Adapter new

@flexiboards/react

Flexiboards for React 18 and 19, using the same grid engine.

Three steps to a board

Step 01

Install

npm i @flexiboards/svelte

Step 02

Declare a target

layout: { type: 'free',
  minColumns: 4 }

Step 03

Style your widgets

Any markup, any CSS framework. Flexiboards only sets position and drag behaviour.

Docs for your coding agent

Give your agent framework-specific Markdown docs. The llms.txt index points it to the relevant API and examples.

Read the setup guide Open llms.txt

Start with registry components

preview

Install boards, dashboards, and sortable lists through shadcn-svelte. The components use your theme, and their source lives in your app.

Browse components

Built with Flexiboards

See various examples of Flexiboards put into action.