How It Works

What makes LiteFrame different.

Clean HTML Output

Every page LiteFrame serves is clean HTML and CSS. No JavaScript frameworks on the front end, no render-blocking scripts, no layout shift. This is why PageSpeed scores stay in the 90s without optimization plugins or CDN tricks.

Single Admin Panel

The entire admin is one interface. Pages, collections, SEO, forms, media, AI tools, and settings all live in one place. No plugin ecosystem, no compatibility matrix, no update anxiety.

Content Model

All content lives in a unified system. Standard pages, blog posts, landing pages, and collection entries are all managed the same way. Collection field data is stored as structured JSON, which means your content is portable and queryable.

Templates Without Code

Layouts use HTML with {{token}} syntax. You write the HTML you want, drop in tokens where data goes. No PHP, no template language, no build step. If you can write HTML, you can build templates.

Site Modes

LiteFrame supports multiple site modes for different use cases:

Portability

Your site is yours. Export at any time as a complete static HTML package. Your content, your templates, your images, fully self-contained and deployable to any web server.

Getting Started

Your site is ready. Here's how to make it yours.

Your Admin Panel

Log in at yourdomain.com/admin with the credentials from your welcome email. You'll land on the Dashboard, which shows your content stats, PageSpeed score, SEO readiness, and recent activity.

First Steps

1. Set your site name and branding. Head to Settings and configure your site name, logo, and favicon. These appear in the admin sidebar and can be used in your site templates.

2. Build your first page. Click + Page from the Dashboard quick actions. Give it a title, write some content, and hit Publish. Visit your site to see it live.

3. Set up collections. If your site needs structured content (team members, services, resources, locations), create a Collection from Content > Manage Content. Add your entry fields, design your cards, and start adding entries.

4. Configure SEO. SearchLab will score every page you publish and give you actionable recommendations. Connect Google Search Console in SearchLab > Settings to unlock CTR gap analysis and position tracking.

The Toolbox

The orange button in the top-right corner of the admin opens the Toolbox panel. It has three tabs:

• Shortcodes lists every collection with copy-paste shortcode snippets for embedding, plus all available template tokens and layout tokens.
• Quick Links provides direct navigation to pages, collections, media, code, and settings.
• Help links to this documentation, the changelog, and lists keyboard shortcuts (Ctrl+S to save, Ctrl+Shift+E for code editor).

Importing from WordPress

If you're migrating from WordPress, use the built-in importer at Content > Import. It handles WP XML exports and automatically maps post types to collections, preserving field keys and taxonomy. Multiple content types can be mapped and imported in a single pass.

Taking Your Site With You

LiteFrame is yours. If you ever want to leave, export your entire site as a static HTML package from Settings > Export. You get clean HTML, CSS, and images that work on any hosting provider.

Pages

Standard content pages, blog posts, and landing pages.

Page Modes

Page Templates

Each page can use one of these templates, configured in Code > Templates:

• Default - Standard page with header, footer, and content area
• Full Width - No sidebar constraints, content spans the viewport
• Blank - No header or footer, just the content
• Custom HTML - Raw HTML, no wrapper at all

Page Locking

Owners can lock individual pages to prevent editor-role users from modifying them. The lock toggle appears in the editor controls bar. Locked pages show a padlock icon for editors and reject save attempts at the server level.

Visual Editor

The visual editor is a diff-based overlay that loads the live page in an iframe. Click any editable element (headings, paragraphs, images, links, buttons) to edit it in place. Changes are tracked and applied back to the source HTML on save without serializing the iframe DOM, so shortcodes, scripts, and whitespace are preserved. Template regions and shortcode blocks are greyed out and non-editable.

Save Flow

Content is edited in the admin editor and saved via AJAX. HTML content is base64 encoded before transmission (ModSecurity compliance), then decoded and stored in the pages.content column.

Collections

Structured content types with custom fields, templates, and taxonomy.

What are Collections?

