WebStudio Integration

WebStudio’s visual builder paired with FlareBuilder’s structured content creates a powerful workflow — designers build layouts visually while content teams manage everything through FlareBuilder’s editor. The Feed API delivers content as plain JSON, and WebStudio’s Resource and data binding system does the rest.

Prerequisites

• A FlareBuilder organization with published content
• A WebStudio project (webstudio.is)
• Your organization’s feed URL: https://your-org.flarebuilder.com/feed

Understanding the Data Flow

FlareBuilder (content editor)
    ↓  publish
Feed API (JSON at /feed)
    ↓  HTTP Resource
WebStudio (visual bindings)
    ↓  publish
Your website (visitors)

The Feed API is public and requires no authentication for published content, so there’s no API key to manage. WebStudio fetches the feed at page load time, making your content always up to date within the Feed API’s 15-minute edge cache window.

Feed Response Structure

Before binding data in WebStudio, it helps to understand what the feed returns. Here’s the structure you’ll be working with:

{
  "title": "Your Org Feed",
  "items": [
    {
      "id": "011a1262-8675-486f-a3e1-9c62ca273f5e",
      "title": "Quarterly Update",
      "tags": ["news", "featured"],
      "template_name": "Blog Post",
      "date_published": "2026-02-11T06:00:00.000Z",
      "date_expires": null,
      "date_created": "2026-02-12T15:53:52Z",
      "author": { "id": "e022..." },
      "permalink": "https://your-org.flarebuilder.com/p/011a1262-...",
      "sections": [
        {
          "id": "content",
          "label": "Content",
          "data": {
            "description": "A brief summary.",
            "main_content": "<h2>Details</h2><p>...</p>"
          }
        }
      ]
    }
  ],
  "pagination": {
    "next": "https://your-org.flarebuilder.com/feed?cursor=...&limit=20",
    "has_more": false,
    "limit": 20
  }
}

Key fields for WebStudio bindings:

Path	Type	Description
items[].id	string	UUID — use as the key for detail page routes
items[].title	string	Content title
items[].type	string	Template name (e.g. “Blog Post”, “Event”)
items[].tags	string[]	Tag names
items[].date_published	string	ISO 8601 date
items[].permalink	string	URL to fetch this single item
items[].sections[].id	string	Section identifier from your template
items[].sections[].data.*	any	Template-defined fields

Note

Section fields vary by template. Check your FlareBuilder workspace templates for the exact section IDs and field names your content uses.

Step 1: Create a Resource

A WebStudio Resource is an HTTP data source bound to a page or component.

1. Open your WebStudio project and navigate to the page where you want to display content.

2. In the left panel, open the Resources tab (or press R).

3. Click Add Resource and configure it:

   • Name: feed (you’ll reference this name in bindings)
   • URL: https://your-org.flarebuilder.com/feed
   • Method: GET

4. Click Fetch to preview the response. You should see your FlareBuilder content in the response panel.

5. Save the Resource.

To filter the feed by content type, add query parameters directly to the URL:

https://your-org.flarebuilder.com/feed?type=Blog+Post&sort=newest&limit=20

Step 2: Display a Content List

With your Resource set up, bind the items array to a Collection component to repeat a card for each item.

1. Add a Collection component to your canvas (or use an existing container you want to repeat).

2. In the Data panel for the Collection, set the source to:

   $resources.feed.items

3. Inside the Collection, add elements for your card layout — for example a heading, paragraph, and link.

4. Select the heading element and bind its text content:

   $item.title

5. Select the paragraph and bind its text content to the summary field inside your content section:

   $item.sections.find(s => s.id === 'content')?.data?.description

6. Select the link and set its href to route to the detail page:

   /blog/ + $item.id

Tip

WebStudio expressions support JavaScript. Use .find(), optional chaining (?.), and string concatenation directly in binding expressions.

Step 3: Bind Common Fields

Here are ready-to-use binding expressions for the most common fields:

Element	Binding expression
Title heading	$item.title
Summary paragraph	$item.sections.find(s => s.id === 'content')?.data?.description
Published date	new Date($item.date_published).toLocaleDateString()
Type badge	$item.type
Detail page link	"/blog/" + $item.id
Tags (first tag)	$item.tags[0]
Tag list joined	$item.tags.join(", ")

For a formatted date with options:

new Date($item.date_published).toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
})

Step 4: Detail Pages

WebStudio’s dynamic pages receive a URL parameter that you use to fetch a single item.

1. Create a new page at path /blog/[id] (or your preferred slug). WebStudio treats path segments in brackets as dynamic parameters.

2. Add a Resource to this page:

   • Name: post
   • URL: Use an expression that combines the base URL with the page parameter:

     "https://your-org.flarebuilder.com/p/" + $params.id

   • Method: GET

3. Click Fetch — WebStudio will prompt you for a sample id value. Use any UUID from your FlareBuilder feed to preview real content.

