Getting Started
This guide gets you from an empty theme folder to a locally running Frontbacked theme that can be pushed to GitHub.
1. Install the Local Server
Use frontbacked-server while building a theme locally.
npm install -g frontbacked-server
From your theme root, run:
frontbacked-server
The server serves your HTML/CSS/JS files and exposes the local API that the CDN-loaded frontbacked.js calls. When your theme has backend rules, it loads those too.
2. Create a Theme Folder
A complete reference theme is available in the Frontbacked repository as themes/example-theme-01. It is the dedicated lab theme for image resizing, adaptive video, auth, uploads, and FQL tests, so theme developers can pull it apart without mixing test pages into product themes.
A small theme can start with this structure:
my-theme/
index.html
signup.html
signin.html
css/
app.css
js/
app.js
skins/
default.css
backend/
index.rules
paths.json
The HTML pages are normal pages. FQL is added through a {STATE} comment in <head> and f-* attributes in the DOM. backend/index.rules is the theme's single FRL file, where the theme developer declares the rules for the data. Add backend/paths.json when clean URLs such as /blog/:slug should map to an HTML file. Add skins/ when the theme should offer multiple CSS looks.
3. Add Frontend State with FQL
In a page, include a state declaration and initialize Frontbacked.
<head>
<!-- {STATE}
state = {
"form": {
"email": "#email.oninput.target.value",
"name": "#name.oninput.target.value"
},
"displayName": "$state.form.name || 'Guest'"
}
-->
</head>
<body>
<input id="name" name="name">
<input id="email" name="email">
<h1 f="true" f-text="$state.displayName">Guest</h1>
<script src="https://cdn.frontbacked.com/frontbacked.js?v=20.0.0"></script>
<script>
Frontbacked.init({ endpoint: "/api" });
</script>
</body>
FQL keeps the browser state and the DOM in sync. It also plans backend data requests when your page references settings, posts, transactions, wallet balances, aggregates, or lists.
4. Protect Writes with FRL
In backend/index.rules, define the post types your theme accepts.
post leads {
process {
$post.email = str.lower(str.trim($post.email));
}
schema {
name: { type: "string", min: 1, max: 120, required: true }
email: { type: "string", min: 3, max: 180, required: true }
message: { type: "string", max: 1000 }
createdAt: { type: "servertime" }
}
create require[
$post.email
]
read require[
$access.read
]
edit require[
$access.edit
]
delete require[
$access.delete
]
}
FRL runs before data is stored. It is the safety layer that normalizes the post, validates the schema, checks permissions, and only then allows the action.
5. Publish from GitHub
Commit the theme folder to GitHub, then connect the repository on the Frontbacked platform. When choosing a theme root path, select the folder that contains the HTML files and backend/index.rules.
Default branch commits become production versions. Commits from other branches can be processed as preview versions for testing before they are merged.
What to Read Next
Start with FQL Overview if you are building forms, pages, dynamic lists, or data-driven UI. Read Theme Routing when you want clean URLs and route params. Move to FRL Overview when you are ready to protect the data those pages create and update.