LayerInput — Complete Flat Layer Types Reference

LayerInput is the flat, one-object authoring format for all ten layer types. Every place in the SDK that accepts a layer — decks.create, slides.create, layers.create, and layouts.create — accepts a LayerInput. The object is discriminated on type: set type to the kind of content you want and add the matching fields alongside the required at geometry. The compiler validates your input through Zod, maps friendly input types ('bar', 'donut') to their stored representation ('chart'), and builds canonical structured documents for text, charts, and tables — you never write those by hand.

Common fields

Every layer type shares these fields.

required

Layer geometry in 1920×1080 slide coordinates.

Show At fields

number

required

Left edge of the layer box in pixels.

number

required

Top edge in pixels.

number

required

Width in pixels. Must be positive.

number

required

Height in pixels. Must be positive.

number

Clockwise rotation in degrees around the layer’s center.

number

Integer stacking order (z-index). Higher values render on top of lower values. When omitted, the server assigns a value based on insertion order.

string

AI brief — a plain-language instruction for what the AI should generate for this layer. Stored in layer metadata and read by Ablo’s generation pipeline.

string[]

Sample outputs that guide AI generation for this layer. Each string is one example of the content you expect.

EffectsInput

Visual effects applied to the layer box: opacity, corner radius, blur, vertical alignment, and drop shadows.

`type: 'text'`

A text layer. The text field accepts a single string or an array of strings (each string becomes a paragraph).

"text"

required

string | string[]

required

The content. An array of strings produces multiple paragraphs.

Show Text styling fields

TextStyle

string

Font size, e.g. '32px' or '2rem'. Overrides the style preset size.

string

Text color. Accepts any CSS color or a var(--slide-*) token reference.

FontFamily

Font family — must be one of the supported families.

FontWeight

Font weight on the 100–900 axis, e.g. '400', '700'.

string

Line height, e.g. '1.5'.

string

Letter spacing (tracking), e.g. '0.02em'.

string

Inline text highlight color.

string

Paragraph spacing above, e.g. '12px'.

string

Paragraph spacing below.

boolean

Apply bold weight.

boolean

Apply italic style.

'left' | 'center' | 'right' | 'justify'

Text alignment.

{ type: 'text', text: 'Revenue up 40%', style: 'h1', at: { x: 160, y: 80, w: 1200, h: 120 } }

{ type: 'text', text: ['First paragraph.', 'Second paragraph.'], style: 'body1',
  at: { x: 160, y: 240, w: 800, h: 400 } }

`type: 'bullets'`

A bullet list. Each string in items becomes one bullet point.

"bullets"

required

string[]

required

List items. Must contain at least one item.

Show Bullet styling fields

All text styling fields plus:

'disc' | 'circle' | 'square'

Standard CSS bullet marker shape.

string

Custom icon key for the bullet marker, e.g. 'arrow-right', 'circle-filled'.

string

Color of the bullet marker (independent of text color).

number

Bullet marker size in pixels.

number

Stroke width for outline-style bullet icons.

number

Vertical spacing between list items in pixels.

number

Horizontal gap between the bullet marker and the text.

'center' | 'top'

Vertical alignment of the bullet relative to its text line.

{ type: 'bullets', items: ['ARR $4.2M', 'NRR 118%', '240 customers'],
  style: 'body1', bulletColor: 'var(--slide-brand)',
  at: { x: 160, y: 240, w: 700, h: 500 } }

`type: 'numbered'`

A numbered list. Each string in items becomes one numbered item.

"numbered"

required

string[]

required

List items. Must contain at least one item.

Show Numbered list styling fields

All text styling fields plus:

'decimal' | 'lower-alpha' | 'upper-alpha' | 'lower-roman' | 'upper-roman'

Marker style. Default is 'decimal' (1, 2, 3…).

string

Color of the number markers.

number

Marker font size in pixels.

string

Font family for the markers (independent of text).

string

Font weight for the markers.

number

Vertical spacing between items in pixels.

number

Gap between the marker and the item text.

'center' | 'top'

Vertical alignment of the marker relative to its text line.

{ type: 'numbered', items: ['Define the problem', 'Identify stakeholders', 'Draft solution'],
  style: 'body1', listStyle: 'decimal',
  at: { x: 160, y: 240, w: 800, h: 500 } }

