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.

Import

TypeScript

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

Save Data

TypeScript

interface ColumnListData {
  // No persisted fields. The structure lives in the block's contentIds,
  // which reference the child column blocks.
  // (columnCount and noSeed are transient seed hints, never saved.)
}

JSON

{
  "id": "col001",
  "type": "column_list",
  "data": {},
  "contentIds": ["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,
    },
  },
});