Connect to dcupl and load data
One-time load: Data is fetched once and cached in browser memory. All subsequent queries are instant.
const dcupl = new Dcupl();
const loader = new DcuplAppLoader();
dcupl.loaders.add(loader);
await loader.config.fetch({ ... });
await loader.process();
await dcupl.init();Create a list to display Style data
Create a queryable list from your Style model for filtering and display.
const list = dcupl.lists.create({
modelKey: 'Style'
});Retrieve available filter options
Get filter options (facets) with item counts for each value.
// Fetch facets for each filterable attribute
const genderFacets = list.catalog.fn.facets({
attribute: 'gender'
});
// Returns: [{ value: 'Men', size: 22165 }, ...]Click on facet values to filter
Filter data instantly - all processing happens client-side.
list.catalog.query.addCondition({
attribute: 'gender',
operator: 'eq',
value: 'Men'
});Search products by name instantly
list.catalog.query.addCondition({
attribute: 'productDisplayName',
operator: 'find',
value: 'Shirt'
});Order by any attribute
list.catalog.query.items({
sort: { attributes: ['articleType'], order: ['ASC'] }
});Calculate totals and unique counts
// Count total items matching current filters
const totalItems = list.catalog.query.count();
// Get unique values per attribute
const categories = list.catalog.fn.facets({
attribute: 'masterCategory'
});No backend setup. All processing in your browser.
You ask your client for a simple data export. You create a data model, upload it to the dcupl console, and start coding immediately. Within hours, you're getting feedback on the actual application — not mockups or wireframes.
When the proof of concept is validated, you decide: keep working with static exports, or connect directly to their API. Either way, your frontend code stays exactly the same.
All data loading, queries, and aggregations happen in the browser — fast and performant.
sequenceDiagram
participant UI
participant SDK
participant Server
Note over UI,Server: One-time load
UI->>Server: Load models + data
Server-->>UI: Models & Data
UI->>SDK: Initialize
Note over UI,Server: All interactions = instant
UI->>SDK: filter(category)
SDK-->>UI: Instant results
UI->>SDK: sort(price)
SDK-->>UI: Instant results
UI->>SDK: search(term)
SDK-->>UI: Instant results
Note over UI,Server: No more server calls!flowchart LR
subgraph Source
PIM[PIM System]
end
subgraph Cloud["dcupl Console"]
Export[Data Export]
Model[Auto-gen Model]
end
subgraph Browser
SDK[dcupl SDK]
Memory[(Browser Memory)]
UI[Your App]
end
PIM -->|export| Export
Export --> Model
Model -->|one-time load| SDK
SDK --> Memory
UI <-->|instant queries| Memory