# Flexiboards

> Flexiboards is a headless drag-and-drop toolkit for Svelte 5 and React 18 or 19 where the grid is the model. You get free-form and flow grids, moves between targets, resizing, a keyboard-driven virtual pointer with screen-reader announcements, layouts you can export and import, and server-side rendering with a suspense fallback.

Every page below is linked as Markdown. Append `?framework=svelte` or `?framework=react` to a page or /llms-full.txt for focused docs. Without a query (or with `?framework=all`), both variants are included. Drop the `.md` to read a page on the site.

Last generated: 2026-09-13

## Introduction

- [Overview](https://www.flexiboards.dev/docs/overview.md): Meet the three components a board is built from and put a first board on the page.
- [Configuration](https://www.flexiboards.dev/docs/configuration.md): Set board, target, and widget options, and see which level wins when they overlap.
- [Controllers](https://www.flexiboards.dev/docs/controllers.md): Reach a board, target, or widget controller to read and change its state from code.
- [Accessibility](https://www.flexiboards.dev/docs/accessibility.md): Move and resize widgets from the keyboard, and hear what the announcer reads out.
- [Docs for LLMs](https://www.flexiboards.dev/docs/llms.md): Give an AI assistant the Flexiboards docs as plain Markdown.
- [Changelog](https://www.flexiboards.dev/docs/changelog.md): What changed in each release of Flexiboards, newest first.
- [Migrating to v1.0](https://www.flexiboards.dev/docs/breaking-changes-to-10.md): Update code written against v0.x to the v1.0 API. (Svelte only)
- [Breaking Changes in v0.4](https://www.flexiboards.dev/docs/breaking-changes-to-04.md): Update Svelte code written against v0.3 to the v0.4 API. (Svelte only)

## Guides

- [Presets](https://www.flexiboards.dev/docs/presets.md): Start with a sortable list or a dashboard grid in three lines, then graduate to the full components when you need more.
- [Flow grids](https://www.flexiboards.dev/docs/flow-grids.md): Keep widgets in order and packed, for Kanban columns, sortable lists, and galleries.
- [Free-form grids](https://www.flexiboards.dev/docs/free-form-grids.md): Place widgets at fixed coordinates and choose what happens when they collide.
- [Multiple targets](https://www.flexiboards.dev/docs/multiple-targets.md): Run several targets on one board and move widgets between them.
- [Widget rendering](https://www.flexiboards.dev/docs/widget-rendering.md): Choose what a widget renders, from inline content to a registry of components.
- [Transitions](https://www.flexiboards.dev/docs/transitions.md): Animate widgets as they move, resize, appear, and leave.
- [Exporting and importing](https://www.flexiboards.dev/docs/guides/exporting-importing-boards.md): Save a board layout to your server and load it back later.
- [Responsive layouts](https://www.flexiboards.dev/docs/guides/responsive-layouts.md): Give each breakpoint its own layout with ResponsiveFlexiBoard.
- [Server-side rendering](https://www.flexiboards.dev/docs/guides/server-side-rendering.md): Render a board on the server and show a fallback until the layout is confirmed.
- [Testing](https://www.flexiboards.dev/docs/guides/testing.md): Drive a board in a unit test with @flexiboards/testing, in a DOM that has no layout.

## Registry

- [Introduction](https://www.flexiboards.dev/docs/guides/registry.md): Composable Flexiboards components, copied into your project and styled by your shadcn theme.
- [Dashboard](https://www.flexiboards.dev/docs/registry/dashboard.md): Composable, draggable and resizable tiles with your shadcn theme.
- [Sortable list](https://www.flexiboards.dev/docs/registry/sortable-list.md): Reorder custom rows with handles, keyboard controls, and order callbacks.
- [Board](https://www.flexiboards.dev/docs/registry/board.md): Themed primitives for custom grids and multiple drop targets.
- [Grabber](https://www.flexiboards.dev/docs/registry/grabber.md): Move widgets with a small, theme-aware handle.
- [Resizer](https://www.flexiboards.dev/docs/registry/resizer.md): Resize widgets with a small, theme-aware handle.
- [Motion](https://www.flexiboards.dev/docs/registry/motion.md): Compare registry transitions and customise their easing.

## Primitive API

- [FlexiBoard](https://www.flexiboards.dev/docs/components/board.md): Props, controller members, and configuration types for FlexiBoard.
- [FlexiTarget](https://www.flexiboards.dev/docs/components/target.md): Props, controller members, and layout types for FlexiTarget.
- [FlexiWidget](https://www.flexiboards.dev/docs/components/widget.md): Props, controller members, and configuration types for FlexiWidget.
- [FlexiGrab](https://www.flexiboards.dev/docs/components/grab.md): Props and controller members for FlexiGrab, the drag handle.
- [FlexiResize](https://www.flexiboards.dev/docs/components/resize.md): Props and controller members for FlexiResize, the resize handle.
- [ResponsiveFlexiBoard](https://www.flexiboards.dev/docs/components/responsive-board.md): Props, controller members, and configuration for ResponsiveFlexiBoard.
- [FlexiAdd](https://www.flexiboards.dev/docs/components/adder.md): Props and controller members for FlexiAdd, which creates widgets on drag.
- [FlexiDelete](https://www.flexiboards.dev/docs/components/deleter.md): Props and controller members for FlexiDelete, which removes dropped widgets.

## Older migration notes

- [Breaking changes in v0.3](https://www.flexiboards.dev/docs/breaking-changes-to-03.md): Update Svelte code written against v0.2 to the v0.3 API.

## Examples and packages

- [Examples](https://www.flexiboards.dev/examples): Browse working boards, including a dashboard, a Kanban board, a form builder, and a gallery.
- [@flexiboards/svelte](https://www.npmjs.com/package/@flexiboards/svelte): The Svelte 5 adapter, published on npm.
- [@flexiboards/react](https://www.npmjs.com/package/@flexiboards/react): The React 18 and 19 adapter, published on npm.
- [@flexiboards/core](https://www.npmjs.com/package/@flexiboards/core): The framework-independent grid engine both adapters build on.

Full text of every page: https://www.flexiboards.dev/llms-full.txt