What is dcupl?

dcupl is a frontend-first data integration layer that lets you build data-driven applications without waiting for backend infrastructure. It combines a powerful open-source TypeScript SDK with an optional SaaS platform (Console) for data management and API deployment.

The Problem dcupl Solves

Frontend developers building data-intensive applications typically face several challenges:

Backend dependencies - You wait for APIs to be built or data pipelines to be ready before you can work with real data.

Repetitive work - Every project requires building filter, query, pagination, and aggregation logic from scratch.

Data complexity - Integrating multiple data sources with different formats and structures is time-consuming.

Slow iterations - Changes to data models require backend modifications and deployments, slowing down development cycles.

The dcupl Solution

dcupl provides a different approach:

flowchart LR
  subgraph traditional["Traditional Approach"]
    direction LR
    DB[(Database)] --> API[Backend API]
    API --> FE[Frontend]
  end
flowchart LR
  subgraph dcupl["dcupl Approach"]
    direction LR
    DATA[Data Sources] --> SDK["dcupl SDK"]
    SDK --> APP[Your Application]
  end

With dcupl, you work with real data from day one. The SDK handles filtering, sorting, aggregation, and faceting directly in the browser or Node.js runtime.

Core Components

dcupl consists of two main parts:

1. SDK (Open Source)

The @dcupl/core package is a universal TypeScript query engine that runs in both browser and Node.js environments. It provides:

  • In-memory data storage and indexing
  • Powerful query language with operators
  • Faceted search and aggregations
  • Change detection and reactivity
import { Dcupl } from '@dcupl/core';

const dcupl = new Dcupl();

// Define your data structure
dcupl.models.set({
  key: 'Product',
  properties: [
    { key: 'name', type: 'string' },
    { key: 'price', type: 'int' },
    { key: 'category', type: 'string' },
  ],
});

// Add data
dcupl.data.set(products, { model: 'Product' });

// Initialize and query
await dcupl.init();

const list = dcupl.lists.create({ modelKey: 'Product' });
list.catalog.query.addCondition({
  attribute: 'category',
  operator: 'eq',
  value: 'Electronics',
});

const results = list.catalog.query.items();

2. Console (Optional SaaS)

The dcupl Console is a web platform that adds:

  • Visual model editor with AI assistance
  • Data transformation workflows
  • REST API deployment (RAPIs)
  • Team collaboration

The SDK works independently, but Console accelerates development for complex projects.

Key Benefits

Instant Interactions

Queries execute in the browser with no network latency. Users get immediate feedback when filtering or searching.

Reduced Server Costs

Client-side computation offloads filtering and faceting to user browsers. Your servers only deliver data, not compute queries.

SSR Ready

The same SDK runs in Node.js for server-side rendering. Initial page loads include real data for SEO, then the client takes over for interactions.

Framework Agnostic

dcupl works with any JavaScript framework: React, Vue, Angular, Svelte, or vanilla JS.

JSON-First Architecture

All configuration is portable JSON. Version control your data models. Deploy the same config to different environments.

When to Use dcupl

dcupl is a good fit when you need:

  • Product catalogs with filtering and facets
  • Data tables with search and sorting
  • Dashboard applications with aggregations
  • Any interface where users explore and filter data

dcupl handles datasets from hundreds to hundreds of thousands of items efficiently.

When to Consider Alternatives

dcupl may not be the best choice when:

  • You need real-time multi-user data synchronization (use a real-time database)
  • Your data changes constantly (dcupl is optimized for read-heavy workloads)
  • You have extremely large datasets that cannot fit in memory (use server-side querying)

Real-World Use Cases

E-commerce - Product catalogs with filters, facets, and instant search.

Internal Tools - Data exploration dashboards for business teams.

Document Management - Search and filter across large document collections.

Configuration Interfaces - Complex product configurators with dependent options.

Next Steps

Now that you understand what dcupl is, explore: