FrameworkJavaScript

Columns block: multi-column layout

A layout block that arranges its children into side-by-side columns. The column list itself holds no content — each column is a child `column` block, and the blocks you write live inside those columns (via `contentIds`). Columns can be created three ways: from the toolbox · by dragging a block beside another · by selecting multiple blocks and choosing "Turn into columns". Column widths are resizable via the separators between columns. Both tools can be registered at once with the `Columns` group handle — `tools: { columns: Columns }` expands to the `column_list` and `column` tools; saved JSON still contains `column_list` and `column` blocks.

Import

TypeScript

import { ColumnList } from '@bloklabs/core/tools';
// …or register both column tools at once with the group handle:
import { Columns } from '@bloklabs/core/tools';

Save Data

TypeScript

interface ColumnListData {
  // No persisted fields. The structure lives in the block's saved `content`
  // array (exposed as `contentIds` on the in-memory Block), which references
  // the child column blocks.
  // (columnCount and noSeed are transient seed hints, never saved.)
}

JSON

{
  "id": "col001",
  "type": "column_list",
  "data": {},
  "content": ["column1", "column2"]
}

Usage Example

TypeScript

import { Blok } from '@bloklabs/core';
import { ColumnList, Column } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    column_list: {
      class: ColumnList,
    },
    column: {
      class: Column,
    },
  },
});