Overview

Build a board with one grid and two widgets. Drag A or B to another cell, or focus a widget and press Enter, use the arrow keys until the preview reaches another cell, and press Enter again to drop it.

Installation

Start with an existing application in your selected framework. Choose a package manager in the command below; the remaining install commands use that choice.

npm install @flexiboards/svelte

Use Svelte 5.20 or later in the Svelte 5 release line.

Create a board

This example includes its sizing and styles. It needs no CSS framework. Put it in a component and render that component in your application.

<script lang="ts">
import { FlexiBoard, FlexiTarget, FlexiWidget } from '@flexiboards/svelte';
</script>

<FlexiBoard>
<FlexiTarget
key="main"
config={{
layout: { type: 'free', minColumns: 2, maxColumns: 2, minRows: 2, maxRows: 2 },
columnSizing: '100px',
rowSizing: '100px'
}}
>
<FlexiWidget x={0} y={0}>
<div
style="height: 100%; padding: 16px; border: 1px solid currentColor; box-sizing: border-box;"
>
A
</div>
</FlexiWidget>
<FlexiWidget x={1} y={1}>
<div
style="height: 100%; padding: 16px; border: 1px solid currentColor; box-sizing: border-box;"
>
B
</div>
</FlexiWidget>
</FlexiTarget>
</FlexiBoard>

The target has two columns and two rows, each 100 pixels. Widget positions are zero-based: A starts at column 0, row 0; B starts at column 1, row 1. Set B’s x to 0 before mounting to start it beneath A.

Anatomy of a Flexiboard

• FlexiBoard owns the interaction state and isolates its targets. Widgets move between targets within one board.
• FlexiTarget defines a grid and holds its widgets. Choose a free-form grid for positions or a flow grid for an ordered collection.
• FlexiWidget registers a widget in its target. Pass children for inline content, or use a component to reuse a renderer. See Widget rendering.

A board can contain several targets. In this diagram, one target contains one widget and the other contains two:

Follow Multiple targets to build a board with several columns and move widgets between them.

Example styling

The first board above uses inline CSS. Many later demos use Tailwind utility classes and shadcn theme variables to make widget states visible. Their layout behavior does not require those tools. To reproduce their appearance, configure the theme setup for your framework, or replace the utility classes with your own CSS. You do not need to install registry components to use the core board components.

When a guide imports an application component or shows a configuration excerpt, keep the named setup from that guide. Copied registry examples require the installation command on their page.