Presets API

The sdk.presets namespace lets you create and manage design presets — reusable style tokens like colors, typography, shadows, borders, and radii.

Preset types

Plugins can work with these preset types:

color — Color values
typography — Font family, size, weight, line height, etc.
border — Border width, style, color, radius
shadow — Box shadows
radius — Border radius values
padding — Padding values
margin — Margin values

Reading presets

getAll()

Returns every preset in the design.

const presets = sdk.presets.getAll();

getByType(type)

Returns all presets of a specific type.

const colors = sdk.presets.getByType('color');
const typography = sdk.presets.getByType('typography');

getById(id)

Returns a single preset by ID.

const preset = sdk.presets.getById('preset-abc');

Creating presets

create(type, name, value, metadata?)

Creates a new preset and returns it.

// Create a color preset
sdk.presets.create('color', 'Brand Blue', '#2563eb');
 
// Create a typography preset
sdk.presets.create('typography', 'Heading 1', {
  fontFamily: 'Inter',
  fontSize: '48px',
  fontWeight: '700',
  lineHeight: '1.2',
  letterSpacing: '-0.02em',
});
 
// Create a shadow preset
sdk.presets.create('shadow', 'Card Shadow', {
  boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
});
 
// Create a border preset
sdk.presets.create('border', 'Subtle Border', {
  borderWidth: '1px',
  borderStyle: 'solid',
  borderColor: '#e5e7eb',
});
 
// Create a radius preset
sdk.presets.create('radius', 'Rounded', '12px');

Updating presets

update(presetId, updates)

Updates an existing preset's name, value, or metadata.

sdk.presets.update(presetId, {
  name: 'Updated Name',
  value: '#3b82f6',
});

Deleting presets

delete(presetId)

Removes a preset.

sdk.presets.delete(presetId);

Preset data shape

id — string — Unique identifier
type — string — Preset type (color, typography, shadow, etc.)
name — string — Display name
value — any — The preset value
metadata — any — Optional extra data

Example: Design token generator

A plugin that generates a full color palette from a base color:

export default definePlugin({
  name: 'Palette Generator',
  description: 'Generate a color palette from a base color',
  controls: {
    baseColor: { type: 'color', label: 'Base Color', default: '#3b82f6' },
    prefix: { type: 'text', label: 'Name Prefix', default: 'Brand' },
  },
  run(values, sdk) {
    const base = values.baseColor;
 
    // Generate shades (simplified — real plugins might use a color library)
    const shades = [
      { suffix: '100', lightness: 95 },
      { suffix: '300', lightness: 75 },
      { suffix: '500', lightness: 50 },
      { suffix: '700', lightness: 30 },
      { suffix: '900', lightness: 15 },
    ];
 
    for (const shade of shades) {
      sdk.presets.create(
        'color',
        `${values.prefix} ${shade.suffix}`,
        `hsl(220, 70%, ${shade.lightness}%)`
      );
    }
  },
});