Introduction
In Frontbacked, a theme is a reusable website package: pages, styles, scripts, assets, optional skins, and optional rules for the data the site can store and change. A theme can be a marketing site, portfolio, store, member portal, dashboard, marketplace, course site, publication, or any other website shape you want site owners to publish.
Frontbacked lets frontend developers build those complete, data-backed themes without rebuilding the same app plumbing for every project. A theme starts with the stack you already know: HTML, CSS, JavaScript, assets, and one Frontbacked script that gives your pages data, auth, uploads, payments, settings, skins, and protected writes.
The core idea is simple:
- Build your theme as static frontend files.
- Use Frontbacked Query Language (FQL) in HTML to declare state, data fetching, and DOM updates.
- Push to GitHub and publish the theme from the platform.
- Add Frontbacked Rule Language (FRL) when your theme needs stronger validation, permissions, and data protection.
What Theme Developers Build
A Frontbacked theme usually contains:
| File or folder | Purpose |
|---|---|
index.html, signup.html, signin.html, and other pages | The pages site owners and visitors will use. |
| CSS and JavaScript assets | Your design system, interactions, helper functions, and page behavior. |
skins/ | Optional CSS skin files and skins/manifest.json for alternate visual looks. |
| Frontbacked script | The versioned script loaded from https://cdn.frontbacked.com/versions/frontbacked-vx.y.z.js to read FQL declarations and call the site API. |
backend/index.rules | The single FRL file where the theme developer declares rules for the theme data. |
backend/paths.json | Optional FQL-friendly route mappings for clean URLs such as /blog/:slug. |
| Images, fonts, and media | Theme assets committed with the project. |
The Two Languages
Frontbacked themes are powered by two purpose-built languages.
Frontbacked Query Language (FQL) turns HTML into a live interface. It lets you declare page state, bind forms, render DOM updates, fetch settings and posts, repeat list templates, read auth, and call Frontbacked APIs without writing a fresh fetch layer for every page.
Frontbacked Rule Language (FRL) turns your theme data model into a protected data layer. It defines accepted fields, required values, permissions, normalization, related writes, custom endpoints, and private configuration so site owners can run production websites from your theme with confidence.
How Publishing Works
When you connect a GitHub repository to Frontbacked, the platform processes commits for a selected theme root path. Default branch commits become production versions that site owners can upgrade to. Non-default branch commits can still be processed as preview versions so a theme developer can test them before merging.
For a developer, the practical workflow is:
- Build locally with
frontbacked-server. - Commit and push your theme to GitHub.
- Connect the repository on Frontbacked.
- Select the root path for the theme.
- Test preview versions.
- Publish production versions from the default branch.
The best path is to learn FQL first so you can build pages, forms, and dynamic UI quickly. Then learn FRL to make those same experiences safe when they start accepting user data.
For a fast working path, open Starter Examples and copy the waitlist, dashboard, store-card, and endpoint patterns. For a fuller reference theme, use themes/example-theme-01 in the Frontbacked repository. It shows image resizing, adaptive video, uploads, auth, forms, lists, and FQL patterns that you can adapt into production themes.
What This Lets You Ship
A theme can stay frontend-first while still offering serious app behavior:
| Theme capability | Where it comes from |
|---|---|
| Dynamic forms, live validation, and loading states | FQL state, DOM bindings, and Frontbacked.state.check() |
| Authenticated dashboards and protected pages | FQL auth roots, f-access, and auth helpers |
| Lists, detail pages, route params, and aggregates | FQL data roots and theme routing |
| Nested post uploads with files, progress, and resume | Files API plus createPost and updatePost |
| Responsive images and adaptive video players | Files, Image Resizing, and Adaptive Video |
| Site-owner editable settings and visual skins | Settings bindings and Theme Skins |
| Strict data contracts and ownership rules | FRL schemas, immutable fields, and allow rules |
| Derived fields, audit records, and related writes | FRL before/after hooks and post.* helpers |
| Delayed workflows and custom JSON routes | FRL async resolution and endpoints with dedupe |
The docs are split so you can learn in that same order: start with FQL for the page experience, then use FRL to define what the theme is allowed to store, expose, and automate.
Building With AI
Frontbacked publishes an AI context file at /llms.txt. Give that file to your AI coding tool when you want help generating a theme, refactoring FQL, or writing FRL rules. It lists the public syntax, helper names, naming rules, and safe patterns the AI should stay inside.