Collections are custom content types. A "Resources" collection might have fields for category, read time, and a body. A "Team Members" collection might have fields for job title, photo, and bio. Each collection gets its own index page, entry pages, category/tag taxonomy, and card templates.

Creating a Collection

Navigate to Content > Manage Content and click + New Collection. Give it a name, slug, and URL prefix. The slug determines the page_mode value for entries and the URL prefix determines the public URL path.

Collection Tabs

Each collection has the following tabs:

• Entries - List, create, and manage content entries
• Content Templates - Four sub-tabs for entry fields, card template, index page, and entry page
• Taxonomy - Manage categories and tags for this collection
• Features - Toggle collection capabilities on/off
• Settings - Slug, prefix, and collection-level configuration

Feature Toggles

The Features tab controls what panels appear in the entry editor and what functionality is available:

• Content Body - Visual editor with free-form HTML content, like a page or blog post body
• Categories & Tags - Organize entries with taxonomy scoped to this collection; enables archive pages
• Author - Track who created each entry; shows author field in the editor
• Dates - Published date, chronological sorting; makes this collection time-based like a blog
• SEO / Rank Readiness - Meta titles, descriptions, focus keywords, Rank Readiness scoring per entry
• Comments - Allow visitors to comment on entries

Taxonomy

Categories and tags are managed in the Taxonomy tab. Each category/tag gets a slug used for archive URLs (/prefix/?cat=slug). Entries can be assigned categories and tags in the entry editor.

API / Headless

Each collection has its own API mode, configurable in the Features tab. Four modes are available:

Entry Fields

Define the data structure for your collection entries.

Overview

Entry fields are the first sub-tab inside Content Templates. Each field you define becomes an input in the entry editor and a {{token}} available in your card, index, and entry page templates. Fields are stored as JSON in engine_collections.fields_json.

Field Types

Field Options

Each field has these configurable properties:

• Label - Display name shown in the entry editor
• Key - Machine name used for the {{key}} token and JSON storage
• Required - Whether the field must be filled before saving
• Placeholder - Hint text shown when the field is empty
• Options - For select type: comma-separated list of choices

Section Dividers

The special _section type adds a visual heading divider in the entry editor. It creates no token and stores no data. Use it to organize long field lists into logical groups.

Repeater Groups

The group type creates a repeater: users can add multiple rows of sub-fields. Each sub-field has its own key and type. In templates, use the loop syntax:

