Quick Start

Get up and running with the Simplio3D SDK in minutes.

1. Import the SDK

import { createSimplio3DClient } from '@simplio3d/sdk';

2. Initialize the Client

const client = createSimplio3DClient({
  apiUrl: 'https://your-project.supabase.co/functions/v1/make-server-0532dd87',
  accessToken: 'YOUR_ACCESS_TOKEN',
  timeout: 30000,
  retryAttempts: 3
});

3. Build a Headless Configurator

// Load project and all configurator data
const project = await client.getProject('proj_123');
// SDK normalizes large-project response variants:
// - project.sceneData (when available)
// - project.sceneDataCompressed + project.sceneDataEncoding (fallback)
const blocks = await client.getOptionBlocks('proj_123');
const pricingBlocks = await client.getPricingBlocks('proj_123');
const formFields = await client.getFormFields('proj_123');

// Evaluate conditional logic based on user selections
const visibility = await client.evaluateConditions('proj_123', {
  selections: {
    dropdownSelections: { 'blk_frame': 'black' },
    selectMaterialSelections: {},
    checkboxSelections: {},
    toggleSwitchSelections: { 'blk_armrests': 'with' },
    carouselSelections: {}
  }
});

// Calculate price. calculatePrice is the ONE endpoint that takes a FLAT
// { blockId: variantValue } map — NOT the grouped shape used above.
// checkboxSelections / modularSelections are TOP-LEVEL siblings of selections.
const price = await client.calculatePrice('proj_123', {
  selections: {                        // flat: blockId -> variant value
    'blk_frame': 'black',
    'blk_armrests': 'with'
  },
  checkboxSelections: {},              // top-level sibling, NOT nested inside selections
  variables: { width: 160 }
});

// TAX: display price.formatted, charge price.totalWithTax.
// price.subtotal is the pre-tax figure in BOTH tax modes. Avoid price.totalPrice
// on the money path — it equals subtotal in exclusive mode but totalWithTax in
// inclusive mode, so its meaning depends on a per-project setting.
console.log('Display (incl. tax):', price.formatted);        // "$1,223.99"
console.log('Charge:', price.totalWithTax);                  // 1223.99
console.log('Subtotal (pre-tax):', price.formattedSubtotal); // "$1,019.99"
console.log('Tax:', price.formattedTax, price.taxLabel);     // "$204.00 VAT"

// Did the selections actually match anything? An EMPTY matchedBlockIds
// alongside a non-empty selections map means nothing matched — you got
// base prices only, which otherwise looks like a valid default price.
console.log(price.matchedBlockIds, price.unmatchedSelectionKeys);

// Submit quote
const quote = await client.submitQuote('proj_123', {
  formData: { name: 'Jane', email: '[email protected]' },
  configuration: { selections: { /* ... */ }, variables: { width: 160 } }
});

Continue reading