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
Client SetupConfigure the SDK client with an access token (browser) or API token (server) and the API URL.ProjectsList, read, create, update, and delete projects, with automatic decompression of large scenes.Option BlocksCreate and manage the 16 option block types and their variants from headless code.Conditional LogicAuthor and evaluate show / hide / disable rules across blocks, variants, and 3D parts.