HTML{{#team_members}}
  <div class="member">
    <h3>{{name}}</h3>
    <p>{{role}}</p>
    <img src="{{photo}}" alt="{{name}}">
  </div>
{{/team_members}}

JSON Structure

Fields are stored as a JSON array. Each field object follows this structure:

JSON{
  "label": "Job Title",
  "key": "job_title",
  "type": "text",
  "required": false,
  "placeholder": "e.g. Senior Developer",
  "options": "",
  "fields": []
}

For group type fields, the fields array contains sub-field objects with the same structure (minus nested groups).

Built-in Tokens

These tokens are always available regardless of your field schema:

Card Template

How each entry looks in listings.

Presets

Three built-in presets are available to get started quickly. Each provides a complete card design with image, title, excerpt, date, and hover effects:

New collections default to the Shadowed preset. Existing collections with no saved template get a runtime fallback using the same Shadowed layout.

Custom Card HTML

Select "Custom" to write your own card template using HTML, CSS, and tokens. The card template renders once per entry in any listing context (index page, shortcode embeds, category archives).

HTML<a href="{{url}}" class="my-card">
  <img src="{{featured_image}}" alt="{{title}}">
  <div class="my-card-body">
    <span class="my-card-cat">{{categories}}</span>
    <h3>{{title}}</h3>
    <p>{{excerpt}}</p>
  </div>
</a>

Embed Card

An optional second card template used when embedding a collection via shortcode with card="embed". If empty, the main card template is used everywhere. This lets you have a full card on the index page and a compact card when embedded on other pages.

Available Tokens

All built-in tokens ({{title}}, {{url}}, {{featured_image}}, {{excerpt}}, {{date}}, {{author}}, {{categories}}, {{category_links}}, {{read_time}}) plus any custom entry field keys are available in card templates.

Index Page

The listing page showing all entries in a collection.

Overview

The Index Page is the third sub-tab inside Content Templates. It controls the main listing page at /prefix/ showing all entries in a configurable grid. Category and tag filtered pages (/prefix/?cat=slug) inherit these settings.

Grid Layout

Three controls define the entry grid:

• Columns (1-6) - Number of grid columns
• Gap (px) - Space between cards
• Max Width (px) - Maximum width of the grid container

Sort & Pagination

• Entries Per Page - How many entries show before pagination
• Sort By - Manual Order, Publish Date, Title, or Created Date
• Direction - Newest First or Oldest First

Grid Section

The grid section wraps the entry cards. Controls include vertical/horizontal padding and background color. These apply to the section container that holds the grid.

Header Section

An optional header above the grid. Two modes:

• On - Shows the collection name with configurable background color, text color, padding, subtitle, and text alignment
• Off - No header, grid starts immediately

Category Filters

When enabled, filter buttons appear above the grid. Only renders if categories exist for the collection. Fully stylable:

• Button shape - Font size, weight, padding, border radius
• Default state - Background, text color, border color and width
• Hover state - Background, text color, border color
• Active state - Background, text color, border color
• Layout - Alignment, gap between buttons, bottom margin

Entry Page

The full page view for individual collection entries.

Two-Zone Layout

The entry page is built from two zones. The Hero section always spans the full width of the container and contains the featured image, title, and metadata (date, author, categories). The Content section sits below it and holds the body text with an optional sidebar.

Template Mode

Choose between two approaches:

• Default Layouts - Hero + content zones with sidebar options and full styling controls
• Custom Template - Your own HTML/CSS/JS with complete control

Hero Layouts

Five hero configurations are available:

Hero spacing is fully configurable: padding top/bottom, margin top/bottom, image max height, image border radius, and column gap (for split layouts).

Content Section

The content section supports three layout options:

• Full Width - Content spans the container
• Content + Right Sidebar - Main content with a right sidebar
• Left Sidebar + Content - Left sidebar with main content

The sidebar aligns with the body text, not the hero. It sits below the hero zone.

Element Styling

Fine-grained control over visual appearance:

• Title - Font family (7 options), size, weight, color
• Metadata - Font size, color, bottom margin
• Body Content - Font size, line height, color
• Page Background - Background color, text color

Sidebar Widgets

When a sidebar layout is selected, toggle these auto-generated widgets:

• Search - Search within this collection
• Categories - Category list with entry counts
• Tag Cloud - All tags for this collection
• Recent Entries - Latest entries with configurable count

Sidebar width is adjustable (200-480px).

Custom Template

Switch to Custom Template mode for full HTML/CSS/JS control. All entry tokens are available. The custom template replaces both the hero and content zones entirely.

Shortcodes

Embed collections and content anywhere.

The main shortcode for embedding collection entries. Both and are accepted for backward compatibility.

Shortcode

Attributes

Style Presets

Embed a gallery created in the Media Library:

Shortcode

Supports layout (grid, masonry, justified, slider), columns, gap, and per_page attribute overrides.

Name *

Email *

Phone

Reason for your message * Support Enterprise Sales General

Your LiteFrame Website URL *

Your Message *

Send Message

Embed a form:

Shortcode
Name *
Email *
Phone
Reason for your message * Support Enterprise Sales General
Your LiteFrame Website URL *
Your Message *
Send Message

Templates & Tokens

Build layouts with HTML and token syntax.

Token Syntax

Tokens use double curly braces: {{token_name}}. They are replaced with real data at render time. No PHP, no template engine.

Simple Replacement

HTML<h1>{{title}}</h1>
<img src="{{featured_image}}" alt="{{title}}">

Repeater Loops

HTML{{#team_members}}
  <div class="member">
    <h3>{{name}}</h3>
    <p>{{role}}</p>
  </div>
{{/team_members}}

Conditional Blocks

Render content only when a field has a value:

HTML{{?subtitle}}
  <p class="subtitle">{{subtitle}}</p>
{{/subtitle}}

Entry Tokens

Custom Field Tokens

Any custom field key is automatically available as a token. If you have a field with key job_title, use {{job_title}} in your template.

Layout Tokens

These work in the Custom layout template for index pages:

Dynamic Tokens

Global values configured in Settings. Use the token. prefix:

HTML<p>Call us at </p>
<a href="">Book Now</a>

Change the value once in Settings and it updates everywhere the token appears.

Media & Galleries

Manage images, files, and image galleries.

Media Library

Upload images, documents, and files through the Media Library. Supported formats: JPG, PNG, WebP, GIF, SVG, PDF, MP4, and MP3. Multiple file upload is supported via drag-and-drop or the file picker. Files are searchable by name.

Image Processing

On upload, images are automatically processed based on your Settings:

• Compression - Re-saves at your configured quality level (default 82%). Configurable via media_quality setting.
• Auto-resize - Images larger than 2400px on their longest side are resized down, preserving aspect ratio and transparency.
• WebP Generation - A WebP version is automatically created alongside the original. If the WebP turns out larger than the source (rare, with small images), it is discarded.

Image Editing

Click any image in the library to open it in the preview panel. From there you can:

• Rename - Change the filename. The WebP companion file is renamed to match.
• Scale - Resize to specific pixel dimensions.
• Crop - Visual crop tool with draggable region selection.
• Copy URL - Copy the public URL for use in templates or external pages.

Bulk delete is available by selecting multiple files and clicking Delete Selected.

Media Picker

The media picker modal appears wherever an image field is used (page editor, collection fields, settings). It offers four tabs:

• Media Library - Browse and select from existing uploads
• Upload - Upload new files
• Pexels Stock - Search and insert free stock photos (requires Pexels API key in Settings)
• URL - Enter an external image URL

Galleries

The Galleries tab lets you create named image galleries. Each gallery has a name, slug, layout, and a sortable list of images with optional captions.

Gallery Layouts

Galleries are embedded via shortcode: . Shortcode attributes override the saved gallery settings. Galleries support pagination with a configurable per-page count.

Image Management

Within a gallery, images can be reordered via drag-and-drop. Add images from the Media Library or by URL. Each image can have a caption.

SearchLab SEO

Built-in SEO intelligence suite.

Dashboard

The SearchLab dashboard provides a site-wide overview: aggregate SEO scores, keyword chart, and actionable summaries highlighting pages that need attention.

Site Health & Rank Readiness

Site Health scores every published page on SEO readiness with a checklist of actionable recommendations. Rank Readiness provides a site-wide average score and per-page breakdown.

Keyword Research

Powered by DataForSEO:

• SERP Lookup - Live Google results for any keyword with own-site position banner, SERP feature detection (Featured Snippet, PAA, Local Pack, Image Pack, Video, AI Overview, Knowledge Panel, Shopping, Sitelinks), and top 20 organic results
• Related Keywords - Seed keyword returns up to 30 related terms with search volume, CPC, and competition scores
• People Also Ask - Questions displayed inline, clickable to re-search

Position Tracking

Track keywords per page with color-coded ranking display. Positions are automatically checked on every GSC sync using SERP cache (12-hour TTL). Position history accumulates over time for trend analysis.

CTR Gaps

Identifies pages ranking on page 1 of Google with below-average click-through rates. These are your highest-leverage optimization opportunities.

AI Recommendations

The AI recommendation engine analyzes each page using all available data: SEO score, failed checks, GSC queries, tracked keyword positions, SERP features, cached competitor data, PAA questions, recent change history, and content preview. Generates 5 prioritized recommendations with data-backed reasoning. Recommendations are cached for 48 hours and appear in the page editor.

Change Tracking & Impact

Every page save snapshots SEO-relevant fields. Changes are auto-classified (keyword change, meta update, content update, schema update). The impact measurement system compares 14-day windows before and after changes to show impressions, clicks, position, and CTR deltas.

Integrations

Configure in SearchLab > Settings:

• Google Search Console (OAuth) - CTR data, impression data, position data
• Bing Webmaster Tools - Bing-specific metrics
• DataForSEO - Keyword research, SERP analysis, position tracking, backlink data
• IndexNow - Instant indexing notifications to Bing/Yandex on publish

AI Visibility

Tracks how AI platforms (ChatGPT, Perplexity, Gemini, etc.) reference your content. Monitors LLM mentions and citation patterns.

BuildLab AI

AI-powered content and development assistant.

Overview

BuildLab is an AI assistant built into the admin panel, powered by the Anthropic API. It includes multiple tools:

• Chat - Conversational AI for questions about your site, content strategy, and code
• Content Writer - AI-generated content with your brand voice and SEO context
• SEO Generator - Meta titles, descriptions, and recommendations based on your customer profile and target keywords
• Stock Images - AI-powered stock photo search and insertion
• Wizard - Step-by-step guided workflows for common tasks
• Notepad - Scratchpad for drafting and iterating

Token usage is tracked per-site and visible in the BuildLab interface.

Forms

Build and manage contact forms.

Form Builder

The form builder uses a visual layout with a dark icon rail on the left, field configuration in the middle, and a live preview canvas on the right. Drag fields to reorder, click to configure.

Embedding Forms

Forms are embedded via shortcode:

Shortcode
Name *
Email *
Phone
Reason for your message * Support Enterprise Sales General
Your LiteFrame Website URL *
Your Message *
Send Message

Submissions go to the Forms > Entries tab and can be emailed to configured recipients.

Secure Templates

Locked-down editing for client-managed sites.

What is Hosted Secure Mode?

When a site runs in hosted_secure mode, the template HTML is locked. Users cannot access the code editor or modify template markup. Instead, they edit through a schema-driven field UI. The developer controls the design; the client controls the content.

How It Works

The system has three layers:

• Template files live in data/templates/ as plain HTML files with {{token}} syntax
• Field schemas are stored in the secure_templates database table as JSON, defining what fields the user sees
• Page content is stored as JSON in pages.content, with each key matching a field from the schema

When a page is rendered, the template file is loaded, the field data is queried, and tokens are replaced. Output is cached with ETag support for efficient delivery.

Template Manager

Accessed at /admin/templates (owner-only). Create templates with a slug, label, and description. Each template gets an HTML file and a field schema.

Building a Template

Write your HTML layout with tokens for every editable region:

HTML<section class="hero">
  <div class="container">
    <h1>{{headline}}</h1>
    {{?subheadline}}
      <p class="sub">{{subheadline}}</p>
    {{/subheadline}}
    <img src="{{hero_image}}" alt="{{headline}}">
  </div>
</section>

{{#features}}
  <div class="feature">
    <h3>{{title}}</h3>
    <p>{{description}}</p>
  </div>
{{/features}}

Token Types

Field Schema

Define what fields users see in the editor. Uses the same field types as collection entry fields (text, textarea, html, wysiwyg, image, select, checkbox, number, date, group). The schema is edited as JSON in the template manager.

Caching

Rendered pages are cached in the secure_cache table. Cache is invalidated when a page is published or when the template itself is saved. ETag headers enable browser-side caching with 304 responses.

Template Locking

Templates can be locked to prevent accidental edits. Locked templates show a lock icon in the list and require an explicit unlock before editing.

API

REST API for external integrations.

Endpoints

LiteFrame exposes a REST API through api.php. Collection entries can be accessed when an API mode is enabled for the collection (in Features > API / Headless).

HTTPGET /api.php?collection=resources&limit=10
GET /api.php?collection=resources&category=guides
GET /api.php?collection=resources&id=42

API Modes

Response Format

All responses are JSON. Entry data includes all custom fields, built-in fields (title, slug, excerpt, featured_image), taxonomy assignments, and metadata (dates, author, status).