4. Bind elements on the page to the single item response. The /p/{id} endpoint returns the item object directly (not wrapped in a feed):

   • Title: $resources.post.title
   • Body: $resources.post.sections.find(s => s.id === 'content')?.data?.main_content
   • Published date: new Date($resources.post.date_published).toLocaleDateString()

Note

The single-item endpoint (/p/{id}) returns the item object directly — no items[] wrapper. Bindings start at the top level: $resources.post.title, not $resources.post.items[0].title.

Rendering HTML Content

The main_content field (and similar rich text fields) contains HTML. To render it correctly in WebStudio:

1. Add an HTML Embed component to your canvas.
2. In the Code property, bind the expression:

   $resources.post.sections.find(s => s.id === 'content')?.data?.main_content ?? ''

WebStudio renders the HTML embed as raw markup on the page.

Step 5: Filtering with Variables

Make your Resource dynamic by replacing hard-coded query parameters with page variables.

1. In the Resources panel, open your feed Resource.

2. Change the URL to use a variable expression. For a tag filter:

   "https://your-org.flarebuilder.com/feed?tag=" + ($variables.selectedTag ?? "")

3. Add a Variable named selectedTag to the page with a default value (e.g. "news").

4. Bind navigation elements (tabs, filter buttons) to update selectedTag on click, and the Resource will re-fetch with the new value.

Common filter patterns:

By Type

"https://your-org.flarebuilder.com/feed?type=" + encodeURIComponent($variables.contentType)

By Tag

"https://your-org.flarebuilder.com/feed?tag=" + encodeURIComponent($variables.tag)

Search

"https://your-org.flarebuilder.com/feed?search=" + encodeURIComponent($variables.query)

Paginated

$variables.nextPage
  ? $variables.nextPage
  : "https://your-org.flarebuilder.com/feed?limit=20"

Update $variables.nextPage to $resources.feed.pagination.next when the user clicks “Load more”.

Step 6: Pagination

The feed paginates 20 items by default. Implement a “Load more” button:

1. Add a Button component below your Collection.

2. Set the button’s visibility expression to show only when more pages exist:

   $resources.feed.pagination.has_more === true

3. Add an Action to the button’s click event: update $variables.nextPage to:

   $resources.feed.pagination.next

4. Update your Resource URL to use the variable (see the Paginated tab above).

5. To accumulate items across pages (rather than replacing), use a variable to store the combined list — note that this requires a JavaScript expression to merge arrays.

Tip

For a simpler approach, increase the page limit to up to 100 items: ?limit=100. This works well for most sites and avoids managing pagination state in the UI.

Channel Feeds

If your FlareBuilder organization uses channels for gated or unlisted content, the channel feed requires a token:

https://your-org.flarebuilder.com/feed/members-only?token=YOUR_CHANNEL_TOKEN

1. Add the channel feed URL as a Resource, with the token in the URL.

2. In WebStudio, mark the Resource as used only on protected pages (e.g. behind a password or access control on your hosting layer).

Caution

Channel tokens are visible in WebStudio’s client-side fetch. For truly private content, add access control at your hosting layer (e.g. Cloudflare Access or a login gate) and serve the token only to authenticated users. Do not use channel tokens for content that must stay completely private.

Content Updates and Caching

FlareBuilder content reaches WebStudio visitors through two cache layers:

Layer	TTL	Where
Cloudflare edge	15 minutes	CDN before the feed origin
Browser	5 minutes	Visitor’s browser

When a content editor publishes an update in FlareBuilder, the feed cache is invalidated automatically. Visitors will see the updated content within 15 minutes without any action needed on the WebStudio side.

Note

WebStudio fetches Resources at page load. Visitors who are already on the page won’t see updates until they reload — this is standard behavior for any data-driven website.

Multi-Template Sites

If your FlareBuilder workspace uses multiple templates (e.g. “Blog Post”, “Event”, “Announcement”), create separate Resources for each type and build dedicated sections of your site for each:

/blog     → Resource: feed?type=Blog+Post
/events   → Resource: feed?type=Event&sort=oldest
/news     → Resource: feed?type=Announcement

Each Resource maps cleanly to a separate WebStudio page or section, and detail pages at /blog/[id], /events/[id] all use the same /p/{id} endpoint.

Troubleshooting

Resource returns empty items array Confirm you have published content in FlareBuilder. Draft and unpublished items are not included in the feed. Also check that any type= filter matches exactly — template names are case-sensitive.

Binding expression shows undefined The section id or field name may not match. Open the Resource preview in WebStudio and inspect the raw JSON to find the exact section ID and field names for your template.

Feed URL returns 404 Verify your organization slug is correct. The feed is at https://{your-slug}.flarebuilder.com/feed — the subdomain must match your organization’s slug exactly.

HTML content renders as escaped text Use an HTML Embed component rather than a Text component. Text components escape HTML entities; HTML Embed renders raw markup.