Last updated: Jul 25, 2025, 01:49 PM UTC

Bubble.io Plugin Specification

Overview

This document outlines the technical specification for creating a Bubble.io plugin that integrates @knowcode/doc-builder, enabling Bubble developers to create and manage beautiful documentation directly from their Bubble applications.

Plugin Architecture

Core Components

bubble-doc-builder/
├── plugin.json              # Plugin manifest
├── elements/
│   ├── DocViewer/          # Main documentation viewer
│   │   ├── element.json    # Element configuration
│   │   ├── preview.js      # Editor preview
│   │   ├── runtime.js      # Runtime behavior
│   │   └── style.css       # Component styling
│   ├── DocSearch/          # Search component
│   └── DocNav/             # Navigation widget
├── actions/
│   ├── generate-docs/      # Generate documentation
│   ├── deploy-to-vercel/   # Deploy documentation
│   ├── update-content/     # Update doc content
│   └── sync-from-bubble/   # Sync Bubble data
├── api/
│   ├── calls/              # API definitions
│   └── shared.js           # Shared utilities
└── assets/
    ├── icons/              # Plugin icons
    └── templates/          # Doc templates

Element Specifications

1. DocViewer Element

The main component for displaying documentation within Bubble apps.

Properties

Property Type Default Description
doc_url text "" URL of hosted documentation
theme dropdown "light" Theme selection (light/dark/auto)
show_navigation boolean true Show/hide navigation sidebar
show_search boolean true Enable search functionality
custom_css text "" Custom CSS overrides
height number 600 Viewer height in pixels
auth_required boolean false Require authentication
auth_token text "" Authentication token

States

State Type Description
is_loading boolean Documentation loading state
current_page text Current page path
search_results list Search results array
error_message text Error details if any

Events

  • Documentation Loaded - Triggered when docs load
  • Page Changed - Fired on navigation
  • Search Performed - When user searches
  • Error Occurred - On loading errors

2. DocSearch Element

Standalone search widget for documentation.

Properties

Property Type Default Description
doc_source text "" Documentation source URL
placeholder text "Search docs..." Search placeholder
max_results number 10 Maximum results
show_preview boolean true Show result previews

3. DocNav Element

Navigation tree component.

Properties

Property Type Default Description
doc_structure text "" JSON navigation structure
collapsible boolean true Allow collapse/expand
show_icons boolean true Show file/folder icons

Action Specifications

1. Generate Documentation

Creates documentation from Bubble app data.

Parameters

Parameter Type Required Description
source_type dropdown Yes Data source (database/API/page)
content_list list Yes List of content to document
output_format dropdown Yes Format (markdown/html)
include_schemas boolean No Include data schemas
template dropdown No Documentation template

Output

  • documentation_url - Generated documentation URL
  • generation_time - Time taken in ms
  • page_count - Number of pages created

2. Deploy to Vercel

Deploys documentation to Vercel.

Parameters

Parameter Type Required Description
project_name text Yes Vercel project name
vercel_token text Yes Vercel API token
domain text No Custom domain
production boolean No Deploy to production

Output

  • deployment_url - Live documentation URL
  • deployment_id - Vercel deployment ID
  • status - Deployment status

3. Update Content

Updates specific documentation content.

Parameters

Parameter Type Required Description
page_path text Yes Path to page
new_content text Yes Updated content
commit_message text No Change description
auto_deploy boolean No Auto-deploy changes

4. Sync from Bubble

Synchronizes documentation with Bubble data.

Parameters

Parameter Type Required Description
sync_type dropdown Yes Manual/automatic/scheduled
data_types list Yes Bubble data types to sync
sync_interval number No Interval in minutes
webhook_url text No Webhook for updates

API Integration

Authentication Flow

// Initialize doc-builder API
function initializeDocBuilder(apiKey, bubbleAppId) {
  return {
    baseUrl: 'https://api.doc-builder.io',
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'X-Bubble-App-ID': bubbleAppId,
      'Content-Type': 'application/json'
    }
  };
}

Webhook Events

Event Payload Description
docs.generated {pages, url, timestamp} Documentation generated
docs.deployed {url, version, environment} Deployment complete
docs.updated {changes, author, timestamp} Content updated
docs.error {error, context, timestamp} Error occurred

