Getting Started

This guide gets you from an empty folder to a working Frontbacked theme you can run locally, push to GitHub, and turn into a data-backed website. A theme is the reusable website package you ship: HTML pages, CSS, JavaScript, assets, optional skins, and optional FRL rules for the data and actions the site supports.

When you want copy-ready slices, keep Starter Examples open beside this page.

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 local server serves your HTML/CSS/JS files and lets frontbacked.js use the same Frontbacked APIs your published theme will use. When your theme has FRL rules, you can try them locally too.

2. Create a Theme Folder

A complete reference theme is available in the Frontbacked repository as themes/example-theme-01. It shows image resizing, adaptive video, auth, uploads, forms, lists, and practical FQL patterns you can pull apart while building your own theme.

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/versions/frontbacked-v37.0.105.js"></script>
  <script>
    Frontbacked.init({ endpoint: "/api" });
  </script>
</body>

FQL keeps browser state and the DOM in sync. When your page references settings, posts, transactions, wallet balances, aggregates, or lists, Frontbacked loads the data your UI needs.

4. Protect Writes with FRL

In backend/index.rules, define the post types your theme accepts.

version 2;

post leads {
  before create {
    $post.pending.data.email = str.lower(str.trim($post.pending.data.email));
  }

  schema {
    name: { type: "string", min: 1, max: 120, required: true }
    email: { type: "email", required: true }
    message: { type: "string", max: 1000 }
    createdAt: { type: "serverTime" }
  }

  allow create: $post.pending.data.email

  allow get: $admin.canRead("$this")

  allow list(limit=20, max=100): $admin.canRead("$this")

  allow edit: $admin.canEdit("$this")

  allow delete: $admin.canDelete("$this")
}

FRL runs before data is stored. It normalizes incoming data, validates the schema, checks permissions, and only then allows the action, giving your frontend theme a production-ready data layer.

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 Starter Examples when you want a copy-ready page shape. Read 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.

When using AI to generate theme code, open /llms.txt and include it as project context. It keeps generated FQL, FRL, and helper calls aligned with the public Frontbacked API.