SDK Reference

Complete FlareBuilder SDK documentation for JavaScript, Vue 3, and React

SDK Reference

Framework-agnostic SDK with Vue and React wrappers for displaying FlareBuilder feeds

JavaScript SDK

The core FlareBuilder SDK works with any JavaScript environment. Import from CDN or install via npm.

Installation

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>

Basic Usage

const feed = new FlareBuilder.Feed({
  tenant: 'your-tenant',
  container: '#feed-container',
  filters: {
    types: ['event', 'announcement'],
    tags: ['featured'],
    status: 'active',
    limit: 10
  }
});

Methods

Method Description Returns
load() Fetch and render the feed Promise<void>
nextPage() Load the next page of results Promise<void>
prevPage() Load the previous page of results Promise<void>
getItems() Get the current feed items Array<FeedItem>
getState() Get the current state (items, loading, error, page, hasMore) Object

Custom Rendering

Provide a custom render function to control how feed items are displayed:

const feed = new FlareBuilder.Feed({
  tenant: 'your-tenant',
  container: '#feed-container',
  filters: { limit: 10 },
  render: {
    item: (item) => {
      return `
        <article class="feed-item">
          <h2>${item.title}</h2>
          <p>${item.sections.details?.description || ''}</p>
        </article>
      `;
    }
  }
});
Tip: If no container is provided, the feed won't auto-render. Use getItems() to access the data programmatically.

Vue 3 SDK

Reactive Vue 3 composable with automatic state management and cleanup.

Installation

import { useFlareBuilder } from 'https://flarebuilder.com/v1/flarebuilder-vue.js'

Basic Usage

<template>
  <div class="flarebuilder">
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">{{ error.message }}</div>

    <article v-for="item in items" :key="item.id">
      <h2>{{ item.title }}</h2>
    </article>

    <button @click="prevPage" :disabled="page === 1">Previous</button>
    <button @click="nextPage" :disabled="!hasMore">Next</button>
  </div>
</template>

<script setup>
import { useFlareBuilder } from 'https://flarebuilder.com/v1/flarebuilder-vue.js'

const { items, loading, error, page, hasMore, nextPage, prevPage } = useFlareBuilder({
  tenant: 'your-tenant',
  filters: {
    types: ['event'],
    limit: 10
  }
})
</script>

Return Values

Property Type Description
items Ref<Array> Reactive array of feed items
loading Ref<Boolean> Loading state
error Ref<Error|null> Error object if request failed
page Ref<Number> Current page number (1-indexed)
hasMore Ref<Boolean> Whether more pages are available
nextPage Function Load next page
prevPage Function Load previous page
load Function Manually reload current page
Auto-cleanup: The composable automatically cleans up on component unmount.

React SDK

React hook with automatic state management and cleanup.

Installation

import { useFlareBuilder } from 'https://flarebuilder.com/v1/flarebuilder-react.js'

Basic Usage

import React from 'react';
import { useFlareBuilder } from 'https://flarebuilder.com/v1/flarebuilder-react.js';

export default function FlareBuilderFeed() {
  const { items, loading, error, page, hasMore, nextPage, prevPage } = useFlareBuilder({
    tenant: 'your-tenant',
    filters: {
      types: ['event'],
      limit: 10
    }
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div className="flarebuilder">
      {items.map(item => (
        <article key={item.id}>
          <h2>{item.title}</h2>
        </article>
      ))}

      <button onClick={prevPage} disabled={page === 1}>Previous</button>
      <button onClick={nextPage} disabled={!hasMore}>Next</button>
    </div>
  );
}

Return Values

Property Type Description
items Array Array of feed items
loading Boolean Loading state
error Error|null Error object if request failed
page Number Current page number (1-indexed)
hasMore Boolean Whether more pages are available
nextPage Function Load next page
prevPage Function Load previous page
load Function Manually reload current page

Configuration Options

All SDK methods accept the same configuration object:

Option Type Required Description
tenant String Yes Your tenant slug (e.g., 'your-company')
container String No CSS selector for auto-rendering (JS SDK only)
filters Object No Filter options (see below)
render Object No Custom render function (JS SDK only)

Filter Options

Filter Type Description
types Array<String> Filter by template types (e.g., ['event', 'announcement'])
tags Array<String> Filter by tags (e.g., ['featured', 'urgent'])
status String Filter by status: 'active', 'scheduled', 'expired'
limit Number Number of items per page (default: 10, max: 100)

Example Configuration

{
  tenant: 'my-company',
  filters: {
    types: ['event', 'announcement'],
    tags: ['featured'],
    status: 'active',
    limit: 20
  }
}

CSS Styling

FlareBuilder uses a consistent set of CSS classes across all frameworks. Customize them to match your site's design.

Class Structure

All classes use the flare- prefix for consistency:

Class Description
.flarebuilder Outer wrapper container
.flare-loading Loading state container
.flare-error Error state container
.flare-item Individual content item
.flare-type-{name} Template type class (e.g., .flare-type-event)
.flare-title Item title
.flare-tags Tags container
.flare-tag Individual tag
.flare-section Section wrapper
.flare-section-{id} Specific section (e.g., .flare-section-details)
.flare-field Field wrapper
.flare-field-{id} Specific field (e.g., .flare-field-description)
.flare-value Field value content

Example Stylesheet

/* Container */
.flarebuilder {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Loading & Error States */
.flare-loading,
.flare-error {
  text-align: center;
  padding: 3rem;
  font-size: 1.1rem;
}

.flare-error {
  color: #d32f2f;
  background: #ffebee;
  border-radius: 8px;
}

/* Feed Items */
.flare-item {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.flare-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Template Type Styling */
.flare-type-event {
  border-left: 4px solid #1976d2;
}

.flare-type-announcement {
  border-left: 4px solid #f57c00;
}

/* Title and Tags */
.flare-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1a1a1a;
  padding: 1.5rem 1.5rem 0;
}

.flare-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 1.5rem 1rem;
}

.flare-tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Sections and Fields */
.flare-section {
  padding: 1.5rem;
  border-top: 1px solid #f0f0f0;
}

.flare-field {
  margin-bottom: 1rem;
}

/* Field-specific Styling */
.flare-field-image img {
  width: 100%;
  height: auto;
  display: block;
}

.flare-field-description .flare-value {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

.flare-field-event_start_date .flare-value::before {
  content: "📅 ";
}

.flare-field-location_name .flare-value::before {
  content: "📍 ";
}

/* Responsive */
@media (max-width: 768px) {
  .flarebuilder {
    padding: 1rem;
  }

  .flare-title {
    font-size: 1.5rem;
  }
}
Customization Tip: Use the Code Generator in your FlareBuilder dashboard to generate complete HTML, Script, and CSS based on your configuration. The generated CSS includes all the classes you need.