FlowFrame Documentation
Learn how to use FlowFrame to build visual data workflows
Getting Started
Quick start guide to begin using FlowFrame
Connect Your Data
FlowFrame connects to your existing data sources securely. Choose from multiple connection options to get started.
Database Connections
Connect to PostgreSQL, MySQL, MongoDB, BigQuery, Snowflake, and more. Enter your credentials securely and start querying immediately.
File Uploads
Upload CSV, Parquet, or JSON files directly. FlowFrame uses DuckDB-WASM to query files instantly in your browser - no server required.
Schema Discovery
Once connected, FlowFrame automatically discovers your tables, columns, and data types for easy exploration.
Create Your First Project
Projects are the home for your data workflows. Each project contains a canvas where you build your analysis.
Workspaces
Organize projects into workspaces. Personal workspaces are free forever; team workspaces enable collaboration.
Canvas
Each project has an infinite, zoomable canvas where you place nodes and build your data flow.
Sharing
Share projects publicly with a link, or invite team members with specific permission levels.
Node Types
Everything you can place on the canvas
Query Nodes (Frames)
The core building blocks for data transformation. Each query node executes SQL against your data sources.
SQL Editor
Write SQL with syntax highlighting, autocomplete, and intelligent suggestions for table and column names.
No-Code Builder
Build queries visually without writing SQL. Filter, join, aggregate, and transform data using an intuitive interface.
Dependencies
Reference other query nodes in your SQL. FlowFrame automatically builds CTEs and tracks the dependency graph.
Results Preview
See query results instantly with column type detection. Export results as CSV or JSON.
Visualization Nodes
Transform query results into interactive charts and dashboards.
Line Charts
Multiple series support, customizable line styles (solid, dashed, dotted), markers, and area fill options.
Bar Charts
Vertical or horizontal orientation, grouped or stacked bars, customizable colors and labels.
Pie Charts
Standard pie or donut variants with segment labels and custom colors.
Area Charts
Filled areas under lines with multiple series and opacity control.
Scatter Charts
Two-dimensional point plotting with multiple series and custom point shapes.
Card Charts
Single-value KPI displays with calculations (sum, avg, min, max, count) and formatting options.
Parameter Nodes
Create interactive controls for dynamic dashboards.
Parameter Types
Support for String, Number, Date, Boolean, and List parameter types with validation.
Usage in Queries
Reference parameters in SQL using {{parameter_id.param_name}} syntax. Values are safely escaped.
Validation
Set min/max constraints, allowed values, regex patterns, and required fields.
Dependency Tracking
See which queries use a parameter. Dependent queries auto-update when parameter values change.
Text & Shape Nodes
Document and organize your canvas with annotations and visual elements.
Text Nodes
Add rich text with formatting (bold, italic, underline), custom fonts, colors, and backgrounds.
Shape Nodes
Geometric shapes including Box, Circle, Triangle, Diamond, Pentagon, Hexagon, and more.
Group Nodes
Group related nodes together for visual organization. Collapse/expand groups to simplify complex flows.
Chart Customization
Deep customization options for all visualizations
Axes Configuration
Full control over X and Y axes display and behavior.
Scale Types
Choose linear, logarithmic, or time scales for each axis.
Axis Labels
Custom titles with font styling (bold, italic, color). Rotate labels for better readability.
Secondary Y-Axis
Add a second Y-axis for dual-scale charts with independent styling.
Styling Options
Control colors, grids, legends, and data labels.
Color Themes
Custom colors for each series. Use the color picker or enter hex values directly.
Grid Lines
Show/hide grid lines, customize color, opacity, and dash patterns.
Legends
Position legends (top, bottom, left, right) with custom font styling.
Data Labels
Show values on data points with custom positioning and formatting.
Data Transformations
Transform data before visualization.
Cumulative Values
Display running totals instead of individual values.
Percentage Mode
Normalize values as percentages of the total.
Number Formatting
Control decimal precision, thousand separators, and K/M/B notation.
Interactive Features
Make charts responsive to user interaction.
Zoom & Pan
Enable zooming and panning for data exploration.
Tooltips
Custom tooltips with field selection and formatting.
Reference Lines
Add static reference lines with labels (e.g., targets, thresholds).
Collaboration
Work together in real-time like Figma
Real-Time Editing
Multiple users can edit the same project simultaneously with zero conflicts.
CRDT Technology
Powered by Yjs for conflict-free real-time data type synchronization.
Live Cursors
See other users' cursor positions on the canvas with name labels.
Presence Indicators
Visual badges show who is editing which node.
Text Collaboration
SQL editors sync in real-time - see edits as they happen.
Roles & Permissions
Granular access control with 5 workspace roles.
Owner
Full control - manage members, settings, delete workspace, share projects publicly.
Admin
Nearly owner-level access - manage members and settings, but cannot delete workspace.
Developer
Create and edit projects, create connections, manage own work.
Explorer
View projects and run queries, but cannot edit or create new items.
Viewer
Read-only access - view projects and results, cannot execute queries.
Sharing Projects
Share your work with stakeholders and the public.
Public Links
Generate shareable links for read-only project access. No login required.
Permission Control
Set link permissions (view/edit/owner) when sharing.
Result Publishing
Publish projects with pre-computed results for instant loading.
SQL Editor
Professional code editing experience
Editor Features
CodeMirror 6 powered editor with full SQL support.
Syntax Highlighting
Color-coded SQL keywords, strings, comments, and numbers.
Autocomplete
Intelligent suggestions for tables, columns, SQL keywords, and referenced frames.
Bracket Matching
Visual highlighting of matching parentheses and brackets.
Auto-Indentation
Automatic code formatting as you type.
Query Management
Track and manage your query executions.
Query History
View all previous queries with timestamps and execution status.
Query Caching
Results are cached for 5 minutes. Automatic invalidation on dependency changes.
Error Detection
Real-time syntax and runtime error highlighting with helpful messages.
Dependency Graph
Automatic CTE generation for referenced frames. Circular reference prevention.
Data Sources
Connect to your data wherever it lives
Database Connections
Native support for popular databases and data warehouses.
PostgreSQL
Full PostgreSQL support with schema browsing and native types.
MySQL
Connect to MySQL databases with table discovery.
MongoDB
Connection string based access to document collections.
BigQuery
Google BigQuery with service account authentication.
Snowflake
Snowflake warehouse connections with database/schema navigation.
File Uploads
Analyze local files directly in your browser.
CSV Files
Comma-separated values with automatic column detection.
Parquet Files
Columnar format for efficient large file analysis.
JSON Files
Structured JSON with automatic schema inference.
Browser-Based SQL
DuckDB-WASM executes queries entirely in your browser - no server round-trips.
Export & Download
Get your work out of FlowFrame
Query Export
Export queries in multiple formats.
SQL Export
Original or compiled queries with CTEs and comments.
JSON Export
Structured format with metadata and compilation status.
CSV Export
Tabular format for spreadsheet import.
Markdown Export
Documentation-friendly format with code blocks.
Visualization Export
Download charts as images.
PNG Export
High-resolution PNG images of charts.
Result Data
Export chart data as CSV or JSON for further analysis.
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
Execute Query | Ctrl+Enter / Cmd+Enter |
Execute Query (Alt) | F5 |
Undo | Ctrl+Z / Cmd+Z |
Redo | Ctrl+Y / Cmd+Y |
Comment Line | Ctrl+/ / Cmd+/ |
Copy text/cell value | Ctrl+C / Cmd+C |
Paste | Ctrl+V / Cmd+V |
Copy Object on Canvas | Ctrl+Shift+C / Cmd+Shift+C |
Paste Object | Ctrl+D / Cmd+D |
Select All | Ctrl+A / Cmd+A |
Ready to get started?
Create your free account and start building visual data workflows today.
Start Free