FDL — Folium Design Language

A declarative language for designing user interfaces for mobile and web.

FDL lets you describe screens, navigation, and data interactions in a clean, readable syntax. This extension provides full language support for .fdl files in Visual Studio Code.

© inecta llc

Features

• Syntax highlighting
• Intelligent autocomplete with context awareness
• Real-time validation and diagnostics
• Hover documentation
• Go-to-definition
• Compile to code from the command palette

UI Components

FDL provides a rich set of declarative components for building app interfaces.

Screens & Views

Data Visualization

Navigation & Structure

App-Level

Component Details

card

A detail view for a single record. Supports editable fields, actions, lookup fields, and navigation to child records.

card CustomerCard <Customer> {
    title = 'Customer';
    field fName { editable = true; };
    field fCity { editable = true; };
    field fBalance { formatter = currency('$', 2); };
    action aRecalculate;
    newButton;
    deleteButton;
}

Members: field, action, newButton, deleteButton, childNavigation, lookupDisplay, showUserEmail, showCompanyName

Field options: editable, lookup, formatter, tabOrder

tile

Defines how a record appears as a row in a list. Each tile has exactly one navigation behavior.

tile CustomerTile <Customer> {
    titleField = fName;
    subtitleField = fCity;
    navigate = CustomerCard;
}

Navigation options (choose one):

• navigate — opens a card for the same entity
• generalNavigate<Entity> — navigates to a different entity's list
• lookupField<Entity> — returns a value to a lookup field (no navigation)

list

A scrollable, searchable list of records.

list CustomerList <Customer> {
    title = 'Customers';
    tile = CustomerTile;
    searchField = fName;
    newButton = CustomerCard;
}

dataGrid

An editable table with typed columns and optional lookup columns.

dataGrid SalesLineGrid <SalesLine> {
    title = 'Lines';
    column fDescription { editable = true; flexWidth = 3.0; };
    column fQuantity { editable = true; width = 80; };
    column fAmount { formatter = currency('$', 2); };
    lookupColumn fItemNo <Item> { lookupList = ItemList; editable = true; };
    enableNewRow;
    enableDeleteRow;
}

document

Combines a header card with a lines grid for master-detail scenarios like sales orders or invoices.

document SalesOrderDoc <SalesHeader, SalesLine> {
    title = 'Sales Order';
    header = SalesOrderCard;
    lines = SalesLineGrid;
}

groups

Records grouped by a field value with expandable sections.

groups TasksByStatus <UserTask> {
    title = 'Tasks by Status';
    groupByField = fStatus;
    groupTile = TaskGroupTile;
    showAllEnumValues;
}

chart

Data visualization with aggregation and interactive navigation.

chart SalesByRegion <SalesHeader> {
    title = 'Sales by Region';
    categoryField = fRegion;
    valueField = fAmount;
    aggregation = sum;
    chartType = bar;
    showLegend = true;
    onSliceTap = SalesOrderList;
}

Chart types: pie, bar, line Aggregations: count, sum, avg, min, max

gantt

Timeline visualization for date-range data.

gantt ProjectTimeline <ProjectTask> {
    title = 'Project Timeline';
    startDateField = fStartDate;
    endDateField = fEndDate;
    labelField = fDescription;
    progressField = fPercentComplete;
    timeScale = week;
    onBarTap = TaskCard;
}

Time scales: day, week, month, quarter, year

board

Kanban-style board with optional drag-and-drop.

board TaskBoard <UserTask> {
    title = 'Task Board';
    columnField = fStatus { showAllEnumValues; };
    rowField = fPriority { showAllEnumValues; };
    cellLabelField = fTitle;
    enableDragDrop;
    onCellTap = TaskCard;
}

kpi

A single aggregated metric with optional navigation.

kpi TotalSales <SalesHeader> {
    title = 'Total Sales';
    valueField = fAmount;
    aggregation = sum;
    formatter = currency('$', 0);
    onTap = SalesOrderList;
}

menu / menuRail

Navigation structure for the app. menu renders as a drawer, menuRail as a side rail.

menuRail MainMenu <Company> {
    title = 'Sales App';
    item<Customer> customers {
        title = 'Customers';
        navigateTo = CustomerList;
    }
    item<SalesHeader> orders {
        title = 'Sales Orders';
        navigateTo = SalesOrderList;
    }
    staticItem settings {
        title = 'Profile';
        navigateTo = UserProfile;
    }
    showLogout;
    showCompanyName;
}

profile

User profile and settings screen.

profile UserProfile {
    title = 'Settings';
    showCompanyName;
    changeDefaultCompany;
    changeLanguage;
}

login

Authentication screen.

login AppLogin {
    title = 'Welcome';
    emailLabel = 'Email';
    passwordLabel = 'Password';
    loginButtonText = 'Sign In';
    enablePasswordReset;
}

Formatters

Format how field values are displayed:

formatter = currency('$', 2);       // $1,234.56
formatter = percentage(0);          // 75%
formatter = decimal(2);             // 1,234.56
formatter = integer();              // 1,235
formatter = date('MMM d, yyyy');    // Mar 12, 2026

Filters

Filter records declaratively:

filter = eq(fStatus, 'active');
filter = gt(fAmount, 100);
filter = and(
    eq(fStatus, 'active'),
    gt(fAmount, 100)
);

Operators: eq, ne, gt, ge, lt, le, and, or

Commands

Access from the Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

Settings