Blob Documentation

Everything you need to create fluid visualizations, integrate APIs, and build interactive experiences with Blob.

🚀 Getting Started

Setup Your Environment

1. Clone our SDK: 
   git clone https://github.com/blob-localhost/blob-sdk.git
   
2. Install dependencies:
   npm install 
   or 
   yarn install
   
3. Start development server:
   npm run dev

Your First Blob

Create a simple fluid visualization with just three lines of code:

const blob = new BlobSDK('container');
blob.addData({ temperature: 25, pressure: 1000 });
blob.render();

✨ Core Features

Fluid Layouts

Create dynamic visualizations that morph and adapt to data changes in real-time.

API-First

Powerful RESTful endpoints for creating, updating, and streamlining fluid data transformations.

Real-Time

Stream and update visualizations instantly with live data sources.

Collaborative

Multiple users can interact with visualizations simultaneously for real-time collaboration.

📘 API Reference

Core Endpoints

POST /api/v1/visuals

Create a new visualization

Example Request:

{
  "layout_type": "organic",
  "theme": "fluid",
  "transition_speed": 0.5
}

GET /api/v1/visuals/{id}

Get visualization data

Example Response:

{
  "visual_id": "visual-organic-2891",
  "created_at": "2025-09-26T14:30:00.000Z"
}

🎯 Best Practices

Data Mapping

Normalize and clean your data before input. Use consistent keys for smooth transitions between visual states.

Performance Optimization

Leverage Blob's throttling features for high-frequency data streams. Use cached visual states for large datasets.

Collaborative Design

Use Blob's shared workspace to prototype fluid interactions with team members in real-time. Lock specific elements during collaborative editing sessions.

Visual Consistency

Maintain color harmony across visual states. Use Blob's built-in palette generator for color transitions between visual modes.

Premium Feature

💻 Code Examples

Advanced Animation

JavaScript Example

blob.on('transition', (progress) => {
  if (progress > 0.75) {
    blob.addEffect('swirl', {
      intensity: Math.sin(progress * Math.PI)
    });
  }
});

⚠️ Troubleshooting

Visualization Not Rendering

Check if your container element has defined dimensions. Blob visualizations require explicit height/width for proper scaling.

.blob-container {
  width: 100%;
  height: 500px;
}

⚠️ Container with id="blob-container" not found in DOM when render() was called

Slow Performance with Large Datasets

Use the Blob.optimize API to convert large visualizations to optimized fluid forms.

Blob.optimize(myData, {
  maxParticles: 5000,
  simplification: 0.8
});