Frontbacked FQL and FRL for VS Code
Build Frontbacked themes with clearer code and helpful feedback as you type. Write interactive pages with FQL in your HTML and define data, permissions, endpoints, and jobs with FRL—all in VS Code.
Get started
- Install Frontbacked FQL and FRL.
- Open your theme folder in VS Code.
- Edit your
.html pages and .frl files. Highlighting and diagnostics activate automatically.
Keep HTML files in HTML language mode and FRL files in FRL mode. There is no additional setup or separate FQL file to create.
Read your theme code at a glance
- FQL in HTML: highlighting for
f-* directives, expression values, and {STATE} blocks, including variables, property paths, functions, and event bindings.
- FRL: distinct highlighting for native and theme-defined functions,
$ namespaces, nested properties, block names, parameters, and named options.
- Your editor theme: colors follow your chosen VS Code theme, with consistent roles across your code.
Text values such as f-loading-text="Please wait…" stay readable as complete strings, while expressions such as f-show="$state.count > 0" highlight their individual parts.
Catch common mistakes while you code
See inline error markers and explanations in VS Code's Problems panel for supported checks, including:
- Misspelled or undefined functions, such as
musti(...) or $fn.apiHosts() when you declared apiHost.
- Unknown native methods, such as
posts.findOneDontExist(...).
- Unsupported
$ namespaces and invalid assignments, including writing to $context inside a function instead of using $local.
- Missing or extra arguments and definite type mismatches for supported native functions, such as passing an object to
str.lower(...).
- Invalid FQL expressions and unbalanced
{STATE} blocks.
Hover over an error marker to read the explanation. Where available, the message suggests a likely function name or correction.
Argument checks use types that can be determined from your code. Values supplied dynamically at runtime cannot always be checked in the editor; preview and test your theme as you build.
Build with Frontbacked
Use FQL for data bindings, forms, and interactive pages, and FRL for protected data and server operations. Learn more at Frontbacked.
