quick-builder-sdk

Core SDK for Quick Builder - a professional drag-and-drop website builder.

This package provides the API client, content parser, and TypeScript types for fetching and rendering Quick Builder content in your applications.

Installation

npm install quick-builder-sdk

Quick Start

import { createClient, parseContent } from 'quick-builder-sdk';

// Create a client
const client = createClient({
  apiKey: 'your-api-key',
});

// Fetch content
const content = await client.getContent({ slug: 'homepage' });

if (content) {
  // Parse for rendering
  const parsed = parseContent(content);
  console.log(parsed);
}

API Reference

createClient(config)

Create a Quick Builder API client.

const client = createClient({
  apiKey: 'your-api-key',      // Required
  apiHost: 'https://...',       // Optional: Custom API host
  cache: {
    enabled: true,              // Enable caching (default: true)
    ttl: 300,                   // Cache TTL in seconds (default: 300)
  },
});

client.getContent(options)

Fetch single content by slug or ID.

// By slug
const content = await client.getContent({ slug: 'homepage' });

// By ID
const content = await client.getContent({ id: 'content-id' });

// Preview mode (fetch unpublished)
const content = await client.getContent({ slug: 'homepage', preview: true });

client.getAllContent(options)

List all published content.

const pages = await client.getAllContent({
  limit: 100,   // Max items (default: 100)
  offset: 0,    // Pagination offset (default: 0)
});

client.getContentByUrl(options)

Get content matching a URL path (for URL-based targeting).

const content = await client.getContentByUrl({
  url: '/blog/my-post',
});

parseContent(content)

Parse Quick Builder content into a renderable tree.

import { parseContent } from 'quick-builder-sdk';

const parsed = parseContent(content);
// Returns: { id, type, props, children }

initQuickBuilder(config)

Initialize SDK globally (alternative to passing config each time).

import { initQuickBuilder, getClient } from 'quick-builder-sdk';

// Initialize once at app startup
initQuickBuilder({ apiKey: 'your-api-key' });

// Use anywhere
const client = getClient();
const content = await client.getContent({ slug: 'homepage' });

Content Utilities

Parse & Transform

import {
  parseContent,
  transformContent,
  flattenContent,
  findNodeById,
  findNodesByType,
} from 'quick-builder-sdk';

// Parse content
const parsed = parseContent(content);

// Transform with context (responsive breakpoints, asset URLs)
const transformed = transformContent(parsed, {
  breakpoint: 'mobile',
  assetPrefix: 'https://cdn.example.com',
});

// Flatten tree to array
const allNodes = flattenContent(parsed);

// Find specific node
const node = findNodeById(parsed, 'node-id');

// Find all nodes of type
const buttons = findNodesByType(parsed, 'Button');

Targeting

import {
  matchesUrl,
  isWithinSchedule,
  matchesDevice,
  detectDevice,
} from 'quick-builder-sdk';

// Check URL targeting
const matches = matchesUrl('/blog/*', content.targeting);

// Check schedule
const isActive = isWithinSchedule(content.targeting);

// Check device
const device = detectDevice(navigator.userAgent);
const matches = matchesDevice(device, content.targeting);

Compression (Optional)

Quick Builder stores content compressed. The API decompresses automatically, but utilities are provided for edge cases:

import lzutf8 from 'lzutf8';
import { isCompressedContent, decompressContent } from 'quick-builder-sdk';

if (isCompressedContent(rawContent)) {
  const json = decompressContent(rawContent, lzutf8);
  const content = JSON.parse(json);
}

TypeScript

Full TypeScript support included:

import type {
  BuilderContent,
  ParsedNode,
  ClientConfig,
  GetContentOptions,
} from 'quick-builder-sdk';

Framework SDKs

For framework-specific rendering, use the companion packages:

• quick-builder-react - React components and hooks (coming soon)
• quick-builder-nextjs - Next.js integration (coming soon)

Requirements

• Node.js 18+
• TypeScript 5+ (for type definitions)

License

MIT