`type: 'bar'`

A bar chart (vertical or horizontal). The SDK compiles this into a full ChartDocument and stores it as a 'chart' layer.

"bar"

required

ChartDatum[]

required

Chart data. Each datum has label (string), value (number), and an optional color override.

Show ChartDatum fields

string

required

Bar label.

number

required

Bar value.

string

Per-bar color override.

string

Stable id for the datum — used for incremental updates.

string

Optional chart title rendered above the chart.

'vertical' | 'horizontal'

Bar direction. Default is 'vertical'.

string

D3-style number format string, e.g. '$0.0"M"', '0,0', '0%'.

boolean

Show value labels on each bar.

boolean

Render a CAGR arrow between the first and last bar.

{ type: 'bar',
  data: [
    { label: 'Q1', value: 2.1 },
    { label: 'Q2', value: 2.8 },
    { label: 'Q3', value: 3.4 },
  ],
  valueFormat: '$0.0"M"',
  dataLabels: true,
  cagrArrow: true,
  at: { x: 160, y: 240, w: 900, h: 620 } }

`type: 'donut'`

A donut chart. Compiles to a 'chart' layer.

"donut"

required

ChartDatum[]

required

Slice data — same shape as bar chart data.

string

Optional center label.

string

Number format string for slice labels.

boolean

Show labels on each slice.

{ type: 'donut',
  data: [
    { label: 'Enterprise', value: 62, color: '#3B82F6' },
    { label: 'Mid-Market', value: 28, color: '#60A5FA' },
    { label: 'SMB',        value: 10, color: '#BAE6FD' },
  ],
  valueFormat: '0%',
  at: { x: 600, y: 240, w: 720, h: 600 } }

`type: 'chart'`

The full chart API — every chart family (bar, stacked bar, line, combo, pie, donut, waterfall, funnel, scatter, bubble, mekko, gantt, range) with full control over datasets, marks, encodings, scales, axes, legend, and affordances. Pass a CreateChartDocumentInput — the same input the Ablo chart toolkit accepts.

"chart"

required

CreateChartDocumentInput

required

The full chart structure. Validated against the ChartDocumentSchema at compile time; family-default affordances are filled in automatically.

Use type: 'bar' and type: 'donut' for the common cases. Use type: 'chart' when you need a chart family or configuration option those shortcuts don’t expose.

`type: 'table'`

A data table. Columns can carry alignment, width, and per-column style; cells can be plain values or rich objects with colspan/rowspan.

"table"

required

(string | ColumnDef)[]

required

Column definitions. Pass a bare string for a simple header, or an object with { header, key?, align?, verticalAlign?, width?, style? } for full control. Column keys are auto-generated from headers if omitted.

CellInput[][]

required

Row data. Each row is an array of cell values aligned to the columns. Cells can be a string, number, null, or a rich { text?, content?, align?, verticalAlign?, backgroundColor?, colSpan?, rowSpan? } object.

number

Number of header rows at the top (default 1). These rows receive the styles.header style.

{ type: 'table',
  columns: ['Quarter', { header: 'Revenue', align: 'right' }, { header: 'Growth', align: 'right' }],
  rows: [
    ['Q1', '$2.1M', '+18%'],
    ['Q2', '$2.8M', '+33%'],
    ['Q3', '$3.4M', '+21%'],
  ],
  headerRows: 1,
  at: { x: 160, y: 200, w: 1100, h: 600 } }

`type: 'image'`

An image layer. Stored internally as a 'shape' layer with an imageFill. External URLs are automatically rehosted to the Ablo CDN at commit time. Use ablo.images.upload() for local files.

"image"

required

string

required

A valid HTTPS URL. External URLs are rehosted to the Ablo CDN on commit.

'cover' | 'contain' | 'fill'

How the image fills its bounding box. Default is 'cover'.

number

Intrinsic width hint in pixels.

number

Intrinsic height hint in pixels.

{ type: 'image',
  url: 'https://cdn.example.com/product-shot.jpg',
  objectFit: 'cover',
  at: { x: 960, y: 0, w: 960, h: 1080 } }

`type: 'shape'`

A vector shape — rectangle, circle, ellipse, triangle, or line. Supports solid fills, CSS gradients, structured fill stacks, opacity, stroke, and corner radius.

"shape"

required

'rectangle' | 'circle' | 'ellipse' | 'triangle' | 'line'

required

The shape kind.

string

Solid fill color as a CSS color string.

string

Raw CSS gradient string, e.g. 'linear-gradient(135deg, #667eea, #764ba2)'.

Fill[]

Structured fill stack — an array of Fill objects (solid, gradient, image, shader). Rendered bottom-to-top. See Fills Reference.

number

Fill opacity from 0 (transparent) to 1 (opaque). Does not affect stroke.

string

Stroke color as a CSS color string.

number

Stroke thickness in pixels.

number

Corner radius in pixels (rectangles only).

number

Line start X, relative to the layer box in 0–1 coordinates (lines only).

number

Line start Y (lines only).

number

Line end X (lines only).

number

Line end Y (lines only).

boolean

Add an arrowhead at the start of the line.

boolean

Add an arrowhead at the end of the line.

// Rounded rectangle with a brand fill
{ type: 'shape', shape: 'rectangle',
  fills: [solidFill('var(--slide-brand)')],
  radius: 12,
  at: { x: 160, y: 800, w: 300, h: 60 } }

// Arrow line
{ type: 'shape', shape: 'line', stroke: '#94A3B8', strokeWidth: 2,
  arrowEnd: true, x1: 0, y1: 0.5, x2: 1, y2: 0.5,
  at: { x: 200, y: 540, w: 400, h: 4 } }

`type: 'icon'`

An SVG icon layer from the Ablo icon library.

"icon"

required

string

required

Icon key, e.g. 'rocket', 'bar-chart', 'arrow-right', 'check-circle'.

string

Icon color. Accepts any CSS color or theme variable.

{ type: 'icon', icon: 'rocket', color: 'var(--slide-brand)',
  at: { x: 880, y: 480, w: 160, h: 160 } }

Full example

The following creates a deck with a single content slide that uses multiple layer types together.

import Decks, { solidFill } from '@abloatai/decks';

const ablo = new Decks(process.env.ABLO_API_KEY!);

await ablo.decks.create({
  title: 'Q3 Investor Update',
  slides: [
    {
      title: 'Key Metrics',
      layers: [
        // Background rectangle
        {
          type: 'shape',
          shape: 'rectangle',
          fills: [solidFill('#0F172A')],
          at: { x: 0, y: 0, w: 1920, h: 1080 },
          z: 0,
        },
        // Slide heading
        {
          type: 'text',
          text: 'Key Metrics — Q3 2024',
          style: 'h1',
          color: '#F1F5F9',
          at: { x: 160, y: 80, w: 1200, h: 110 },
          z: 1,
        },
        // KPI labels
        {
          type: 'bullets',
          items: ['ARR $4.2M', 'NRR 118%', 'CAC payback 9 months'],
          style: 'body1',
          color: '#CBD5E1',
          bulletColor: '#3B82F6',
          bulletStyle: 'arrow-right',
          at: { x: 160, y: 240, w: 600, h: 400 },
          z: 2,
        },
        // Revenue chart
        {
          type: 'bar',
          data: [
            { label: 'Q1', value: 2.1 },
            { label: 'Q2', value: 2.8 },
            { label: 'Q3', value: 3.4 },
          ],
          valueFormat: '$0.0"M"',
          dataLabels: true,
          cagrArrow: true,
          at: { x: 900, y: 160, w: 860, h: 720 },
          z: 2,
        },
        // Company logo
        {
          type: 'image',
          url: 'https://cdn.example.com/logo.svg',
          objectFit: 'contain',
          at: { x: 80, y: 30, w: 180, h: 54 },
          z: 3,
        },
      ],
    },
  ],
});

​Common fields

​type: 'text'

​type: 'bullets'

​type: 'numbered'

​type: 'bar'

​type: 'donut'

​type: 'chart'

​type: 'table'

​type: 'image'

​type: 'shape'

​type: 'icon'

​Full example

Common fields

`type: 'text'`

`type: 'bullets'`

`type: 'numbered'`

`type: 'bar'`

`type: 'donut'`

`type: 'chart'`

`type: 'table'`

`type: 'image'`

`type: 'shape'`

`type: 'icon'`

Full example