Constela New Features - Islands Architecture, Realtime Features, and New UI Components

# constela# json# webdev# typescript
Constela New Features - Islands Architecture, Realtime Features, and New UI ComponentsYuuichi Eguchi

Introduction We're excited to announce new features for Constela, with 7 major new...

Introduction

We're excited to announce new features for Constela, with 7 major new capabilities that significantly improve performance and developer experience:

  • Theme System (CSS variables, light/dark/system modes)
  • Islands Architecture (6 hydration strategies)
  • Streaming SSR (3 flush strategies)
  • Realtime Features (SSE, optimistic updates, state binding)
  • New UI Components (DatePicker, Calendar, Tree, Accordion, DataTable, VirtualScroll, Chart)

Feature 1: Theme System

We've introduced a CSS variable-based theme system with support for light/dark/system modes and shadcn/ui-compatible color tokens.

{
  "theme": {
    "mode": "system",
    "colors": {
      "primary": "hsl(220 90% 56%)",
      "primary-foreground": "hsl(0 0% 100%)",
      "background": "hsl(0 0% 100%)",
      "foreground": "hsl(222 47% 11%)",
      "muted": "hsl(210 40% 96%)",
      "border": "hsl(214 32% 91%)"
    },
    "darkColors": {
      "background": "hsl(222 47% 11%)",
      "foreground": "hsl(210 40% 98%)",
      "muted": "hsl(217 33% 17%)",
      "border": "hsl(217 33% 17%)"
    },
    "fonts": {
      "sans": "Inter, system-ui, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "cssPrefix": "app"
  }
}
Enter fullscreen mode Exit fullscreen mode

Key Features

  • System Theme Detection: Automatic prefers-color-scheme detection
  • Persistence: localStorage + Cookie support (SSR-safe)
  • CSS Variables: Auto-applies prefixed variables like --app-primary to :root
  • Dark Class: Automatically manages dark class on document.documentElement

Feature 2: Islands Architecture

We've implemented Islands Architecture for partial hydration. Choose from 6 hydration strategies to drastically reduce your initial JS bundle.

{
  "kind": "island",
  "id": "interactive-chart",
  "strategy": "visible",
  "strategyOptions": {
    "threshold": 0.5,
    "rootMargin": "100px"
  },
  "content": {
    "kind": "component",
    "name": "Chart",
    "props": { "data": { "expr": "state", "name": "chartData" } }
  },
  "state": {
    "chartData": { "type": "list", "initial": [] }
  },
  "actions": [
    {
      "name": "loadData",
      "steps": [
        { "do": "fetch", "url": { "expr": "lit", "value": "/api/chart-data" }, "result": "data", "onSuccess": [
          { "do": "set", "target": "chartData", "value": { "expr": "var", "name": "data" } }
        ]}
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Hydration Strategies

Strategy Description Use Case
load Hydrate immediately on page load Critical interactive elements
idle Hydrate when browser is idle Non-urgent interactions
visible Hydrate when element enters viewport Below-the-fold content
interaction Hydrate on first user interaction Lazy-loaded widgets
media Hydrate when media query matches Responsive components
never Never hydrate Static content only

Build Optimization

Islands are automatically code-split:

dist/
  _islands/
    interactive-chart.js   # Island-specific bundle
    sidebar-menu.js
  client.js                # Main bundle
Enter fullscreen mode Exit fullscreen mode

Feature 3: Realtime Features

We've added SSE (Server-Sent Events) connections, optimistic updates, and state binding.

SSE Connections 

{
  "do": "sseConnect",
  "connection": "notifications",
  "url": { "expr": "lit", "value": "/api/events" },
  "eventTypes": ["message", "update"],
  "reconnect": {
    "enabled": true,
    "strategy": "exponential",
    "maxRetries": 5,
    "baseDelay": 1000
  },
  "onMessage": [
    { "do": "update", "target": "messages", "operation": "push", "value": { "expr": "var", "name": "payload" } }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Optimistic Updates

Update UI immediately with automatic rollback on server error:

{
  "name": "likePost",
  "steps": [
    {
      "do": "optimistic",
      "target": "posts",
      "path": { "expr": "var", "name": "index" },
      "value": { "expr": "lit", "value": { "liked": true } },
      "result": "updateId",
      "timeout": 5000
    },
    {
      "do": "fetch",
      "url": { "expr": "concat", "items": [
        { "expr": "lit", "value": "/api/posts/" },
        { "expr": "var", "name": "postId" },
        { "expr": "lit", "value": "/like" }
      ]},
      "method": "POST",
      "onSuccess": [
        { "do": "confirm", "id": { "expr": "var", "name": "updateId" } }
      ],
      "onError": [
        { "do": "reject", "id": { "expr": "var", "name": "updateId" } }
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Feature 4: Streaming SSR

We've implemented ReadableStream-based streaming SSR with Edge Runtime support for significantly reduced TTFB. Just enable it in your config - no TypeScript required.

Configuration 

{
  "streaming": {
    "enabled": true,
    "flushStrategy": "batched"
  }
}
Enter fullscreen mode Exit fullscreen mode

Flush Strategies

Strategy Description
immediate Flush each chunk immediately
batched Batch flush at 1KB threshold (default)
manual Flush only at the end (small pages)

Suspense Boundaries

Use suspense nodes for async content with loading states:

{
  "kind": "suspense",
  "id": "user-profile",
  "fallback": {
    "kind": "element",
    "tag": "div",
    "props": { "className": { "expr": "lit", "value": "skeleton" } }
  },
  "content": {
    "kind": "component",
    "name": "UserProfile"
  }
}
Enter fullscreen mode Exit fullscreen mode

The server renders the fallback immediately, then streams the actual content when ready - all configured declaratively in JSON.

Feature 5: New UI Components

DatePicker / Calendar 

{
  "kind": "component",
  "name": "DatePicker",
  "props": {
    "value": { "expr": "state", "name": "selectedDate" },
    "onChange": { "event": "change", "action": "updateDate" },
    "format": { "expr": "lit", "value": "yyyy-MM-dd" },
    "locale": { "expr": "lit", "value": "en-US" }
  }
}
Enter fullscreen mode Exit fullscreen mode

Tree / Accordion 

{
  "kind": "component",
  "name": "Tree",
  "props": {
    "items": { "expr": "state", "name": "treeData" },
    "onSelect": { "event": "select", "action": "handleSelect" },
    "expandedKeys": { "expr": "state", "name": "expanded" }
  }
}
Enter fullscreen mode Exit fullscreen mode

DataTable

Full-featured table with sorting, filtering, and pagination:

{
  "kind": "component",
  "name": "DataTable",
  "props": {
    "data": { "expr": "state", "name": "users" },
    "columns": { "expr": "lit", "value": [
      { "key": "name", "title": "Name", "sortable": true },
      { "key": "email", "title": "Email", "filterable": true },
      { "key": "status", "title": "Status" }
    ]},
    "pageSize": { "expr": "lit", "value": 10 },
    "sortable": { "expr": "lit", "value": true },
    "filterable": { "expr": "lit", "value": true }
  }
}
Enter fullscreen mode Exit fullscreen mode

VirtualScroll 

{
  "kind": "component",
  "name": "VirtualScroll",
  "props": {
    "items": { "expr": "state", "name": "largeList" },
    "itemHeight": { "expr": "lit", "value": 50 },
    "containerHeight": { "expr": "lit", "value": 400 },
    "overscan": { "expr": "lit", "value": 5 }
  }
}
Enter fullscreen mode Exit fullscreen mode

Chart (7 Types) 

{
  "kind": "component",
  "name": "BarChart",
  "props": {
    "data": { "expr": "state", "name": "chartData" },
    "valueKey": { "expr": "lit", "value": "value" },
    "labelKey": { "expr": "lit", "value": "label" },
    "showGrid": { "expr": "lit", "value": true }
  }
}
Enter fullscreen mode Exit fullscreen mode

Supported chart types: bar, line, pie, donut, area, radar, scatter

Summary

This update brings significant enhancements for modern web application development:

  • Performance: Islands Architecture reduces bundle size, Streaming SSR improves TTFB
  • DX: Theme system makes dark mode easy, realtime features enable declarative sync logic
  • UI: Feature-rich UI components boost development efficiency

Try it out today!

Links