Bubble Database Schema

DocBuilder Config

Field Type Description
api_key text Doc-builder API key
vercel_token text Vercel deployment token
project_name text Documentation project name
base_url text Documentation base URL
last_sync date Last synchronization
auto_sync boolean Enable auto-sync
sync_interval number Sync interval (minutes)

Documentation Pages

Field Type Description
title text Page title
slug text URL slug
content text Markdown content
parent_page DocPage Parent for hierarchy
order number Sort order
is_published boolean Publication status
last_modified date Last update
author User Page author

Documentation Templates

Field Type Description
name text Template name
description text Template description
structure text JSON structure
styles text Custom CSS
is_default boolean Default template

Use Cases

1. API Documentation

Automatically generate API documentation from Bubble API workflows:

// Generate API docs from workflows
generateDocs({
  source_type: 'api_workflows',
  include_schemas: true,
  template: 'api_reference'
});

2. User Guides

Create user documentation from Bubble pages:

// Generate user guide from app pages
generateDocs({
  source_type: 'pages',
  content_list: ['dashboard', 'settings', 'profile'],
  template: 'user_guide'
});

3. Database Documentation

Document data types and fields:

// Document database structure
generateDocs({
  source_type: 'database',
  include_schemas: true,
  template: 'data_dictionary'
});

Implementation Roadmap

Phase 1: MVP (2 weeks)

  • Basic DocViewer element
  • Generate documentation action
  • Simple deployment to Vercel
  • Basic authentication

Phase 2: Enhanced Features (2 weeks)

  • DocSearch element
  • DocNav element
  • Update content action
  • Webhook integration

Phase 3: Advanced Integration (2 weeks)

  • Auto-sync from Bubble
  • Custom templates
  • Multi-language support
  • Analytics integration

Phase 4: Polish & Launch (1 week)

  • Performance optimization
  • Error handling
  • Documentation
  • Marketplace submission

Plugin Settings

General Settings

{
  "name": "Doc Builder for Bubble",
  "description": "Create beautiful documentation from your Bubble app",
  "categories": ["data", "visual elements", "analytics"],
  "plugin_version": "1.0.0",
  "documentation_url": "https://doc-builder.io/bubble-plugin",
  "support_email": "support@doc-builder.io"
}

API Connections

{
  "api_connections": [
    {
      "name": "DocBuilder API",
      "base_url": "https://api.doc-builder.io/v1",
      "authentication": "bearer_token",
      "shared_headers": {
        "X-Plugin-Version": "1.0.0",
        "X-Platform": "bubble"
      }
    }
  ]
}

Security Considerations

API Key Management

  • Store API keys encrypted in Bubble database
  • Use Bubble's privacy rules for key access
  • Implement key rotation mechanism
  • Log all API key usage

Content Security

  • Sanitize all user-generated content
  • Implement CSP headers for embedded docs
  • Use iframe sandboxing for viewer
  • Validate all webhook signatures

Access Control

  • Integrate with Bubble's user roles
  • Implement document-level permissions
  • Support SSO for enterprise users
  • Audit trail for all actions

Performance Optimization

Caching Strategy

  • Cache generated documentation (1 hour)
  • CDN integration for static assets
  • Lazy load documentation sections
  • Progressive enhancement

Resource Management

  • Limit concurrent API calls
  • Implement request queuing
  • Optimize large documentation sets
  • Background processing for heavy tasks

Pricing Model for Plugin

Free Tier

  • Up to 10 documentation pages
  • Basic templates
  • Community support
  • Bubble.io branding

Pro Tier ($19/month)

  • Unlimited pages
  • Custom templates
  • Priority support
  • White-label option

Team Tier ($49/month)

  • Everything in Pro
  • Team collaboration
  • Advanced analytics
  • API access

Success Metrics

Usage Metrics

  • Plugin installations
  • Active users (MAU)
  • Documentation pages created
  • Deployments per month

Performance Metrics

  • API response time (<200ms)
  • Documentation load time (<2s)
  • Search response time (<100ms)
  • Uptime (99.9%)

Business Metrics

  • Conversion rate (free to paid)
  • Customer lifetime value
  • Monthly recurring revenue
  • Support ticket volume

Document History

Date Author Changes
2025-07-22 System Initial plugin specification