# Overview

> Install Flexiboards and create a board with movable widgets.

Source: https://www.flexiboards.dev/docs/overview

Framework: Svelte

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.

```shell
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.

Example: First board

```svelte
<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](https://www.flexiboards.dev/docs/free-form-grids) for positions or a [flow grid](https://www.flexiboards.dev/docs/flow-grids) 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](https://www.flexiboards.dev/docs/widget-rendering).

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

Component anatomy: a FlexiBoard contains two FlexiTarget grids side by side. The first target holds one FlexiWidget; the second holds two widgets stacked vertically.

Follow [Multiple targets](https://www.flexiboards.dev/docs/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](https://www.flexiboards.dev/docs/guides/registry#your-theme-your-source), 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.